[Shopify]Liquidで特定のコレクション内の商品情報を取得する方法

今回紹介するのは特定のコレクション内の商品をLiquidを使用して取得する方法です。

一般的にはコレクションページ（URL → /collections/〇〇）で使われるのが一般的ですが、例えば固定ページ内でコレクション商品を表示したい時にも使用できるメジャーな方法です。

例えばクリスマス用に用意したランディングページに、クリスマスコレクション内の商品を表示させたい場合や、商品詳細ページの下部におすすめコレクションを表示したい！といった場合も活用することができます。

コレクションページ内で商品を取得する方法

まず最初にコレクションページ（URL → /collections/〇〇）内で商品を取得する方法です。コレクション内で商品情報はとてもシンプルで、既にテンプレートにも記載されているはずですが、念のため。

こんな感じになります。

{% for product in collection.products %}
    <p>{{product.title}}</p>
{% endfor %}

collection内のproductsを取得して各productを出力しています。上記のコードだと商品タイトルをpタグで表示しています。

その他にも

• 商品画像→ {{ product.featured_img | img_url }}
• 商品URL→ {{ product.url }}
• 商品タグ→ {{ product.tags }}
• 商品価格→ {{ product.price }}

など商品オブジェクトの要素を取得することが可能になっています。

またこの

{% for product in collection.products %}

というのは、50商品でページ区切りされる仕様になっているので50商品以上を取得したい場合は

{% paginate collection.products by 100 %}
    {% for product in collection.products %}
        <p>{{product.title}}</p>
    {% endfor %}
{% endpaginate %}

のようにページネーションで取得上限を外してあげる必要があります。（ただこの方法はShopifyのOnline Store 2.0対応テーマには適用できない場合があるためご注意ください。）

固定ページや商品詳細ページなどShopifyストア内の好きな場所で商品を取得する方法

次に固定ページ（URL → /pages/〇〇）や商品詳細ページ（URL → /products/〇〇）でコレクション商品を取得したい場合の処理です。

コレクション内で表示するときは先ほども記載した

{% product in collection.products %}

とコレクション内（collection）の商品（products）を取得することができました。しかし、固定ページや商品詳細ページでは"どのコレクション"の商品を取得したいかを指定できていません。

なので、

{% product in collection.products %}

とLiquidで書いても、どのコレクションから商品を引っ張ってくれば良いの？とShopify側で迷ってしまいます。

そこで”このコレクション”の商品を引っ張ってきて！って指定する必要があるので下記のように記載します。

{% product in collections[コレクションのハンドル名].products %}

という感じです。コレクションのハンドル名というのは管理画面から商品管理→コレクション→該当コレクション→ ハンドル名の部分です。（ピンク枠）

上記であれば"frontpage"がコレクションのハンドル名になります。

なので、固定ページや商品詳細ページでコレクションを取得して、コレクション内の商品一覧を表示したい場合は

{% product in collections["frontpage"].products %}
    <p>{{ product.title }}</p>
{% endfor %}

のような形式でLiquidを書いてあげると適切に取得できます。

[Shopify]Liquidで特定のコレクション内の商品情報を取得する方法　まとめ

以上、Liquidでコレクション内の商品を取得する方法でした。コレクションを作成して、Shopifyストア上のどこにでも表示できるというのは非常に魅力的で使い勝手が良いです。

そして、例えば商品詳細ページでその商品が属するカテゴリの関連商品を表示するだけでも売上に直結する可能性があります。もし少しでも読んでくれている方々のストア売上に貢献できたら嬉しいです。

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！