Shopify商品タグの一覧表示・絞り込みナビゲーション実装ガイド【2026年最新】

実店舗の商品をShopifyでEC化していくと、商品点数が数十から数百に増えたタイミングで「お客様が目当ての商品にたどり着けない」という問題が必ず出てきます。カテゴリ（コレクション）だけで整理していても、「色」「サイズ」「素材」「シーズン」「用途」といった横断的な切り口での絞り込みができないと、訪問者は数ページ見て離脱してしまいます。この横断的な整理を実現する仕組みが商品タグであり、タグを一覧表示したり、絞り込みナビゲーション（フィルター）として機能させたりすることで、回遊率とコンバージョン率の両方を底上げできます。

この記事では、Shopifyの「商品タグ」を使ったフロントエンド機能、具体的にはタグ一覧ページの表示方法と、コレクションページでの絞り込みナビゲーションの実装方法に絞って解説します。CRMやセグメント配信で使う「顧客タグ」の自動付与やLTV分析といった話は扱いません。あくまで店頭に立つ商品を、訪問者がストレスなく探し出せるようにするための、フロントエンド側の商品タグ活用術を、管理画面の操作手順とLiquidコードの両面から具体的に説明します。タグの命名ルール設計、Shopify公式アプリの設定、テーマ編集、独自のLiquid実装、公開後の効果測定まで、実装の前後を通しで把握できる内容にまとめています。

この記事でわかること

• 商品タグと顧客タグの違い、フロントエンドで使うべきなのはどちらか
• タグ一覧ページと絞り込みナビゲーション（フィルター）の仕組みの違い
• Shopify公式アプリ「Search & Discovery」を使った絞り込み機能の設定手順
• Liquidを使ってタグ一覧・タグ絞り込みリンクを独自にカスタマイズする方法
• タグ運用でよくある失敗（タグの乱立、表記ゆれ、SEO上の重複コンテンツ問題）と回避策

結論：商品タグは「絞り込みナビゲーション」と「タグ一覧ページ」の2軸で活用する

結論から言うと、Shopifyの商品タグをフロントエンドで活かす方法は大きく2つに分かれます。1つはコレクションページに設置する「絞り込みナビゲーション（フィルター）」で、訪問者が色・サイズ・価格帯などの条件を掛け合わせて商品を探すための機能です。もう1つは「タグ一覧ページ」で、特定のタグが付いた商品だけを集めた一覧を独立したページとして見せる機能です。どちらも同じ商品タグのデータを使いますが、UIの置き場所と目的が異なるため、まずこの2つを混同せずに設計することが重要です。

実装手段としては、Shopify公式の無料アプリ「Search & Discovery」を使う方法、テーマ標準のフィルター機能を使う方法、Liquidでゼロからカスタマイズする方法の3つがあります。多くの店舗にとって最も費用対効果が高いのはSearch & Discoveryアプリを軸にしつつ、デザインに合わない部分だけLiquidで補う組み合わせです。全面的にゼロから作る必要があるケースは、既存テーマの構造では表現できない特殊な絞り込みUI（例えばビジュアル重視のタグ選択UIなど）を作りたい場合に限られます。

なぜ商品タグによる一覧・絞り込みが必要になるのか

実店舗でPOSやハンドメイド台帳を使って商品管理をしていた事業者がShopifyに移行すると、最初はコレクション（カテゴリ）だけで商品を分類しがちです。しかし「メンズ」「レディース」のようなコレクションと、「新作」「セール対象」「ギフト向け」「秋冬素材」のような横断的な切り口は本質的に別の軸であり、コレクションを増やし続けるだけでは対応しきれません。この横断軸を扱うためのデータ構造が商品タグであり、タグを検索・フィルター・一覧表示に活用することで、コレクション設計を複雑化させずに商品を多面的に見せられます。

特に広告経由で流入したユーザーは、トップページから回遊するのではなく、特定のコレクションページやタグ絞り込みページに直接着地することが多くなります。着地したページで「思っていたものと違う」「他の候補が見えない」と感じられると、そのまま離脱してしまいます。絞り込みナビゲーションが整備されていれば、着地後にワンクリックで条件を絞り込み直せるため、広告費をかけて集めた訪問者を取りこぼしにくくなります。回遊率が上がることは、間接的に滞在時間やページビューの改善につながり、SEO評価にも良い影響を与えます。

