Shopifyカスタマイズの最新情報は「10ca」にて紹介しております。
【Shopify】ブランド一覧ページを作成
ショップによっては回遊性の為であったり、SEOの為であったりとブランドやメーカーの一覧ページを設けたいところ。
しかし、Shopifyのデフォルト機能ではページにHTMLを書き込んで、静的に構築するしか方法はありません。
今回ご紹介するのは、動的に販売元一覧を出力する方法とその応用です。
まずは、もっとも簡単な出力方法がこちら。
<ul>
{% for product_vendor in shop.vendors %}
<li>{{ product_vendor | link_to_vendor }}</li>
{% endfor %}
</ul>
登録されている販売元（Vendor）の一覧を出力するLiquidコードで、以下の様に出力されます。
<ul>
<li><a href="/collections/vendors?q=販売元名1">販売元名1</a></li>
<li><a href="/collections/vendors?q=販売元名2">販売元名2</a></li>
<li><a href="/collections/vendors?q=販売元名3">販売元名3</a></li>
</ul>
新たなページテンプレートを設けて上記のLiquidコードを貼り付ければ、販売元リンクがリスト形式で出力されます。
ただ、この方法だと販売元の名前とリンク先しか出力されませんね。
ブランド一覧ページとして表示させたいなら、ブランドロゴなども出力させたいところですが、現在の仕様では販売元を編集する機能がない為、これ以上の情報は出力できません。
そこで本題っ！
タイトルにある通り、画像付きで販売元を出力できる一覧ページを作る方法をご紹介します。
今回も「Dawn（ドーン）」ベースで紹介していきますが、他テーマでもだいたい同様の手順となります。
1. 販売元のコレクションを作成
まずは「コレクションを作成する」より、以下の手順で各販売元（ブランド）のコレクションを作成してください。
- タイトルを登録されている販売元と同名で記載
- 条件を「商品の販売元＋が右と一致＋販売元名」
- コレクションの画像にブランドロゴ等を登録
- 保存
ハンドルは管理しやすいよう、ご自由に設定してください。
2. 販売元一覧を出力するセクションを作成
「新しいsectionを追加する」より、「brand-list.liquid」を作成し、以下のコードを貼り付けます。
<div class="page-width page-width--narrow">
<ul class="brand-link-list">
{% for collection in collections %}
{% for product_vendor in shop.vendors %}
{% if collection.title == product_vendor %}
<li class="brand">
<a href="{{ collection.url }}" class="brand-link">
<figure class="brand-logo">
<img src="{{ collection.image | img_url: 'small' }}" alt="{{ collection.title }}" class="brand-logo-image">
<figcaption class="brand-name">{{ collection.title }}</figcaption>
</figure>
</a>
</li>
{% endif %}
{% endfor %}
{% endfor -%}
</ul>
</div>
{% 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] -%}
<div class="page-width page-width--narrow">
<div class="brand-link-wrap">
<ul class="brand-link-list">
{% for link in menu.links -%}
<li class="brand">
<a href="{{ link.url }}" class="brand-link">
<figure class="brand-logo">
<img src="{{ link.object.image | img_url: 'small' }}" alt="{{ link.title }}" class="brand-logo-image">
<figcaption class="brand-name">{{ link.title }}</figcaption>
</figure>
</a>
</li>
{% endfor -%}
</ul>
</div>
</div>
{% 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 %}
<a href="/collections/vendors?q={{ product.vendor | url_encode }}">
<img src="{{ collection.image | img_url: 'thumbnail' }}" alt="{{ collection.title }}">
</a>
{% 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」のリンクにこれを採用する場合は、<a>タグを以下の仕様にしてください。
<a href="/collections/vendors?q={{ collection.title | url_encode }}" class="brand-link">
ちなみに、Dawnテーマは仕様上{{ product.vendor | link_to_vendor }}が利用できないので、該当の箇所を上記と同様の<a>タグで囲うことで、リンク付きの販売元が表示されますよ。
以上！