セクションの使い回しについて

[t-art-web]

こんにちは。

ご相談させてください。

現在商品ごとに商品ページの外観を変えたいとのご相談を受けています。

これだけですとproductのテンプレートを作成すればいいのですが、商品が100点あった場合に

100通りの外観（見た目は一緒なのですが、動的にマーチャントがカスタマイズよりおすすめポイントのテキストや写真を商品ごとに書き換えができるようにしたい）

を実現したい場合、1つのセクションで作ってしまうと、カスタマイズでセクションの内容を変更すると全ての内容も書き換わってしまうと思います。

商品ごとに一つのセクションを作成するしか方法はないのでしょうか？

そうするとデザインの変更があった場合、全てのセクションの書き換えをしなくては

ならないため、非常にメンテナンスに手間がかかってしまいます。

解決方法があればご教授願います。

宜しくお願い致します。

[Yuya_M]

Hello.

It's a reusable section, but is the theme such as Debut?

If so, the insertion into the product page etc. is a static rendering using the {{section'○○○'}} (○○○ .liquid section file) tag inside the product.liquid file. It seems that.

In the case of static rendering, changing the section settings seems to rewrite everything to the same content as you said. Below is a description of the official documentation.

You can include a statically-rendered section in multiple theme files. However, only one instance of the section exists. If you change section settings in one location, then the change will be applied to all locations where the section is rendered.

( https://shopify.dev/themes/architecture/sections )

With dynamic rendering (sections can be freely swapped on the theme customizer), multiple settings can be made for the same type of section, but with a theme such as Debut, it is dynamic only on the homepage (index). It is a specification that can not be rendered properly.

However, on Shopify's new specs and new theme "Dawn" last month, you can now dynamically place sections on all pages, including product pages.

(You can create as many product page templates as you like for each product.)

So I think it's a good idea to try the new theme Dawn.

https://www.shopify.jp/blog/unite-2021

Currently, the Dawn theme is only in the development store, but I've heard that it will soon be available in the free theme store on the merchant's page.

[Yuya_M · Accepted solution]

こんにちは。

セクションの使いまわしですが、テーマはDebutなどでしょうか？

もしそうであれば、プロダクトページなどへの挿入は product.liquidファイルの中に{{ section ‘○○○’}} (○○○.liquidのセクションファイル)のタグを使った静的なレンダリングだと思われます。

静的レンダリングの場合、セクションのセッティングを変えると、おっしゃるようにすべて同じ内容に書き換わってしまうようです。下記は公式ドキュメントの説明です。

You can include a statically-rendered section in multiple theme files. However, only one instance of the section exists. If you change section settings in one location, then the change will be applied to all locations where the section is rendered.

(https://shopify.dev/themes/architecture/sections)

動的なレンダリング(テーマカスタマイザー上で自由にセクションの入れ替えなどができる)だと同じ種類のセクションでも複数の設定が行えるのですが、Debutなどのテーマだとホームページ(index)のみでしか動的なレンダリングが行えない仕様になっています。

1つ目の解決策

ただ、先月Shopifyが新しく発表した仕様と新しいテーマ『Dawn』上だとプロダクトページを含む全てのページでセクションを動的に配置できるようになりました。

(好きなだけ商品ごとに合わせたプロダクトページテンプレートを作れる。)

ですので新しいテーマDawnを試してみるのが良いかと思われます。

https://www.shopify.jp/blog/unite-2021

今現在、Dawnテーマは開発ストアのみですが、近々マーチャントのページ上の無料テーマストアでもインストールできるとようになる聞いています。

2つ目の解決策

これまでのテーマを使用したい場合だと、商品の説明欄を分割して、分割した説明欄を利用して商品ごとにテキストや画像を変えるという方法があります。

どのくらいの規模のオンラインストアかわかりませんが、100個以上プロダクトテンプレートを作るのは現実的ではないかもなので、こちらの方法が良いかもしれません。

プロダクトliquidに

{% assign productDescription = product.description | split:”-split-“%}

を挿入。

商品説明欄に splitと入力すれば商品説明が二分割される。

(キーワードの-split-あくまで例でなんでも良い。)

-split-より前の商品は  {{ productDescription | first }}

-split-より後の商品は  {{ productDescription | last}}

プロダクトliquidにて 通常の{{ productDescription}}を {{productDescription | first}}に差し替え、

{{productDescription | last}}をお好きなところに入れたら

商品説明欄にて商品ごとに商品説明とは別に追加してテキスト、画像を入れることができます。

商品のスペックテーブルなんかを通常の商品説明とは、別のところに表示させたいときなどにも使えます。

(*同じく先月発表された新しい仕様だとマーチャント側で自分で新しいメタフィールドを好きに作成することができるようになり、このようにliquid側で分割処理などしなくても楽にできるようになるみたいですがマーチャント側のカスタマイザーで表示させるには新しいテーマDawnが必要かもしれません。)

お役に立てば幸いです。

(なぜか返信投稿がはじかれて、その後、コミュニティ管理側から承認が降りたみたいですが、なぜか英語に自動翻訳？されてしまっているようなので再投稿(^^;)