また、検索エンジン経由の流入という観点でも、タグ一覧ページは見逃せない役割を持ちます。「ブランド名+ギフト」のような複合キーワードで検索需要がある場合、通常のコレクションページだけではその検索意図に合致したページが存在しないことがあります。タグ一覧ページをSEOを意識して整備しておけば、こうしたロングテールの検索意図に対して、無理に新しいコレクションを作らずに受け皿を用意できます。

商品タグとは（顧客タグとの違い）

Shopifyの「タグ」機能は、商品・注文・顧客・ブログ記事など複数のオブジェクトに付けられる自由入力のラベルです。同じ「タグ」という名称でも、付ける対象によって用途がまったく異なるため、まずこの違いを整理しておく必要があります。

• 商品タグ：個々の商品（Product）に付与するラベル。色・サイズ・素材・用途・シーズンなど、フロントエンドの絞り込みナビゲーションやタグ一覧ページに直接表示される
• 顧客タグ：個々の顧客（Customer）に付与するラベル。購入金額やセグメントに応じてCRM施策やセグメント配信に使うもので、通常はストアのフロントエンドには表示されない
• 注文タグ：注文（Order）に付与するラベル。出荷状況や特殊対応の管理など、主に内部業務フローで使われる
• ブログ記事タグ：ブログ記事に付与するラベルで、記事の分類・関連記事表示に使われる

本記事で扱うのは、この中の「商品タグ」です。顧客タグを使ったセグメント配信やCRM活用については別のテーマになるため、本記事の範囲外とします。商品タグはあくまで、訪問者が商品ページ側で「見て、選んで、絞り込む」ための情報という前提で読み進めてください。

業種別のタグ活用例

商品タグでどの属性を切り口にするかは、扱う商品ジャンルによって大きく変わります。同じ「絞り込みナビゲーション」を実装するにしても、業種によって訪問者が実際に使う条件は異なるため、自社の商品構成に合わせてタグの属性設計を行う必要があります。

• アパレルEC：色・サイズ・素材・丈感・シーズン（春夏／秋冬）を軸にしたタグで、コーディネート提案や在庫切れの少ないサイズへの誘導に活用できる
• コスメEC：肌質（乾燥肌・敏感肌など）・成分・香り・容量を軸にしたタグで、成分にこだわりのあるユーザーの絞り込みニーズに応えられる
• 食品EC：アレルギー表示・産地・賞味期限の長さ・ギフト向けかどうかを軸にしたタグで、贈答用と自家用の探索導線を分けられる
• 雑貨・インテリアEC：カラー・テイスト（北欧風・和風など）・設置サイズを軸にしたタグで、部屋の雰囲気に合わせた絞り込みに対応できる
• 家具・大型商品EC：素材・サイズ展開・組み立ての有無を軸にしたタグで、購入前の不安要素を先回りして絞り込める状態にしておく

商品タグを使ったフロントエンド機能の全体像

タグの属性設計ができたら、次はそのタグをどこでどう見せるかを整理します。同じタグデータでも、見せる場所（独立したページか、コレクションページ内のUIか）によって訪問者の使い方も、必要な実装も変わってきます。ここを曖昧にしたまま実装を進めると、「タグは登録したのに、どこにも表示されない」「絞り込みはできるが、タグ単体のページが存在せず広告で使えない」といったズレが起きやすいため、先にゴールの形を固めておきます。

商品タグをフロントエンドで表示する場所は、大きく分けて2種類あります。それぞれ生成されるURLの構造や、SEO上の位置づけが異なるため、実装前に仕組みを理解しておきましょう。

タグ一覧ページの仕組み

