Shopify 主题开发 - 如何在 CSS 或内联样式中使用 section.block.variable？

Question

我正在尝试在我的 Shopify 代码中使用一个变量来声明背景和字体颜色...

有人能告诉我哪里出错了吗？

非常感谢，这是我的代码：

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "id": "contacts-section",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "info@example.com"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

注意这是我的尝试，我也试过把它放在下面的样式部分：

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">

如有指点，将不胜感激。

解决方案：如果您只使用部分设置，请确保您没有尝试使用块设置...

Answer 1

您误解了节和块。您已经在部分内定义了颜色设置，但您正试图通过块访问它。我已经更新了代码，也没有您在部分中使用的 id 属性。

Shopify Docs for Section

<div class="section contacts-section" style="background-color: {{ section.settings.contacts-background-color }}; color: {{ section.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "info@delta-sci.com"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Shopify 主题开发 - 如何在 CSS 或内联样式中使用 section.block.variable？

Shopify Theme Development - How to use section.block.variable in CSS or inline style?

css

themes

shopify

shopify-template