schemaで設定した数値がCSSに反映されない

初めに

今回Shopifyで新規セクションを作成して、Schema内でpaddingの値を調整できるように設定しました。(schemaのtypeはrange)
しかしカスタマイズ画面でpaddingの値を変更しても、画面上で値は変わりません...
この解決方法についてまとめていきます。

問題点

前提として今回作成したセクションは、同一ページ内で2個以上使用しています。

実際のセクションのコードは以下の通りです。

{% style %}
    .custom-section{
        padding:{{ section.settings.custom_range }}px 40px;
    }
{% endstyle %}

<section>
	<div class="custom-section">
		.
        .
        .
	</div>
</section>

{% schema %}
{
  "name": "テストセクション",
  "settings": [
    {
      "type": "range",
      "id": "custom_range",
      "min": 10,
      "max": 100,
      "step": 10,
      "unit": "px",
      "label": "余白の調整",
      "default": 40
    }
  ],
  "presets": [
    {
      "name": "テストセクション"
    }
  ]
}
{% endschema %}

こちらの記述をすることで「custom-section」のクラスのついているdivタグには、schameで設定したpaddingが付くはずです。
このセクションを2個配置して、最初のセクションのpadding値をカスタマイズ画面で調整しても値が変わりません。

解決策

今回CSSが当たらなかった理由は、

{% style %}
    .custom-section{
        padding:{{ section.settings.custom_range }}px 40px;
    }
{% endstyle %}

と{% style %}の中にCSSを記述したことが原因です。
この方法で同一セクションを2回使用すると、後に来るセクションのCSSが優先されます。（後に記述されたCSSが優先されるため）

それぞれのセクションに対して異なる余白を設けたい場合は以下のように記述します。

<section>
	<div class="custom-section" style="padding:{{ section.settings.custom_range }}px 40px;">
		.
        .
        .
	</div>
</section>

{% schema %}
{
  "name": "テストセクション",
  "settings": [
    {
      "type": "range",
      "id": "custom_range",
      "min": 10,
      "max": 100,
      "step": 10,
      "unit": "px",
      "label": "余白の調整",
      "default": 40
    }
  ],
  "presets": [
    {
      "name": "テストセクション"
    }
  ]
}
{% endschema %}

上記のように要素内に直接styleを記述する方法です。
もう一つnの方法は以下の通りです。

{% style %}
    #section-{{ section.id }} .custom-section{
        padding:{{ section.settings.custom_range }}px 40px;
    }
{% endstyle %}

<section id="section-{{ section.id }}" >
	<div class="custom-section">
		.
        .
        .
	</div>
</section>

{% schema %}
{
  "name": "テストセクション",
  "settings": [
    {
      "type": "range",
      "id": "custom_range",
      "min": 10,
      "max": 100,
      "step": 10,
      "unit": "px",
      "label": "余白の調整",
      "default": 40
    }
  ],
  "presets": [
    {
      "name": "テストセクション"
    }
  ]
}
{% endschema %}

{{ section.id }}の記述をすることで、そのセクション独自のidを取得することができます。
そのidが振られた要素内にある.custom-sectionに対してCSSを記述することで、該当セクションのみにCSSを当てることができます。

終わりに

セクションごとに独自のスタイルをschemaで調整したい場合は、paddingだkではありません。
今回の方法を使用してより幅広いセクションを作れるようになりました。