Shopifyでは、コレクションページのURLに特定のタグをパスとして付け足すことで、そのタグが付いた商品だけを表示するページが自動生成されます。URLの形式は「/collections/コレクションのハンドル/タグ名」となり、例えばコレクション「all」に「ギフト」というタグを付けた商品だけを見せたい場合は「/collections/all/ギフト」のようなURLになります（実際にはタグ名はURLエンコードされます）。このページはコレクションテンプレートを流用して生成されるため、通常のコレクションページと同じデザインで、対象商品だけが絞り込まれた状態で表示されます。ブログ記事の場合も同様に「/blogs/ブログのハンドル/tagged/タグ名」という形式でタグ別の記事一覧が生成されます。

絞り込みナビゲーション（フィルター）の仕組み

絞り込みナビゲーションは、1つのコレクションページの中で複数の条件（タグ、価格帯、在庫有無、バリエーションなど）を掛け合わせて商品を動的に絞り込むUIです。Shopifyの公式アプリ「Search & Discovery」を有効化すると、コレクションページに自動でフィルターUIが追加され、選択した条件はURLパラメータ（例：?filter.p.tag=カラー_ブラック）として反映されます。ユーザーが複数条件を選んだ場合はAND条件で絞り込まれ、URLをそのまま共有すればブックマークや広告のランディングページとしても使えます。単一タグだけを見せたいタグ一覧ページと違い、絞り込みナビゲーションは「複数条件の掛け合わせ」を前提とした機能である点が最大の違いです。

コレクションとタグ、どちらで商品を整理すべきか

実店舗からのEC化案件でよく相談されるのが、「新しい切り口の商品グループができたとき、コレクションを増やすべきか、タグで対応すべきか」という判断です。目安として、その切り口が「単独でメニューやトップページの導線として見せたいほど重要か」で判断します。例えば「レディース」「メンズ」のような大分類や、「福袋2026」のような期間限定の企画は、独立したページとして回遊させたいのでコレクションにするのが適しています。一方で「ギフト向け」「秋冬素材」「乾燥肌向け」のように、複数のコレクションをまたいで横断的に存在し、かつ他の条件と組み合わせて絞り込みたい切り口はタグにするのが適しています。

コレクションを増やしすぎると、ナビゲーションメニューが煩雑になり、どのコレクションにどの商品が入っているのか管理側も把握しづらくなります。逆にすべてをタグだけで済まそうとすると、トップページや主要ナビゲーションからの導線が弱くなり、そもそもタグ絞り込みページの存在に訪問者が気づけないという問題が起きます。実務的には、少数の骨太なコレクション構造をベースに置きつつ、その中をタグによる絞り込みナビゲーションで柔軟に横断させる、という二層構造が最もバランスが良い設計です。

具体的な設定手順

Step1：商品タグを設計・登録する

絞り込み機能を実装する前に、まずタグの命名ルールを決めます。ルールなしにタグを付け続けると、「ブラック」「黒」「Black」のような表記ゆれが発生し、絞り込みの精度が落ちます。おすすめは「属性名_値」の形式で統一する方法です。例えば色なら「カラー_ブラック」「カラー_ホワイト」、素材なら「素材_コットン」「素材_ウール」のように、属性のプレフィックスを付けておくと、後述のSearch & Discoveryでフィルターの見出し（属性名）ごとにグルーピングしやすくなります。

登録は管理画面から行います。「商品管理」＞対象の商品を選択＞商品詳細ページ右側にある「タグ」欄にタグ名を入力してEnterで追加します。複数商品に一括でタグを付けたい場合は、商品一覧画面でチェックボックスで対象商品を選択し、画面上部に表示される「一括編集」または「タグを追加」から一括登録すると効率的です。CSVエクスポート・インポートを使えば、既存の商品データに対してタグ列を編集して再インポートする形で大量のタグを一括反映することもできます。

Step2：Search & Discoveryアプリでフィルターを有効化する

Shopify管理画面の「アプリ」からShopifyアプリストアで「Search & Discovery」を検索してインストールします（Shopify公式アプリのため、料金プランを問わず無料で利用できます）。インストール後、アプリの管理画面から「Filters」（フィルター）のメニューに入り、対象にしたいコレクションを選択します。フィルターとして使いたい属性（商品タグ、価格、在庫状況、バリエーションオプションなど）にチェックを入れると、そのコレクションページに絞り込みUIが自動的に追加されます。商品タグをフィルターに含める場合、先ほど「属性名_値」の形式で統一しておいたタグが、自動的に属性ごとにグルーピングされて表示されるため、Step1の命名ルールがそのまま効いてきます。

