Shopifyでコレクションの一覧ページを作成する

この記事の内容

Shopifyですべてのコレクションをまとめて一覧表示する方法を解説します。
最後に、おまけ で、表示するコレクションを選ぶ方法も解説しています。

完成イメージ

すべてのコレクションをまとめて一覧表示する（流れ）

• テンプレートを作成
• 作成したテンプレートを用いてページを作成
• ページへの導線を設定

すべてのコレクションをまとめて一覧表示する（詳細）

テンプレートを作成

管理画面、左側サイドバーの「販売チャネル」から「オンラインショップ」をクリック

テーマ > ライブテーマ > 「アクション」から「コードを編集する」を選択

/Templatesフォルダ内の「新しいtemplate」をクリック

目的：「Page」を選択、「名前」に適宜ファイル名を設定（この記事ではcollectionsとします）

作成されたファイル(page.collections.liquid)を編集

page.collections.liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            <li class="grid__item small--one-half medium-up--one-quarter">
              {% include 'collection-grid-item', collection: collection %}
            </li>
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>

これでテンプレートが作成できました。

作成されたテンプレートを用いてページを作成

• 販売チャネル > オンラインショップ > ページ に移動して「ページを追加」をクリック
• Titleを設定（この記事では「すべてのコレクション」とします。）
• テンプレートからpage.collectionsを選択

これでコレクションの一覧ページが作成できました。

ページへの導線を設定

あとはメニューに導線を追加するなどして完成です。
説明は割愛します。

おまけ

表示するコレクションを管理者が選択できるようにする

テンプレートを以下のようにすれば、表示するコレクションを選ぶことができます。

page.collections.liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {%- assign collection_titles_base = '表示したいコレクションのタイトル1,その2,その3,その4' -%}
      {%- assign collection_titles = collection_titles_base | split: "," -%}

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            {% if collection_titles contains collection.title %}
              <li class="grid__item small--one-half medium-up--one-quarter">
                {% include 'collection-grid-item', collection: collection %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>

8行目は、表示したいコレクションのタイトルを,で区切って書いてください。

liquidファイルでは配列を宣言できないので、このように一手間かけて実装する必要がありました。

ここでは、表示したいコレクションのタイトルをハードコーディングしていますが、
ページ作成画面の「コンテンツ」属性を用いて、動的にコレクションを選ぶこともできます。

表示するコレクションを動的に選ぶ

ページ作成画面の「コンテンツ」欄と、テンプレートを、以下のようにします。

「コンテンツ」欄

ページ設定画面の「コンテンツ」欄に、表示したいコレクションのタイトルを,で区切って書いてください。

テンプレート

page.collections.liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {%- assign collection_titles = page.content | split: "," -%}

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            {%- assign collection_title = collection.title | escape -%}
            {% if collection_titles contains collection_title %}
              <li class="grid__item small--one-half medium-up--one-quarter">
                {% include 'collection-grid-item', collection: collection %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>

13行目で collection.title を escape したのは、
コンテンツ欄はhtmlとして認識されるため、コレクションのタイトルに特殊文字が入っていると
エスケープされるためです。

おわりに

この記事が少しでもいいなと思ったらLGTMやストックよろしくお願いします。
質問があればコメントしてください。

Ciimaオンラインアートショップ ではShopifyを利用してアート作品の販売を行っています。
そちらもチェックしていただけると嬉しいです。

参考URL