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文档的部分

<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 %}