# 動的に設定したSectionを他ページにも同じ設定で追加したい

**URL:** <https://community.shopify.com/t/section/246263>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, html\
**Created:** [August 31, 2023, 1:49pm UTC](https://community.shopify.com/t/section/246263 "2023-08-31T13:49:45Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

**課題:**  
Dawnテーマを使用し、Homeページで動的に設定したSection（blocksで複数のCollectionを設定）を、ProductsやCollectionsなど他のページにも同じ設定で追加したい。現状では各ページで同じ作業を繰り返す必要があり、手間がかかっている。

**試した方法:**  
1. **settings_schema.json** - blocksやrepeaterが非対応で断念  
2. **theme.liquidにSection追加** - メインコンテンツ（{{ content_for_layout }}）内に配置できず  
3. **JavaScriptのappendChild()で移動** - 意図通り動作したが、HTMLエラーが発生

**解決策（Takase_Rより）:**  
- `common.json`ファイルを作成し、`theme.liquid`で`{% sections 'common' %}`として読み込む  
- `common_target.liquid`を作成し、各ページのテンプレートに配置  
- **重要:** JavaScriptの実行タイミングを`window.addEventListener('load', function(){})`で調整することでHTMLエラーを回避

**その他の提案:**  
メタオブジェクトを使用する方法も提案されたが、質問者はテーマ編集内での実装を希望。最終的にTakase_Rの方法で解決し、質問者は感謝を表明。

<div class="post-metadata">

**Author:** ![KidoYuta](https://avatars.discourse-cdn.com/v4/letter/k/c67d28/32.png) [@KidoYuta](https://community.shopify.com/u/KidoYuta)\
**Post date:** [August 31, 2023, 1:49pm UTC](https://community.shopify.com/t/section/246263/1 "2023-08-31T13:49:45Z")

</div>

まずやりたいこととしては、

Homeページなどで動的に設定したSectionを、他のProductsやCollectionsといったページでも設定を保持したままSectionを追加したいというものです。

Dawnテーマを使用して、Sectionはblocksで複数のCollectionを設定できるようにしています。

このCollectionを複数設定するSectionは他のProductsやCollectionsといったページでも同じ設定をするため、Collectionを設定する同じ作業がページ分繰り返すことになってしまい、手間になってしまいます。

この手間を解消するために、１箇所でCollectionを設定して他のページでもそれが自動で反映されるような仕組みを作りたいと思ってました。

そのために試したものが、以下になります。

**1. settings\_schema.json からCollectionを追加する**

settingsからであれば各ページから参照できると思いましたが、typeの blocks や repeater が対応していないため、これはできませんでした。

**2. theme.liquid にSectionを設定する**

Layoutであるtheme.liquidにCollectionを設定するSectionを追加することで設定を一つにはまとめることはできましたが、メインコンテンツである {{ content\_for\_layout }} の中の構造には入れ込むことができなかったので、これも残念してます。

**3. 2.の方法をjsのappendChild()で任意の場所へ無理やり移動**

2.の方法ではメインコンテンツの中に入れ込むことができませんでしたが、jsのappendChild()を使って移動させる方法を試みました。

Layoutに追加したCollectionを設定するのSectionを querySelector() などで要素ノード取得します。わかりやすく、ここで取得したSectionを S1 とします。

S1を任意の場所へ移動させる先となるSectionを用意します。これはTemplatesのSectionで、これも同様に querySelector() などで要素ノードを取得します。これは S2 とします。

Layoutで設定した S1 を、Templatesでメインコンテンツ内の任意の場所に置くための S2 に置くために S2.appendChild(S1); で移動させてみました。

図のような感じで実装を試みてみました。

 ![img-01.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/b/1b6c13a00dd6b7f340eedb5c99e738d42d0ca6dd.jpeg)

S1はtheme.liquidに以下のようなコードを追記しています。

```markup
{%- if template == 'index' or template == 'collection' or template == 'product' -%} // Homepage,Collections,Productsだけ処理
   // Collection-S1
    {% section 'collection-list' %} // Collectionをblocksで設定するSection
  

{%- endif -%}

```

S2のSectionはcollection-s2.liquidとして以下のようなコードにしています。

```markup

```

この3.の方法は意外とうまく処理はしてくれていました。

意図した処理にはなったものの、以下のHTMLエラーの判定に引っかかってしまいました。

```auto
HTML error found
Broken HTML has been detected in your theme's sections/collection-list-to.liquid file. Check that there are no missing or extra HTML tags present.
If you haven't made changes to this code, contact support for help resolving the issue.

```

エラーは出ているものの通常通り動いてはくれていますが、このエラーをなんとか消したいと思っています。

上記試した方法以外で何か妙案があればご教授いただけたら幸いです。

Homeページなどで１箇所で動的に設定したSectionを、他のProductsやCollectionsといったページでも設定を保持したままSectionを追加するにはどのような方法がありますでしょうか。

---

<div class="post-metadata">

**Author:** ![Takase\_R](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takase_r/32/295219_2.png) [@Takase\_R](https://community.shopify.com/u/Takase_R)\
**Post date:** [September 1, 2023, 9:15am UTC](https://community.shopify.com/t/section/246263/2 "2023-09-01T09:15:21Z")

</div>

はじめまして、Takaseと申します。

こちら気になったので自分の仮環境で試してみました。

試したテーマはdawnでバージョンは11.0.0になります。

1. セクションファイルにcommon.jsonファイルを作成

2. theme.liquidの任意の箇所でcommon.jsonとそれを囲む要素を記述

```markup

      {% sections 'common' %}
    

```

1. セクションファイルにcommon\_target.liquidを作成

```markup

{% schema %}
{
"name": "共通パーツ移動先セクション",
"settings": [
],
"presets": [{
  "name": "共通パーツ移動先セクション"
}]
}
{% endschema %}

```

4.common\_target.liquidをコレクションページのテンプレートなどに設置

上記で試してみたところ、自分の環境ではHTMLエラーは出ずに今回やりたいことを実現できました。

window.addEventListener(‘load’, function () {}); を外してみたところHTMLエラーがでたので、javascriptの読み込みタイミングが影響してエラーが出ていたようです。

※上記のコードだと、共通セクションはどのページにも表示されてしまうので

{%- if template == ‘index’ or template == ‘collection’ or template == ‘product’ -%}

{%- endif -%}

などで適宜調整は必要かと思います。

---

<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:** [September 1, 2023, 9:41am UTC](https://community.shopify.com/t/section/246263/3 "2023-09-01T09:41:00Z")

</div>

liquidの読み書きが可能なのであれば以下の方法が検討できるかなと思います。

1. 該当のコレクション用のセクションを複製
2. 複製したセクション内でコレクションを設定する箇所を探し、メタオブジェクトを使う形に書き換える
3. 複製したセクションを配置

以上ですが、趣旨を勘違いしていましたら申し訳ありません。

---

<div class="post-metadata">

**Author:** ![KidoYuta](https://avatars.discourse-cdn.com/v4/letter/k/c67d28/32.png) [@KidoYuta](https://community.shopify.com/u/KidoYuta)\
**Post date:** [September 1, 2023, 10:17am UTC](https://community.shopify.com/t/section/246263/4 "2023-09-01T10:17:45Z")

</div>

検証いただきありがとうございます。

処理順番に関しては検証抜けておりました…

こちら記載いただいた通りに load してから実行したところ、確かにエラーは出なくなることを確認しました。

行き詰まっておりましたので助かりました。

ありがとうございます。

※の指摘もありがとうございます。

こちら検証のところでまだDefaultでしか運用をしていなかったのでこのようにしておりました。

内容に合わせて適宜調整したいと思います。

---

<div class="post-metadata">

**Author:** ![KidoYuta](https://avatars.discourse-cdn.com/v4/letter/k/c67d28/32.png) [@KidoYuta](https://community.shopify.com/u/KidoYuta)\
**Post date:** [September 1, 2023, 10:23am UTC](https://community.shopify.com/t/section/246263/5 "2023-09-01T10:23:45Z")

</div>

ありがとうございます。

できればテーマ編集内で実装したいところでしたので、メタオブジェクトを使用するのは想定しておりませんでした。

しかし、そのようなやり方もあるという気づきにもなりました。

ご教授いただきありがとうございます。