コレクションリストを複数作成する方法について

[memorica]

現在、食品配送サービスのECサイトを制作しております。

本サイトでは、様々なレストランの中から注文し、自宅まで届けてくれるサービスを提供しております。

複数のレストランがあるため、ページの構成を下記のようにしようとしています。

商品ページ：ある店舗のメニューの1つを商品とする

コレクションページ：ある店舗のメニューをまとめる

コレクションリスト：食の様式毎に店舗をまとめる(和食・洋食・中華)

無料テーマのSimpleを使用していますが、デフォルトではコレクションリストを1つしか作成できません。

どうすれば、コレクションリストを複数作成可能でしょうか？

ご教授いただけますと幸いです。

よろしくお願いいたします。

[loudminority]

簡単な手順ですが、ご参照下さい。

（Simpleのテンプレートではありませんが、多分共通と思われます。）

1. コレクションを作成する（和食・洋食・中華）＊コレクションの画像を追加しておく
2. メニューを作成する＞タイトル（ジャンル名等）＞メニュー項目にコレクションを追加する（和食・洋食・中華）
3. 右コラムの「ハンドル名」を入力（例：food-type）＞メニューを保存
4. ページを作成する＞タイトルとコンテンツを入力＞右コラムの「テンプレート」から「page.list-collections」を選択
5. 下の「検索結果のプレビュー」横の編集を開き、最下部「URLとハンドル」https:~~~.com/pages/ の後に先程の「ハンドル名（例：food-type）」を入力する。 [https:~~~.com/pages/food-type]となります。＞保存
6. コレクションリストのページが完成（メニューバーの項目にページとして追加可能です。）

例えで（和食・洋食・中華）としましたが、店舗別、メニュー別等にも応用できます。

他のテンプレートでもこの機能は付いていると思われますが、なければコードのTemplateにpage.list-collectionsのLiquidを追加すれば使用できます。

[memorica]

ご回答いただきありがとうございます！

言葉足らずで申し訳ないのですが、具体的には以下のようにして商品まで遷移したいです。

例：

1．メニューバーの項目の「和食」を押下

2．本ページには和食を取り扱う店舗名の一覧が記載されており、その中から1つの「店舗」を押下

3．本ページには2で選んだ店舗で取り扱う料理(商品)の一覧が記載されており、その中から1つの「料理(商品)」を押下

4．商品ページに遷移し、カートに入れることができる

ご回答いただいた下記について質問させてください。

>1. コレクションを作成する（和食・洋食・中華）＊コレクションの画像を追加しておく

上記の2.3を行うためにすでに店舗のコレクションを作成していますが、コレクションのコレクションは可能でしょうか？

(本サービスでは、複数の店舗を扱うため、和食のコレクションの中身は各店舗の料理ではなく店舗の一覧を表示したいです)

[loudminority · Accepted solution]

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

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

[shone256]

memorica様

loudminority様

別トピックを立てようとも思ったのですが、横から失礼致します。

私もまさに同様の階層構造を取りたく、loudminority様のコメント通りに作成したところ、無料テーマ『supply』で実装することができました。

ありがとうございます。

ただ私が実際に使用したいテーマは無料テーマの『Boundless』でして、こちらにはpage.list-collectionsのLiquidファイルがないためにそのままでは表示できませんでした。

そこでコメントにもありますように、新しくpage.list-collectionsを、supplyからコピーしてきて作成したのですが、『could not find 〇〇snippets.liquid～』の類のエラーが出まして、そのたびに該当のファイルをsupplyからコピーしてきたのですが…

最終的には画像やリンクはなんとか表示されたものの、『translation missing: ja.general.breadcrumbs.home ›』のエラーを吐き、デザインも崩れていて実用には耐えられない形でしか実装できませんでした。

普段利用しているのは専らWordpressでして、shopify自体を昨日はじめて触りliquidファイルもはじめて編集したため、検索エンジンやコミュニティ内の情報も探してみたのですが、解決策の糸口も見つけられませんでした。

