将自定义CSS部分添加到Shopify主题

Question

我希望能够向Slider部分添加一个自定义CSS类。

在我的slider-vertical.liquid资产中，我转到{% schema %}，并在settings下添加了以下代码：

{
"type": "text",
"id": "section_css_class",
"label": {
"en": "Section CSS Class"
},
"default": {
"en": "Add CSS class"
}
}
,

然后，在同一个文件的顶部，我修改了DIV包装器：

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %}">

到此：

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} {{ section.settings.section_css_class }}">

我在"；添加CSS类"；我现在在主题编辑器中看到的框似乎并没有被阅读。我尝试了很多测试，发现schema下一定有问题，因为它没有填充我添加的文本。

你知道我做错了什么吗？非常感谢！

Answer 1

默认值不是标签，而是字段的值
此处默认结账

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} {{ section.settings.section_css_class }}">

将是

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} Add CSS class ">

在中

{
"type": "text",
"id": "section_css_class",
"label": {
"en": "Section CSS Class"
},
"default": "Add CSS class"
}
}
,

只需将default更改为"default": "my-css-class"，它就可以在中工作

要进行调试，只需使用类似的div输出section.settings.section_css_class的值

<div>
{{section.settings.section_css_class}}
</div>