エディターで追加したセクションごとに任意のid/クラス名をつけたい

Topic summary

主題: Dawnテーマでエディタ追加セクションごとに任意のID/クラスを付与し、ページ内リンクとCSS適用を安定させたいが、Shopify自動付与のid=“shopify-section-template–…” が開発/本番で変化し運用に支障。

提案/方向性:

  • セクションにID/クラス用の入力欄(settings)を自作し、出力で利用する案。
  • JSONテンプレートでセクションのHTMLラッパー要素を指定する方法(ドキュメントリンクと画像が提示)。

試行結果:

  • sectionIDを直接変更しても自動IDに戻るため不可。
  • セクションファイルで
    のラッパーを試行。しかし実装がページ全体のラップになり意図せず失敗。
  • ページ単位の固有ID付与の可能性は把握。

現状/結論:

  • 明確な解決は未確定。セクション単位のみを正しくラップし、settingsで指定したID/クラスを出力する実装が次の課題。
  • JSONテンプレートでのラッパー指定も検討対象。議論は継続中。
Summarized with AI on February 9. AI used: gpt-5.

お世話になっております。よろしくお願い致します。

使用しているテーマはDawnです。

今回shopifyCLIにてテーマエディタでセクションを追加し、そこにCSSをあてるという手順でカスタマイズしております。

ページ内リンクをつけるために、テーマエディターで追加したセクションごとにCSSをあてたい/固有のIDを指定したいと考えております。

現状ではセクションに「#shopify-section-template–〇〇〇〇__1658825640f2d89c8c」というIDが付与されていますが、開発ストアと本番環境では○○の部分が変わってしまうため、そのままshopify theme pushをしてもうまくいきません。

こちらアドバイスいただけましたら、助かります。

テーマが用意しているセクションに入力欄が存在しない場合は、独自に入力欄を作って出力する必要があると思います。

1 Like

見当違いであれば無視して構いませんが、jsonテンプレートからセクションのHTMLラッパー要素を指定できると思いますので、こちら試してみてはどうでしょうか。

https://shopify.dev/themes/architecture/templates/json-templates

1 Like

sectionIDを直接変更してみたり、試してみたのですがどうしても

id=“shopify-section-template–ここが開発環境で指定されてしまう__89379823”

となってしまうようです。

助言いただいたことを参考に、

sectionファイルに以下のようなラッパーを作り対処してみます。

//コンテンツ

ご助言いただきありがとうございます。

ご返信いただきありがとうございます。

試してみたところ、ページ全体がラップされてしまうようでうまくいきませんでした。

しかし、ページごとの固有のIDをふることができそうで勉強になりました。

ありがとうございます。