將自定義 CSS 部分添加到 Shopify 主題

Question

在這種情況下，我希望能夠將自定義 CSS class 添加到 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 Class 名稱現在我在主題編輯器中看到的似乎沒有被閱讀。 我嘗試了很多測試，我發現schema下一定有問題，因為它沒有填充我添加的文本。

你知道我做錯了什么嗎？ 非常感謝！

Answer 1

默認不是 label，它是字段的值。
結帳默認在這里

<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" ，它應該可以工作

要調試，只需 output 的值section.settings.section_css_class與這樣的div

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