Shopifyで動的な販売元一覧を画像付きで出力する方法

Shopifyカスタマイズの最新情報は「10ca」にて紹介しております。
【Shopify】ブランド一覧ページを作成

ショップによっては回遊性の為であったり、SEOの為であったりとブランドやメーカーの一覧ページを設けたいところ。

しかし、Shopifyのデフォルト機能ではページにHTMLを書き込んで、静的に構築するしか方法はありません。

今回ご紹介するのは、動的に販売元一覧を出力する方法とその応用です。

まずは、もっとも簡単な出力方法がこちら。


{% for product_vendor in shop.vendors %}
{{ product_vendor | link_to_vendor }}
{% endfor %}


登録されている販売元（Vendor）の一覧を出力するLiquidコードで、以下の様に出力されます。


販売元名1
販売元名2
販売元名3


新たなページテンプレートを設けて上記のLiquidコードを貼り付ければ、販売元リンクがリスト形式で出力されます。

ただ、この方法だと販売元の名前とリンク先しか出力されませんね。
ブランド一覧ページとして表示させたいなら、ブランドロゴなども出力させたいところですが、現在の仕様では販売元を編集する機能がない為、これ以上の情報は出力できません。

そこで本題っ！

タイトルにある通り、画像付きで販売元を出力できる一覧ページを作る方法をご紹介します。
今回も「Dawn（ドーン）」ベースで紹介していきますが、他テーマでもだいたい同様の手順となります。

1. 販売元のコレクションを作成

まずは「コレクションを作成する」より、以下の手順で各販売元（ブランド）のコレクションを作成してください。

タイトルを登録されている販売元と同名で記載

条件を「商品の販売元＋が右と一致＋販売元名」

コレクションの画像にブランドロゴ等を登録

保存

ハンドルは管理しやすいよう、ご自由に設定してください。

2. 販売元一覧を出力するセクションを作成

「新しいsectionを追加する」より、「brand-list.liquid」を作成し、以下のコードを貼り付けます。



{% for collection in collections %}
{% for product_vendor in shop.vendors %}
{% if collection.title == product_vendor %}




{{ collection.title }}



{% endif %}
{% endfor %}
{% endfor -%}



{% schema %}
{
"name": "ブランド一覧",
"tag": "section",
"class": "page-section"
}
{% endschema %}

仕組みを順に説明しますと、{% for collection in collections %}でショップ内に登録されている全コレクションを出力し、{% for product_vendor in shop.vendors %}でショップ内に登録されている全販売元を出力します。

次に{% if collection.title == product_vendor %}でコレクション名と販売元名が一致したら、HTMLを出力させるという分岐条件を設定します。

HTML構造やクラス名、画像サイズなどは、環境に合わせて編集してください。
また、CSS設定もここでは紹介しませんので、ご自由にデザインしてください。

3. ページテンプレートを作成

「新しいtemplateを追加する」より、「page.brand-list.json」を作成し、以下のコードを貼り付けます。

{
"sections": {
"main": {
"type": "main-page",
"settings": {
}
},
"brand": {
"type": "brand-list",
"settings": {
}
}
},
"order": [
"main",
"brand"
]
}

これはDawnのJSONテンプレートの例ですが、テーマが従来のLiquidテンプレートの場合は、「page.brand-list.liquid」を作成。
「page.liquid」のソースをコピペし、最下部に{% section 'brand-list %}を入れてください。

4. ページを作成

「ページを追加」よりブランド一覧ページを作成します。

タイトルやハンドルを入力し、テーマテンプレートを「brand-list」に設定し保存すればブランド一覧ページの完成です。
後はページを確認し、HTMLやCSSを調整してください。

Ex. ブランドの並び順を編集したい場合

今回紹介した方法であれば、ブランドロゴも出力できるブランド一覧ページが作成できますが、恐らくはA→Z順となります。

順番を任意で並べ替えたい場合は「メニュー機能」を使った方法がオススメです。
「brand-list.liquid」の内容を以下の様にしてください。

{%- assign menu = linklists[section.settings.brand_link_list] -%}




{% for link in menu.links -%}




{{ link.title }}



{% endfor -%}




{% schema %}
{
"name": "ブランド一覧",
"tag": "section",
"class": "page-section",
"settings": [
{
"type": "link_list",
"id": "brand_link_list",
"label": "メニューを選択"
}
]
}
{% endschema %}

各ブランドのコレクションを登録したメニューを作成しカスタマイザーにて設定すれば、メニュー順通りにブランド一覧が出力されます。

Ex. 商品ページにロゴを出力させたい場合

こちらも同様の処理で以下のコードで出力可能です。

{% for collection in collections %}
{% if collection.title == product.vendor %}



{% endif %}
{% endfor %}

商品ページでは全販売元を出力する必要がない為、{% if collection.title == product.vendor %}でコレクションの中に商品ページの販売元と一致するタイトルがあれば、該当のコレクション画像が表示される仕組みとなっております。

ご注目いただきたいのがリンク先です。

先述の「brand-list.liquid」では{{ collection.url }}をリンク先としており、1で作成した「/collections/ハンドル」といったリンク先となります。

一般的なテーマで使用されている販売元及びそのリンク先は、{{ product.vendor | link_to_vendor }}で出力されておりリンクは「/collections/vendors?q=販売元名」という仕様です。

どちらを利用しても構わないのですが、混乱を避けるため統一させた方が良いと思うので、上記の「/collections/vendors?q={{ product.vendor | url_encode }}」としております。

また、「brand-list.liquid」のリンクにこれを採用する場合は、タグを以下の仕様にしてください。



ちなみに、Dawnテーマは仕様上{{ product.vendor | link_to_vendor }}が利用できないので、該当の箇所を上記と同様のタグで囲うことで、リンク付きの販売元が表示されますよ。

以上！