# 自作テーマの動的セクションの追加について

**URL:** <https://community.shopify.com/t/topic/208591>\
**Category:** 技術的なQ＆A\
**Created:** [April 15, 2023, 4:43pm UTC](https://community.shopify.com/t/topic/208591 "2023-04-15T16:43:06Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Shopify初心者が自作テーマで動的セクションの追加機能を実装しようとしている。

**問題点:**
- liquidファイルにセクションタグで固定配置はできるが、「セクションを追加」ボタンが表示されず動的追加ができない
- 既存テーマ(Debut)では実現できているが、自作テーマでは実装方法が不明
- Schemaは定義済みで、presetsの設定が必要かどうか疑問を持っている

**解決策:**
回答者が`index.json`にセクションを記載することで初期配置セクションとして設定できると提案。Dawnテーマの`index.json`を参考にするよう助言。

**結果:**
- 質問者はDawnテーマで動的セクション追加を確認でき、JSONテンプレートについて学習できた
- 追加質問として、オリジナルテーマ作成時にブランクテーマではなく既存テーマ(Dawn等)をベースにカスタマイズする方が一般的か、またLiquidテンプレートよりJSONテンプレートが推奨されるのか確認
- 回答者は要件次第だが、OS2.0以降はJSONがデフォルトと説明
- 質問者は既存テーマベースのカスタマイズを検討することで解決

<div class="post-metadata">

**Author:** ![ogawashinya](https://avatars.discourse-cdn.com/v4/letter/o/b3f665/32.png) [@ogawashinya](https://community.shopify.com/u/ogawashinya)\
**Post date:** [April 15, 2023, 4:43pm UTC](https://community.shopify.com/t/topic/208591/1 "2023-04-15T16:43:06Z")

</div>

Shopifyの経験は浅いのですが、自作テーマを制作しています。

どなたか詳しい方、知恵をお貸しいただけないでしょうか。

・実現したいこと

作成したセクションをトップページで動的に追加できるようにしたい

・現状の問題

テンプレートのliquidファイル内にセクションタグを使って固定であればセクションを配置することはできるものの、「セクションを追加」というボタンが表示がない状態で動的に追加できない。

Schemaは下記のように定義しており、上記のように固定であればセクションを使うことができています。ちなみに、自作テーマではなく、既存テーマ（Debut）であればやりたいことが実現できている状況です。

```auto
{% schema %}
{
  "name": "繰り返しコンテンツ",
  "settings": [],
  "blocks": [
    {
      "type": "repeat-content",
      "name": "繰り返しコンテンツ",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "コンテンツタイトル"
        }, {
          "type": "richtext",
          "id": "body",
          "label": "コンテンツ本文"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "繰り返しコンテンツ"
    }
  ]
}
{% endschema %}

```

上記のpresetsの項目で指定があれば、「セクションを追加する」ボタンから選択肢として項目が表示され、セクションを挿入することができるのかなと思っていたのですが、実装方法に誤りがあるのか、そもそも別の設定が必要になるのでしょうか？

恐れ入りますがご教授いただけますと幸いです。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [April 20, 2023, 3:31am UTC](https://community.shopify.com/t/topic/208591/2 "2023-04-20T03:31:30Z")

</div>

> 「セクションを追加」というボタンが表示がない状態で動的に追加できない。

上記は以下の意味であっていますでしょうか？

- 該当のセクションを初期配置のセクションとして設定したい

あっている場合、index.jsonにセクションを記載すれば実現可能だと思います。

Dawnなどのテーマのデフォルトのindex.jsonなどを見れば初期設定セクションの記載が確認できますので、そちらを参考に追加するとよいと思います。

[https://github.com/Shopify/dawn/blob/main/templates/index.json](https://github.com/Shopify/dawn/blob/main/templates/index.json)

以上ですが、理解が間違っている場合は申し訳ありません。

---

<div class="post-metadata">

**Author:** ![ogawashinya](https://avatars.discourse-cdn.com/v4/letter/o/b3f665/32.png) [@ogawashinya](https://community.shopify.com/u/ogawashinya)\
**Post date:** [April 26, 2023, 5:24pm UTC](https://community.shopify.com/t/topic/208591/3 "2023-04-26T17:24:23Z")

</div>

ご返信が遅くなりまして申し訳ございません、ご教授いただきありがとうございます。

実際に「Dawn」のテーマで動的セクションが追加されるのを確認できました。JSONテンプレートの方はあまり詳しくなく、今回色々と触ってみて勉強になりました。ありがとうございました。

返信ついでの質問で大変恐縮なのですが、やはりオリジナルでテーマの作成する際には、Theme Kitのnewコマンドで新規作成できるブランクテーマではなく、Dawnなどの既存テーマからカスタマイズしていくのが一般的なのでしょうか？（そもそもLiquidテンプレートではなくJSONテンプレートの方が良い？）

独自のデザインであれば上記のブランクテーマの方が進めやすそうということで、色々と触っていたのですが、動的セクションの部分がいまいち思ったようにならず、、既存テーマをベースにしたものであれば想定していることが実現でき、情報を探してみても既存テーマベースのものがほとんどだったので、実際にはどのように作成されているのかなと思いまして。

恐れ入りますがご確認いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [April 27, 2023, 1:02pm UTC](https://community.shopify.com/t/topic/208591/4 "2023-04-27T13:02:24Z")

</div>

> オリジナルでテーマの作成

要件次第だと思います。

例えば、Dawnテーマ内蔵機能で問題はなくカスタマイズで対応できるならDawnテーマを使います。

Dawn含め既存テーマのカスタマイズで要件を満たせない場合はオリジナルでの作成が視野に入ります。

> そもそもLiquidテンプレートではなくJSONテンプレートの方が良い？

OS2.0以降はJSONがデフォルトだと思うので悩む場面はあまり思い浮かびませんが、こちらも要件次第だと思います。

---

<div class="post-metadata">

**Author:** ![ogawashinya](https://avatars.discourse-cdn.com/v4/letter/o/b3f665/32.png) [@ogawashinya](https://community.shopify.com/u/ogawashinya)\
**Post date:** [May 7, 2023, 5:34pm UTC](https://community.shopify.com/t/topic/208591/5 "2023-05-07T17:34:53Z")

</div>

ご返信が遅くなり申し訳ございません、ご回答ありがとうございました、なるほどですねやはりまずは既存テーマをベースにカスタマイズを検討するイメージですね、参考にさせていただきます。ありがとうございました。