Shopifyのテーマカスタマイズを行っているエンジニア向けに、ブランド一覧ページを作成する方法を紹介します。
ブランド一覧ページは、ショップのブランドをまとめて表示するページです。ショップのブランドをわかりやすくユーザーに伝えるために重要なページです。
前提条件
本記事では、Shopifyのテーマカスタマイズを行った経験があることを前提としています。また、ShopifyのLiquidについて基本的な知識があることが望ましいです。
ブランド一覧ページのメリット
おっさんの個人的な意見だけど…。
１、アイテムショップ系のショップさん（アパレルや調理器具など）ショップさんであればブランドをわかりやすくユーザーに伝えることができる
２、ブランド別絞り込みをできたりするので、商品を探しやすくなる
３、ブランド詳細のコレクションやテンプレートを工夫することで、ブランドの認知度を高めることができる
時と場合によってはお客さんに提案するのもいいかも？
手順
ブランド一覧用のコレクションを作成する
まずは、ブランド一覧ページのためのコレクションを作成します。
今回はcollections/allと同じ内容で、価格が０円以上で全ての商品を取得しました。
この時vendorなので、/collections/vendorにしたかったのですが、これはできません。
/collections/vendorはShopify側であらかじめルーティングで確保されているからです。
（/collections/vendor?q=ブランド名でブランドに絞り込んだ商品一覧が出せます）
なのでハンドルは、/collections/brand にしました
ブランド詳細になるコレクションを作成する
次に、ブランド詳細用のコレクションを作成します。
この時にコレクションのハンドルを/collections/ブランド名にします。
ブランド名のところは、product.vendorで表示されるやつです。
ブランドページのテンプレートを作成する
最後に、ブランドページのテンプレートを作成します。
具体的なコード
{%- for shop_vendor in shop.vendors -%}
{%- assign current_collection_vendor = collections[shop_vendor] -%}
{%- if current_collection_vendor != blank -%}
<div class="brand-item">
<h2>{{ current_collection_vendor.title }}</h2>
<p>{{ current_collection_vendor.description }}</p>
<a href="{{ current_collection_vendor.url }}">詳細</a>
</div>
{%- endif -%}
{%- endfor -%}
このコードは、ショップのすべてのブランドをループで処理し、ブランド名からコレクションを呼び出し、ブランド名やブランドの説明文を表示します。
今回は、shop.vendorsにしました。
collection.all_vendorsというオブジェクトもあるのですが、この場合コレクションに紐づく全てのvendorなので、ページネーションの制限などを受けて、現在にいるページのvendorしか取れない現象が起きてくる可能性がありそうだなと思ったからです。この辺り検証はしてませんが、shop.vendorsを優先して使いました。
あと、if current_collection_vendor != blank この判定を追加することで、業務上表示しなくて良いブランドさんはコレクション詳細を作らないことで、非表示にすることが出来ます。
注意点
この方法では、ブランドのソートやページネーションなどの機能を実装することができません。
これらの機能を実装したい場合は、JSや.json.liquidなどを使って情報設計などから考え直す必要があります。
あと、今回のショップのブランドさんが今のところ５０件未満だったので検証してませんが、１ページのオブジェクトの読み込み件数に引っ掛かるかどうかもチャンスがあれば検証してみたいと思います。
まとめ
今回紹介した方法は、シンプルでわかりやすいため、初心者でも簡単に実装することができます。。。多分？
ただし、ブランド名を元に紐付けを行っているので、ブランド名が英語やローマ字でないような場合は、工夫が必要になってきます。
例えば、おじさん工房のようにひらがなと漢字などの場合、そのままコレクションのハンドルに使ってしまうと、変換されてしまい紐付けが上手くいかない場合が出てくるかもしれません。
そういった場合は、ブランド名をojisankoubouなどにし、そのコレクションにメタフィールドで表示名などを持たせることで、
{% assign v = product.vendor %}
{{ collections[v].metafields.brand.name }}
みたいな紐付けで表示することが出来るのではないか？と思っています。
Shopifyのブランド一覧、色々課題がありますが.json.liquidなどを使ってAPIで表示するような形も機会があれば試してみようと思います。
ARCHETYPからのお知らせ
ARCHETYPではShopifyテーマ、Shopifyアプリ、Webサイト/サービスなどの開発を行うエンジニアを募集中です！
正社員、副業などとわず募集です！（フルリモートも相談可です！）
https://www.archetyp.jp/recruit/
気になる方はお気軽にエントリーお待ちしております！