大変恐縮ではございますが、『Boundless』でもエラー無く動く実装方法（正しく機能するpage.list-collectionsの作成方法？）のヒントだけでもご教示いただけないでしょうか。

何卒よろしくお願い致します。

[loudminority]

shone256様

テーマも有料・無料問わず色々試しましたが、どれも一長一短がありますね。

別のテーマのLiquidを追加したのが原因だと推測されます。

下記の方法でlist-collectionのLiquidを追加できます。

まずテーマのコードを開き、Templates下の「新しいtemplateを追加する」をクリックしてください。

すると、以下の画面が表示されますので、目的からlist-collectionを選択して下さい。

名前はpageで良いと思います。

page.list-collectionsのLiquidファイルが新規作成されました。

『Boundless』をインストールして確認しましたが、list-collectionは既に存在していました。

正直なところ、このテーマはオシャレ感満載ですが癖が強い印象です。（笑）

[shone256]

loudminority様

早速のご返信ありがとうございます。

今教えていただいた手順で作成したところ無事実装することができました！ありがとうございます！

page.list-collection.liquidの作り方を調べていたところ海外サイトに行き当たりそちらを参考にしたのですが、

そちらでは目的が『page』で名前のところが『list-collections』になっていまして

そちらで生成したファイルに別のテーマのコードをコピペして…という手順でやっていました…

https://jadepuma.com/blogs/blog/create-a-list-of-collections-page-in-your-shopify-store

そもそもliquidの規則がわかっていないのですが、目的でlist-collectionsを選べばよかったのですね…

ここで教えていただかなければ諦めていたと思いますので本当に助かりました。ありがとうございました。

※Boundlessは癖が強いのですね…デザイン的にクライアントの要望に近いのがこちらだったのですが再検討も必要そうですね…！

[loudminority]

shone256様

Shopifyのテーマ選びは悩みます。クライアントに提案する際に「どのような感じのサイトが良いですか？」と先に尋ねると自分の首を締めることに……

無料テーマでは物足りない感じがしますが、逆に有料テーマは多機能過ぎてカスタマイズに時間が掛かります。（日本語化されていない、インストール型アプリとの相性が悪い、サポートが英語等）デザイン重視は理解できますが、Shopifyの場合はバックエンド側から先に制作する方がうまく解決すると感じます。

[shone256]

loudminority様

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

一度実装できたとお話しておいて申し訳ございません。

教えていただいた手順でページを作成したところ、ひとつめのページ『例）中華』は正常に機能しているのですが、ふたつめ『例）肉料理』を追加したところ、中華のページを開いても肉料理のページを開いても、中華も肉も全ての店舗が表示されるという状況に陥ってしまいました…

ちなみに使用テーマは『Boundless』でして、『Supply』に切り替えたところそれぞれのページが独立して機能していたため、Boundless固有の問題だと思うのですが…

こちら何か解決策等ございますでしょうか？調べても皆目見当がつかず…

どうしても難しそうであれば別テーマを採用することも考えているのですが、できればこのままBoundlessを使用したく思っておりますため、アドバイスいただけないでしょうか。

何卒よろしくお願い致します。

[loudminority]

memorica様とshone256様は同一人物なのでしょうか？

話がごちゃごちゃになりますが、こちらはコレクションリストページの作成方法を記述したまでで、そちらの使っているテーマまでは対応しきれません。

ご了承下さい。（テーマのリファレンス等をお調べ下さい。）

[memorica]

 To loudminority様

同一人物ではありません。

色々とご教授いただきありがとうございました。

お礼及びベストソリューションとしての承認が遅くなり申し訳ございません。

To shone256様

私もBoundlessについては対応できないため、別途質問していただくのが良いかと思います。

もし、すでに質問されていらっしゃいましたらすみません。

[memorica]

loudminority様

ご回答いただきありがとうございました！

私もSupplyを用いて、実装することが出来ました。

大変参考になりました。ありがとうございます。