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

**URL:** <https://community.shopify.com/t/topic/46340>\
**Category:** 技術的なQ＆A\
**Created:** [May 12, 2021, 3:33pm UTC](https://community.shopify.com/t/topic/46340 "2021-05-12T15:33:56Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Shopifyの有料テーマ「Empire」で、特定ページに選択したコレクションだけを表示し、商品別一覧と施設別一覧のように複数の一覧ページを作りたいという相談です。争点は、新規テンプレートを「Page」にするか「List-collections」にするか、また紹介された手順どおりに設定しても動かない点でした。

回答は2方向に分かれました。
- 手軽な方法: ページ本文にHTML/CSSでコレクション画像やタイトルを手動配置し、各コレクションへリンクする方法。Liquid不要ですが、更新作業は手動です。
- Liquidを使う方法: 公式チュートリアルを参考にする案と、`page`テンプレートを新規作成し、コレクションのハンドルを直接指定して表示する案が提示されました。後者では `collections['food']` のようにハンドル指定し、コレクション表示用スニペットを読み込むコード例が示されています。

無料テーマ向けの公式例は有料テーマではCSSやclass調整が必要とされ、完全な解決には至っていません。結論としては、手動実装・Liquid調整・業者依頼のいずれかが現実的、という状態です。

<div class="post-metadata">

**Author:** ![Anonymous\_bf908e7bd8b45bcd37b44b96a5d1c803](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@Anonymous\_bf908e7bd8b45bcd37b44b96a5d1c803](https://community.shopify.com/u/Anonymous_bf908e7bd8b45bcd37b44b96a5d1c803)\
**Post date:** [May 12, 2021, 3:33pm UTC](https://community.shopify.com/t/topic/46340/1 "2021-05-12T15:33:56Z")

</div>

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

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

[https://community.shopify.com/post/736860](https://community.shopify.com/post/736860)

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

 ![テンプレートの追加画面](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/c/0c7b462ebcfe29f50b11d019ce194a2176d18a69.png)

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

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

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

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

---

<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:** [May 30, 2021, 12:35pm UTC](https://community.shopify.com/t/topic/46340/2 "2021-05-30T12:35:13Z")

</div>

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](https://shopify.dev/tutorials/feature-a-subset-of-collections-on-a-page)

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

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

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [May 31, 2021, 1:06am UTC](https://community.shopify.com/t/topic/46340/3 "2021-05-31T01:06:55Z")

</div>

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

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

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

```