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": "[e-mail]"
},
{
"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": "[e-mail]"
},
{
"id": "contact-link",
"type": "url",
"label": "Contact Link"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}