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

Posted 2023-02-23

【中文标题】将自定义 CSS 部分添加到 Shopify 主题

【英文标题】：Add Custom CSS Section to Shopify Theme

【发布时间】：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 下一定有问题，因为它没有填充我添加的文本。

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

【参考方案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>