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

【问题标题】：Add Custom CSS Section to Shopify Theme将自定义 CSS 部分添加到 Shopify 主题
【发布时间】：2022-01-20 11:12:49
【问题描述】：

我希望能够将自定义 CSS 类添加到本例中的 Slider 部分。

在我的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 类”框中键入的 CSS 类名称似乎没有被读取。我尝试了很多测试，发现schema 下一定有问题，因为它没有填充我添加的文本。

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

【问题讨论】：

标签： html css shopify liquid assets

【解决方案1】：

default 不是标签，它是字段的值。
在这里结帐default

<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" 就可以了

要调试，只需像这样输出section.settings.section_css_class 和div 的值

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

【讨论】：