Shopify-section-の後の自動で割り当てられる数字はトップページ以外に使えない!?

AI-generated summary

Shopifyのsection.idが、トップページ以外では自動生成の数値IDにならず、同じセクションを複数配置した際にCSSを個別適用しづらい、という質問。特に#shopify-section-{{ section.id }}で背景色や余白をセクションごとに切り替えたいが、他のページでは同一内容が相互に影響してしまう点が問題になっている。

回答では、section.idの仕様として以下が示された。

  • 静的セクション: .liquidを除いたファイル名が返る
  • 動的セクション: 動的に生成されたIDが返る

そのため、トップページ以外で数値のような自動IDが付かないのは不具合ではなく、静的セクションとして扱われているためという整理。解決策として具体的な実装手順までは示されていないが、動的セクション化に関する公式ドキュメントと関連スレッドが案内されている。

結論として、質問への直接回答は「静的セクションでは自動生成IDにはならない」。個別識別が必要なら、動的セクションとして実装する方向で検討が必要。

初めまして!
shopifyにてストア構築しております、ウェブデザイナーの岸本と申します。
1つ質問があります。お手数ですが宜しくお願い致します。

TOPページのセクションで
div id=“shopify-section-16184256735f635d7f”
div id="shopify-section-の後の自動で割り当てられる数字がありますが、TOPページ以外の、
例えばpage.liquidに同じ内容のセクションをいくつか追加して表示した場合は自動で割り当てられる数字にならないので
#shopify-section-{{ section.id }} {
background: {{ section.settings.section_color }};

{% if section.settings.enable_padding_top %}
padding-top: 80px;
{% endif %}

{% if section.settings.enable_padding_bottom %}
padding-bottom: 80px;
{% endif %}
}

のような簡単に自動判別する事が(1つのセクションの内容が他のセクションにも反映されてしまう)できないのですが、TOPページ以外にはdiv id="shopify-section-の後の自動で割り当てられる数字を自動で割り当ててくれるようにする事は出来ないのでしょうか?
classを追記してする方法ではなく、TOPページのように自動でidに数字が割り当てられる方法を知りたいです。
説明わかりにくかったら申し訳ありませんが宜しくお願い致します。

https://shopify.dev/docs/themes/liquid/reference/objects/section#section-id

For static sections, returns the section’s file name without “.liquid”. For dynamic sections, returns a dynamically generated ID.

上記で説明されているように、動的セクションではないのでファイル名が返されます。

動的セクションに関しては以下のスレッドが参考になるかと思います。

https://community.shopify.com/post/986122