フィルターの並び順や、初期状態で開いておくか折りたたんでおくかといった表示挙動も、同じ管理画面から調整できます。設定後はストアのプレビューで実際にコレクションページを開き、意図した属性・値でフィルターが表示されているかを必ず確認してください。なお、Search & Discoveryはあくまでフィルターの「データ提供」を担うアプリであり、実際の見た目を描画するのはテーマ側のコードです。テーマが古い、または独自にフルスクラッチで作られている場合は、フィルターの選択肢自体は用意されてもページ上に表示されないことがあるため、次のStep3でテーマ側の対応状況を必ず確認します。

Step3：テーマエディタでフィルターUIの位置とデザインを調整する

Search & Discoveryはフィルターの「データ」を提供しますが、実際の見た目はテーマ側のコード（多くのOS2.0テーマでは facets.liquid や main-collection-product-grid.liquid といったセクション・スニペット）が担当しています。管理画面左メニューの「オンラインストア」＞「テーマ」＞使用中のテーマの「カスタマイズ」を開き、コレクションページのテンプレートを選択すると、フィルター表示位置に該当するセクション（多くの場合「商品フィルターと並び替え」といった名称）が編集画面に表示されます。ここでフィルターを商品グリッドの上部に横並びで置くか、左サイドバーに縦並びで置くかといったレイアウトを、コードを書かずに切り替えられるテーマも多くあります。テーマによって設定項目名は異なるため、テーマのドキュメントもあわせて確認してください。

Step4：タグ一覧をLiquidでカスタマイズする

Search & Discoveryの標準UIだけでは物足りない場合、例えば「このコレクションに存在する全タグをボタン形式で一覧表示し、クリックしたタグの商品だけを絞り込む」といった独自UIをLiquidで実装できます。管理画面の「オンラインストア」＞「テーマ」＞使用中のテーマの「…」メニューから「コードを編集」を開き、コレクションテンプレートが参照しているセクションファイル（例：main-collection-product-grid.liquid）に、以下のようなコードを追加します。

コレクションに含まれる全タグを取得して一覧表示し、現在選択中のタグにactiveクラスを付ける実装例は次の通りです。

具体的なコード例は以下のようになります（実際のクラス名・デザインはテーマに合わせて調整してください）。

<ul class=”tag-filter-list”>
  {% for tag in collection.all_tags %}
    <li>
      <a href=”{{ collection.url }}/{{ tag | handleize }}”
        class=”tag-filter-list__item{% if collection.tags contains tag %} is-active{% endif %}”>
        {{ tag }}
      </a>
    </li>
  {% endfor %}
</ul>

このコードは、コレクションに含まれる全タグをボタン化し、クリックすると該当タグのタグ一覧ページ（例：/collections/all/tag-black）に遷移する仕組みです。現在表示中のページと同じタグには is-active クラスが付くため、CSS側で選択状態を目立たせるスタイルを当てられます。Search & Discoveryの複数条件フィルターと組み合わせたい場合は、collection.filters をループしてfilter.valuesごとにチェックボックスやリンクを描画し、選択条件をURLパラメータ（filter.p.tag など）としてフォーム送信する形に拡張します。この場合はJavaScriptでフォームの変更を検知し、選択状態に応じて自動でページを再読み込みまたはAjaxで商品グリッドを更新する処理も必要になります。

Step5：モバイル表示とUIデザインの調整

タグ一覧・フィルターのUIは、PC幅では横並びやサイドバーで十分視認できますが、スマートフォン幅ではそのまま表示すると画面を圧迫します。多くのテーマでは、モバイル幅でフィルターを「絞り込む」ボタン付きのドロワー（引き出し）やモーダルに切り替える設計になっています。独自にLiquidでタグ一覧を実装した場合は、CSSのメディアクエリで一定幅以下のときにタグ一覧を横スクロールリスト、または開閉式のアコーディオンに変える調整を忘れずに行ってください。タグ数が多い店舗ほど、モバイルでの見せ方が回遊率に直結します。

