トップページ オリジナルのセクションの追加について

AI-generated summary

トップページに独自バナーを追加し、ドラッグして任意の位置へ動かせるような「オリジナルのセクション/ブロック」を作る方法が相談された。

回答では、求めているのは Shopify の「動的セクション」に近い内容であり、理解には schema(テーマエディタで設定項目を定義する仕組み)とテーマエディタの知識が必要だと説明された。

実装の方向性としては、sections ディレクトリにセクションファイルを作成し、その中で schema を定義したうえで、index など該当テンプレートに section タグで読み込む方法が案内された。補足として、公式ドキュメントと日本語の解説動画も提示されている。

最終的に、質問者は内容を試し、HTML/CSS と組み合わせてブロックを作成し、それを組み込むイメージだと理解したと報告した。大きな方向性は解決しているが、ドラッグ移動の具体的な実装方法までは掘り下げられていない。

トップページオリジナルのバナーを表示させたいと考えております。

そのバナーはドラックすると任意の位置に動かせるようにしたいと考えているのですが

そのように動かせるブロックとしてオリジナルのセクションの追加をする場合

どこにどのような記載が必要でしょうか。

https://www.shopify.jp/blog/partner-shopify-theme-section-first-create

こちらを参照しましたが当方知識不足で理解が出来ませんでした。

宜しくお願い致します。

されたいことはお読みになった後半の動的セクションのことかと思いますが、これを理解するには、schemaとテーマエディタの知識が必要です。
https://shopify.dev/docs/themes/sections

基本的には、sectiionディレクトリにセクションファイルを作って、その中にschemaを定義し、そのセクションを読み込ませるファイル(indexやcollectionなど)にsection タグを入れることになります。

日本語で開設している動画もあるので、目次からテーマやセクションの部分だけを切り取って参照されるのも手かと思います。

https://www.youtube.com/watch?v=2zDFNS6r1aQ&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe

https://www.youtube.com/watch?v=xgPrMP48W-M&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe&index=3

ありがとうございました。

ご教授頂いた内容で、トライしてみました。

HTML/CSSと組み合わせてブロックを作り、それをはめ込んでいくイメージだとわかりました。

ありがとうございました。