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

**URL:** <https://community.shopify.com/t/topic/32207>\
**Category:** 技術的なQ＆A\
**Created:** [January 18, 2021, 5:27am UTC](https://community.shopify.com/t/topic/32207 "2021-01-18T05:27:34Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

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

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

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

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

<div class="post-metadata">

**Author:** ![t-art-web](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@t-art-web](https://community.shopify.com/u/t-art-web)\
**Post date:** [January 18, 2021, 5:27am UTC](https://community.shopify.com/t/topic/32207/1 "2021-01-18T05:27:34Z")

</div>

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

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

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

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

[https://www.shopify.jp/blog/partner-shopify-theme-section-first-create](https://www.shopify.jp/blog/partner-shopify-theme-section-first-create)

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

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [February 10, 2021, 2:51pm UTC](https://community.shopify.com/t/topic/32207/2 "2021-02-10T14:51:48Z")

</div>

されたいことはお読みになった後半の動的セクションのことかと思いますが、これを理解するには、schemaとテーマエディタの知識が必要です。  
[https://shopify.dev/docs/themes/sections](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=2zDFNS6r1aQ&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe)

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

---

<div class="post-metadata">

**Author:** ![t-art-web](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@t-art-web](https://community.shopify.com/u/t-art-web)\
**Post date:** [February 12, 2021, 1:04am UTC](https://community.shopify.com/t/topic/32207/3 "2021-02-12T01:04:14Z")

</div>

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

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

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

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