Step6：タグ絞り込みページのSEO設定を行う

タグの組み合わせを自由に許すと、似たような商品構成のページが大量に生成され、検索エンジンから見て重複コンテンツと判定されるリスクがあります。特に価格帯や在庫有無のような、商品構成がほぼ同じになる絞り込み条件のページは、canonicalタグで代表ページ（絞り込み前のコレクションページ）を指定するか、noindexを設定して検索結果に出さないようにするのが安全です。一方で、「ギフト」「新作」のように検索需要があり、かつ商品構成が明確に異なるタグ一覧ページは、あえてインデックスさせてSEOの入り口として活用する価値があります。全てのタグ絞り込みページを一律でインデックスまたは一律でnoindexにするのではなく、タグごとに検索需要とコンテンツの独自性を見て使い分けることが重要です。

Step7：公開前チェックリストで表示崩れと内部管理タグの露出を防ぐ

タグ一覧・絞り込みナビゲーションは、公開後に気づかれにくい形で不具合が残りやすい機能です。公開前に以下の項目を必ず確認してください。まず、仕入れ管理や在庫管理のために社内でだけ使っているタグ（例：「仕入先A」「要在庫確認」など）が、絞り込みUIやタグ一覧ページに表示されていないかを確認します。次に、タグ数が多いコレクションでモバイル幅の表示が崩れていないか、フィルターを開いたときに商品グリッドが見えなくなっていないかを確認します。最後に、タグ一覧ページ・絞り込み結果ページのタイトルタグやメタディスクリプションが、コレクションページのものをそのまま引き継いで重複していないかを確認し、必要に応じてテンプレート側で動的に調整します。

タグクリックの効果を分析する方法

タグ一覧・絞り込みナビゲーションを実装した後は、公開して終わりにせず、実際にどのタグがよく使われているかを継続的に確認することで、店頭では気づけなかった潜在ニーズを発見できます。タグ絞り込みページはURLにタグ名やパラメータが含まれる独立したページとして生成されるため、通常のページ分析と同じ方法で効果測定が可能です。

• Google Analytics 4で、タグ一覧ページ・絞り込み結果ページのURLパターンごとにページビューと購入完了までの遷移率を確認する
• ヒートマップツール（Microsoft Clarityなど）で、コレクションページ上のどのタグボタンが実際にクリックされているかを可視化する
• クリックが多いのに購入に結びついていないタグがあれば、該当商品の画像・説明文・価格帯を見直す材料にする
• 逆に想定していなかったタグの組み合わせでよくクリックされている場合は、その切り口を新しいコレクションやLPとして独立させることも検討する

メリット・デメリット

商品タグを使った一覧・絞り込みナビゲーションには、実装前に理解しておくべきメリットとデメリットがあります。導入すれば必ず回遊率が上がるわけではなく、タグの設計品質と運用体制が伴って初めて効果が出る施策であることを踏まえたうえで、自社にとって着手する価値があるかを判断してください。

• メリット：コレクションを増やさずに横断的な切り口で商品を整理できる
• メリット：広告のランディングページとしてタグ絞り込みURLを直接使え、訪問者の意図に合った商品だけを見せられる
• メリット：訪問者がどのタグをよくクリックしているかを分析すれば、店頭では気づきにくい潜在ニーズを把握できる
• メリット：新規タグの追加はコレクション作成よりも手軽で、シーズンごとの商品整理がしやすい
• デメリット：タグの命名ルールが崩れると、絞り込みの精度が落ち、かえって探しにくくなる
• デメリット：タグの組み合わせによって重複コンテンツが大量発生し、SEO上のマイナスになり得る
• デメリット：在庫管理や仕入れ管理のための内部用タグを、うっかりフィルターに含めてしまうと顧客に見えてしまう
• デメリット：タグ数が増えすぎると管理画面での商品登録作業が煩雑になり、運用担当者の負担が増える

よくある失敗と回避策

よくある質問

商品タグと顧客タグは同じ管理画面のどこで見分けられますか？

