ページを使用してコレクションリストを複数作成する方法について

日本語 ディスカッション 技術的なQ＆A
1

皆様お世話になっております。

当方コードに関しては素人なため、何卒教えていただきたくお願いしたいのですが、
下記ショッピファイのやり取りのURLを参照に、指定のページに選択したコレクションだけを表示する方法を
試したのですが、一向に出来ません。その為、ご教授頂けますと幸いでございます。

https://community.shopify.com/post/736860

テーマ：有料のEmpire
テーマの業者に連絡をとったか：既にコンタクトをしているが、良い案が帰ってこない、有料のアプリを使用してくれと。
サイトの詳細：全国の障害者施設の商品を取りまとめて販売するため、メインメニューに別々に製品別一覧と施設別一覧を作成したい。
出来ずにつまずいている所：テンプレートは上記URLのように作れます。ただし、新しいテンプレートを追加で、目的をPageにするのかList-collectionsにするのかがいまいち分かりません。
目的をPageにした場合のみ、ページで選択するテンプレートで選ぶことが出来ます。

テンプレートの追加画面
テンプレートの追加画面1522×793 74.2 KB

それ以降は、”成功 これはベストソリューションです”と記載されている内容の、下記部分を真似してやっていますが、一向に成功しません。

整理するとコレクションとコレクションリストページで対応できそうです。

  1. 「店舗別の料理」コレクションを複数作成します。商品管理＞コレクション（例：くら寿司、吉野家、天下一品）

これで「店舗別の料理」コレクションが作成されました。次に複数の「店舗別の料理」を「和食店舗一覧」として纏めます。

  1. メニューを新規作成します。オンラインストア＞メニュー（メインメニューではなく新規のメニュー）
  2. タイトル「和食店舗一覧」と入力。メニュー項目に「店舗別の料理」（くら寿司・吉野家・天下一品）のコレクションを追加
  3. ハンドル名「japanese-shop」と入力して保存（前記述の3）

これで和食を取り扱う店舗のコレクションを「和食店舗一覧」として纏めました。次にこのコレクションリストページを作成します。手順は前記述の4~5です。

  1. オンラインストア＞ページからをページを追加する
  2. タイトル「和食の店舗」とコンテンツを入力＞右コラムの「テンプレート」のプルダウンから「page.list-collections」を選択
  3. 下の「検索結果のプレビュー」横の編集を開き、最下部「URLとハンドル」https:~.com/pages/ の後に先程の「ハンドル名（例：japanese-shop）」を入力する。 [https:~.com/pages/japanese-shop]となります。＞保存

これで「和食の店舗」のコレクションリストページが完成しました。コンテンツの下に「和食店舗一覧」のメニュー項目（「くら寿司」「吉野家」「天下一品」）のコレクションが表示されます。

あくまでこれはページです。（コレクションではありません。）同じ要領で「洋食の店舗」「中華の店舗」等のページを作成しましょう。

最後に**メニューバー（メインメニュー）**を編集します。

  1. オンラインストア＞メニューからメインメニューを選択
  2. 最下部のメニュー項目を追加をクリックし、名に「和食」リンクにページ「和食の店舗」を選択
  3. 並び替え、階層等を確認してメニューを保存

解釈が正しければこの方法で解決すると思われます。メインメニューは3階層（親・子・孫）まで設置できますので、ページを配置すれば細かく分類できると思います。最初はカテゴリーの仕組みを理解するのに時間が掛かりましたが、ポイントはメニューリストの使い方だと感じます。画面に表示されるメインメニューやフッターメニューとは別にコレクションを纏めるためのメニューを作成できるところです。

どなたか、良い知恵をお貸し下さい。
よろしくお願い致します。

2

Liquidをあまり把握されておられない場合、HTMLとCSSのスキルは必要ですが以下の方法が簡易に実現できるかなと思います。

  • 管理画面のページ投稿画面のコンテンツ入力欄を利用
  • HTMLとCSSで表示したいコレクション用のタイトルや画像を記述して組み上げ、それぞのコレクションに向けてリンクを設定する
  • 画像は「ファイル」に入れてURLをコピーして用いる方法も可能

全て手動で行うので運用や構築に多少手間がかかりますが、Liquidは使わないため作業自体は簡易なものになります。
もちろんHTMLとCSSでレイアウトが組める前提ではありますが。

Liquidで作成したい場合は、おそらく以下が公式のページになると思います。
ただしこれはShopify製の無料テーマが対象なので、class名の変更やCSSの調整などを行わないとレイアウトは整わないと思われます。

https://shopify.dev/tutorials/feature-a-subset-of-collections-on-a-page

※上記以外の方法でも構築は可能ですので唯一の方法ということではありません。

HTMLとCSSで組めない、あるいは公式のサンプルを参考にしても実現できないという場合は、さらに学ばれるか業者に依頼されることをお勧めします。

3

Debutテーマでの検証ですが、pageテンプレートを新しく作り、
その中に指定したいコレクションのハンドルを指定してあげると意図した形になるのではないでしょうか。

{%- assign collection = collections['food'] -%}
{% include 'collection-grid-item', collection: collection %}

{%- assign collection = collections['ichiran'] -%}
{% include 'collection-grid-item', collection: collection %}