Shopifyでタグ絞り込みを自作する必要はありませんが、仕組みを理解しておくとテーマの軽量カスタマイズや独自UIづくりに応用できます。デフォルトのフィルター機能や無料アプリと併用しつつ、コレクションページの動きを把握することで、より柔軟な商品一覧の改善が可能になります。
ECサイトでは商材が増えるほど、ユーザーがほしい商品を素早く見つけられるよう、一覧ページに工夫を加えることが重要になります。
その代表的な方法が、チェックボックスなどを用いた「タグによる絞り込み」。多くのECで見かける機能ですが、Shopifyでもシンプルなタグ絞り込みを実装することが可能です。
本記事では、Shopifyのコレクションページにおいて「タグで絞り込む」という基本的な動作がどのように実現されているのか、そしてその鍵となるLiquidオブジェクト「current_tags」について解説します。
複雑なフィルター機能を作りこむのではなく、まずはタグとURLの仕組みを理解したい方に向けて、必要なポイントだけをコンパクトにまとめていきます。
ざっくりこんな感じ
Shopifyで商品一覧を表示する中心的な役割を持つのが、コレクションページ（/collections/◯◯◯）です。
このページでは、URLにタグのハンドルを追加することで、特定のタグを持つ商品だけを絞り込んで表示することができます。
たとえば「/collections/all/btob」のように、コレクションの後ろにタグを続けて指定するだけで、そのタグを持つ商品の一覧が生成される仕組みです。
また、このとき適用されているタグ情報は、Liquidの「current_tags」というオブジェクトに自動で格納されます。テンプレート内では、この current_tags を使うことで現在の絞り込み条件を判定したり、表示したりできます。
「current_tags」の特徴について
「current_tags」というオブジェクト名を見ると「なぜ複数形なんだろう？」と疑問に思うかもしれません。
実はその疑問は正しく、このオブジェクトは “複数のタグを格納できる配列” として設計されています。
そのため「current_tags」には1つだけでなく、2つ以上のタグが同時に入るケースもあります。
たとえば「AAA」と「BBB」の2つが指定されている場合、「AAA」というタグも持ち、かつ「BBB」というタグも持つ商品だけが表示される仕組みです。
つまり、Shopifyのコレクションページでは 複数タグの「AND」条件による絞り込みが自然に実現されており、これこそが本記事で取り上げたいポイントとなります。
チェックボックスによるAND絞り込みの流れ
では、実際にチェックボックスでタグを選択し、AND条件で商品を絞り込む場合の流れをざっくり整理してみます。
まず前提として、商品一覧ページ（コレクションページ）に複数のタグを選べるチェックボックスを設置します。ユーザーがいくつかの項目にチェックを入れると、そのチェックされたタグをまとめてURLに反映し「/collections/◯◯◯/tagA+tagB」のような形でページを再読み込みします。
このときShopifyが自動的に「tagA」と「tagB」の両方を「current_tags」に格納し、AND条件で該当商品だけが一覧として表示されます。これがタグ絞り込みの基本的なフローです。
タグを使った絞り込みURL（/collections/◯◯◯/tagA+tagB）を実際に生成する部分は、JavaScriptによって実装されることがほとんどです。
本記事では本題から外れてしまうため、具体的なJavaScriptの記述は割愛しますが、もっともシンプルな方法としては「絞り込み」ボタンを用意し、ユーザーがチェックボックスにチェックを入れたあと、そのボタン押下をきっかけにタグをまとめてURLに付与し、ページをリロードして商品一覧を表示させるやり方が挙げられます。
もう少し踏み込むと、Ajaxを使ってページ全体をリロードせずに、チェックの追加・解除と同時に商品一覧部分だけを差し替える実装も可能です。その場合でも、基本となる考え方は「選択されたタグをもとに絞り込み条件を作り、current_tagsに反映させる」という点で共通しています。
***
いかがでしょうか。もちろん、Shopifyにはデフォルトのフィルター機能や、タグで絞り込みができる無料アプリもあるため、必ずしも手作りする必要はありません。
ただ、今回紹介した基本的な仕組みを理解しておくと、テーマのカスタマイズや独自UIの実装など、さまざまな応用ができるはずです。
