オンラインストアのページに商品情報を動的に表示させたい

[store_group]

オンラインストアのページに商品情報を動的に表示させたいです。

管理画面のオンラインストア > ページ > ページを追加 で新しいページを作成します。コンテンツ内に特集ページのようなものを作成していきます。その中にオンラインストアで扱っている商品の情報を表示させたいです。

その商品の情報はオンラインストアに登録している商品名や商品詳細情報や価格などを表示したく、ボタンを設置して商品情報画面に遷移できるようにしたいです。その際に商品情報が変更になってもページのコンテンツを直すことなく動的に反映されるようにしたいです。

[福水正太]

はじめまして。

株式会社ファイブビットの福水と申します。

やりたいことは、コードの追加なしで実装できるかと思います。

今回は、dawnというテーマを参考に紹介させていただきます。

手順としては、

1. ページに表示させたい商品のコレクションを作成する
2. 特集ページ専用のテンプレートを管理画面より作成~コレクションを設定
3. 特集ページの管理画面から、2で作成したテンプレートを設定する

となります。以下、各工程の詳細です。

ページに表示させたい商品のコレクションを作成する

＝管理画面「商品」→「コレクション」から、今回表示させたい商品が含まれているコレクションを作成します。操作の流れは、下記動画にまとめているので、ご参照ください。

動画：https://gyazo.com/b937ec336b3b3954ed1738824af85e62

特集ページ専用のテンプレートを管理画面より作成~コレクションを設定

＝管理画面「オンラインストア」→「テーマ」→作成したいテーマの「カスタマイズ」→テーマカスタマイズ画面上のプルダウンから「ページ」を選択→新しくページ用のテンプレートを作成→1で作成したコレクションを表示するセクションを設定します。こちらも、動画にまとめているので、ご参照ください。

動画：https://gyazo.com/939d499b5c667cf7adbfc806f691274e

※dawn以外のほぼ全てのテーマにも、同じようなセクションがあります

※テンプレート名は英字の小文字で設定しましょう

特集ページの管理画面から、2で作成したテンプレートを設定する

＝管理画面「オンラインストア」→「ページ」→該当のページの詳細に遷移し画面右下の「テンプレート」から、先ほど2で作成したテンプレートを設定し保存します。

動画：https://gyazo.com/bd58d5a1ea7c01fe2cc8259cf7f3dd59

以上で、操作は完了です。

商品以外にも、画像やテキストなどをテーマカスタマイズ画面で良い感じに設定できるので、より特集ページっぽいページデザインができるようになる点もメリットかなと思います。

もし、意図した挙動にならないときは、可能な限り具体的な内容と画面のスクショや動画などをご提示いただけると非常に嬉しいです。

[store_group]

ご丁寧に教えていただきありがとうございます。

2番のページを選択してテンプレートを登録するボタンが表示されなかったので、自分が管理しているshopifyの設定でGUIから変更ができなくなっているのかな？と推測です。
こちらはコードを修正することで対応ができそうと思いました。

追加で質問なのですが、

3番でページの画面でテーマテンプレートを選択した場合、コンテンツ部分に記載したものとテーマテンプレートにあるコレクションとはどのようなレイアウトで表示されるのでしょうか？それもテーマテンプレート作成時に指定することが出来るのでしょうか？それともコンテンツ部分にHTMLを書いても適応されないのでしょうか？

[福水正太 · Accepted solution]

----------------------------------------

3番でページの画面でテーマテンプレートを選択した場合、コンテンツ部分に記載したものとテーマテンプレートにあるコレクションとはどのようなレイアウトで表示されるのでしょうか？それもテーマテンプレート作成時に指定することが出来るのでしょうか？それともコンテンツ部分にHTMLを書いても適応されないのでしょうか？

----------------------------------------

テーマによって微妙に違いますが、基本的に下記動画のように、もともとページテンプレートに設定されていたセクションから、コンテンツ部分に入力したコンテンツは出力されます。

https://gyazo.com/63fbfa8cda961eed4400590ddfbb645c

なので、コンテンツ部分にHTMLを書いてもいいですし、セクションだけでレイアウトしてもいいと思います。