商品タグは「商品管理」の各商品詳細ページの「タグ」欄で編集します。顧客タグは「顧客」メニューの各顧客詳細ページの「タグ」欄で編集する、まったく別のデータです。名前は同じ「タグ」ですが、付与する対象（商品か顧客か）によって保存先も表示される場所も異なるため、混同しないよう管理画面上でも意識して分けて運用してください。

Search & Discoveryを入れれば必ずタグでフィルターできますか？

アプリを入れただけでは、テーマ側がフィルターUIの表示に対応している必要があります。多くのOS2.0対応テーマは標準でフィルター表示に対応していますが、古いテーマや大幅にカスタマイズされたテーマでは、テーマ側のコード修正が必要になる場合があります。導入前にテーマのドキュメントで対応状況を確認するか、実際にストアのプレビューでコレクションページを開いて確認してください。

タグは何個くらい付けるのが適切ですか？

1商品あたり3〜5個程度を目安にするとよいです。多く付けすぎると、絞り込みナビゲーションの選択肢が肥大化し、訪問者が逆に選びにくくなります。色・サイズ・素材・用途・シーズンなど、実際に絞り込みで使う属性に絞ってタグを設計し、内部管理専用のメモのようなタグは別の仕組み（メタフィールドなど）に分離することをおすすめします。

タグ一覧ページのURLを自分でカスタムできますか？

Shopify標準の「/collections/コレクション名/タグ名」という形式のURL構造自体は変更できません。日本語URLの見え方が気になる場合は、タグ名を英数字（ハンドル相当の文字列）で登録し、画面上の表示名だけを別途Liquidで変換して見せる、といった工夫で対応するのが現実的です。

タグの効果はどう測定すればよいですか？

Google Analytics 4でタグ絞り込みページ・タグ一覧ページのURLごとのページビューや、そこから購入に至った割合を確認するのが基本です。加えてヒートマップツールを使えば、どのタグボタンが実際にクリックされているかを視覚的に把握できます。クリックが多いのに購入に結びついていないタグがあれば、そのタグに該当する商品ページ側の訴求や画像を見直す材料になります。

テーマがフィルター表示に対応していない場合はどうすればよいですか？

まずはテーマの提供元に、Search & Discoveryとの互換性があるかを確認してください。対応していない場合は、テーマをOS2.0対応の最新バージョンに更新する、またはStep4で紹介したようなLiquidカスタマイズで独自にタグ一覧・絞り込みUIを実装する方法があります。大規模な改修になる場合は、既存デザインへの影響範囲を事前に洗い出してから着手することをおすすめします。

タグ一覧ページと通常のコレクションページ、どちらを優先して作るべきですか？

商品数が少ないうちはコレクションページだけで十分ですが、1つのコレクションに数十点以上の商品が並ぶようになったら、タグによる絞り込みナビゲーションを優先して整備すべきタイミングです。コレクションをむやみに細分化するより、少数の大きなコレクションとタグによる横断的な絞り込みを組み合わせる方が、管理画面の運用負荷を抑えながら回遊性を確保できます。

まとめ

Shopifyの商品タグは、コレクションだけでは表現しきれない横断的な商品整理を可能にし、タグ一覧ページと絞り込みナビゲーションという2つの形でフロントエンドに反映できます。まずはSearch & Discoveryアプリと命名ルールの統一されたタグ設計で標準的な絞り込み機能を整え、デザインや挙動に独自性が必要な部分だけLiquidでカスタマイズする、という順番で進めるのが失敗の少ない進め方です。あわせて、重複コンテンツになりやすいタグ絞り込みページのSEO設定も忘れずに行ってください。

タグの命名ルール設計から絞り込みUIの実装、公開後のクリック分析まで、自社だけで判断が難しい場合は、EC Retail Adsまでご相談ください。実店舗の商品構成を踏まえたタグ設計から、Shopifyストア構築、広告改善、リピート施策まで一気通貫でサポートします。単発の機能追加として発注するのではなく、集客から購入、リピートまでの導線の一部として商品タグを位置づけることで、実装コストに見合った成果につなげやすくなります。