Shopify で商品診断・商品絞り込みを実現する方法｜コレクションフィルターで売上を伸ばすアプリも紹介

はじめに
記事の構成
Shopify で商品診断・商品絞り込みを表示できる？
商品診断・商品絞り込みを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
- 文言のテンプレ例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ

はじめに

Shopify でストアを運営していると、「商品数は増えてきたのに、思ったように売れない」という壁に突き当たることがあります。その原因のひとつが、お客様が自分に合う商品にたどり着けていない ことです。トップページやコレクションページに商品を並べているだけでは、選択肢が多すぎて、かえってお客様を迷わせてしまうのです。

この課題を解決するのが、商品診断 と 商品絞り込み（コレクションフィルター）です。お客様が質問に答えたり条件を選んだりするだけで、最適な商品を提案できれば、実店舗の接客のような体験をオンラインで再現できます。結果として、回遊率やコンバージョン率の向上が期待できます。

この記事では、Shopify で商品診断・商品絞り込みを実現する方法を、メリット・デメリット、コード実装、そしてノーコードで設置できるおすすめアプリまで含めて詳しく解説します。

記事の構成

この記事は以下の流れで解説します。

Shopify で商品診断・商品絞り込みは実現できるのか
商品診断・コレクションフィルターを導入するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」の紹介と設定方法
コード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify で商品診断・商品絞り込みを表示できる？

結論から言うと、Shopify で商品診断・商品絞り込みを実現することは可能です。 ただし、Shopify 標準のコレクション並び替えやテーマ付属のフィルター機能だけでは、「文章の中で条件を選ばせる診断のような体験」までは作れません。

実現方法は大きく2つあります。

テーマのコード編集で実装する方法：Liquid・CSS・JavaScript を書いて、自前で絞り込み UI を作る
アプリを導入して実装する方法：商品診断・絞り込みアプリを入れて、ノーコードで設置・運用する

それぞれにメリット・デメリットがあるため、後ほど比較します。まずは、そもそも商品診断・絞り込みを導入することの利点と注意点を整理しましょう。

商品診断・商品絞り込みを表示するメリット・デメリット

メリット

お客様が迷わず目的の商品にたどり着ける

商品数が多いストアほど、目的の商品を探すだけでお客様は疲れてしまいます。質問形式で条件を選ばせることで、回遊の負担を大きく減らせます。

「カジュアル」「ギフト向け」などのタグで一気に候補を絞れる
「Tシャツ」「バッグ」など商品タイプで探せる
ブランド（販売元）やコレクション単位で探せる

コンバージョン率の向上が期待できる

「自分に合う」と感じた商品は購入につながりやすくなります。診断を通じてお客様の意図を絞り込めば、提案の精度が上がり、購入率の向上が見込めます。

接客の自動化につながる

実店舗の「何をお探しですか？」という接客を、無人で再現できます。スタッフの手をかけずに、一人ひとりに合った提案が可能になります。

直帰率・離脱率の改善

入口のページから興味のあるカテゴリへスムーズに案内できるため、最初の数秒での離脱を防ぎやすくなります。

デメリット

質問・条件の設計に工夫が必要

闇雲に質問や選択肢を増やすと、かえってお客様が離脱します。商品構成に合った切り口で、最小限の操作で絞り込めるよう設計する必要があります。

デフォルト機能だけでは実現が難しい

文章形式の診断体験やカスケード絞り込み、クイックビューまで作り込むには、コード編集かアプリ導入が必要です。

コード実装は保守コストがかかる

自前で実装すると、テーマ更新時の上書きやパフォーマンスの問題など、継続的なメンテナンスが必要になります。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット
- 月額費用がかからない
- デザインや挙動を完全に自由にコントロールできる
デメリット
- Liquid・CSS・JavaScript の知識が必要
- カスケード絞り込みやクイックビューまで作ると工数が大きい
- テーマ更新時にコードが上書きされるリスクがある
- パフォーマンス最適化を自分で行う必要がある

アプリを導入する方法

メリット
- ノーコードで設置・運用できる
- カードデザインやクイックビューなどが最初から用意されている
- 設定変更がプレビューを見ながら即座に反映される
- サポートを受けられる
デメリット
- 月額費用がかかる
- アプリの仕様の範囲内でのカスタマイズになる

結論：最初はアプリで小さく試すのがおすすめ

コード編集は自由度が高い反面、診断体験として作り込もうとすると想像以上に工数がかかります。まずはアプリで小さく始めて効果を確かめ、どうしても細部にこだわりたくなったらコード編集を検討する、という進め方が現実的です。多くのアプリには無料体験があるため、リスクを抑えて試せます。

アプリのインストール手順

まずは Shopify App Store からアプリをインストールします。

Shopify 管理画面の左下にある「設定」をクリックします。

Shopify 管理画面左下の「設定」ボタン

「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

「アプリと販売チャネル」から Shopify App Store へ移動する画面

検索窓にアプリ名「シンプル商品診断＆絞り込み」を入力し、表示されたアプリをクリックします。

App Store の検索結果に表示されたアプリ

アプリ詳細画面で「インストール」をクリックします。

アプリ詳細画面のインストールボタン

権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

権限の確認画面とインストール完了

アプリをテーマに追加（有効化）

インストールが完了したら、絞り込みブロックをテーマに追加します。アプリの管理画面を開きます。

アプリの管理画面

「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

テーマ選択と「テーマに追加」ボタン

テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。任意のページに設置したい場合は、テーマエディタ上部のプルダウンで対象ページに移動し、「セクションを追加」→「アプリ」タブからブロックを追加します。

テーマエディタでブロックを確認して保存する画面

アプリの設定項目を理解する

テーマエディタの設定パネルから、文章・デザイン・表示項目を自由にカスタマイズできます。ここでは主要な設定グループを解説します。

基本設定

タイトル、ブロックスタイル（なし／枠線／カード）、センテンスの書き出し、ドロップダウンのデザイン（アンダーライン／太字／ピル／ボックス）、絞り込みの背景色を設定します。「あなたにぴったりの一着は？」のように、お客様に呼びかけるタイトルを入れると効果的です。

基本設定の設定画面

フィルターの設定

フィルター 1・フィルター 2 それぞれにフィルタータイプ（タグ／商品タイプ／販売元／コレクション）と「すべて」ラベルを設定します。フィルター 2 をタグにすると、フィルター 1 の選択に応じて選択肢が連動するカスケード絞り込みが働きます。

フィルター 1 設定の設定画面

フィルター 2 設定の設定画面

カードデザイン・バッジ・ボタンの設定

商品カードのスタイル（ミニマル／ボーダー／シャドウ）、角丸、背景色、画像比率、ホバーズームに加え、セールバッジ・売り切れバッジ・カート追加ボタン・クイックビューボタンなどを設定できます。

カードデザインの設定画面

バッジ・ボタンの設定画面

グリッド・表示設定

PC・スマートフォンそれぞれの列数、商品表示上限数、件数表示、商品なしメッセージ、上下の余白を設定できます。

グリッド・表示設定の設定画面

すぐ使えるおすすめ設定例

実際の業種に合わせた設定例をいくつか紹介します。

アパレルストア：フィルター 1 を「商品タイプ（トップス／ボトムス…）」、フィルター 2 を「タグ（カジュアル／きれいめ…）」にして、カスケード絞り込みでコーディネートを提案
コスメストア：フィルター 1 を「タグ（乾燥肌／脂性肌…）」、フィルター 2 を「商品タイプ（化粧水／美容液…）」にして、悩み別に商品を案内
ギフトストア：フィルター 1 を「コレクション（予算別）」、フィルター 2 を「タグ（相手別）」にして、贈る相手と予算で絞り込み

文言のテンプレ例

センテンスの書き出し：「あなたにぴったりの」
フィルター間の接続テキスト：「の中で」
末尾テキスト：「を探しています」
「すべて」ラベル：「すべて」または「指定なし」

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに簡易的な絞り込みを実装したい場合のサンプルコードを紹介します。商品タグで絞り込む最小構成です。

実装の流れ

コレクションの商品とタグを Liquid で出力する
CSS で文章・ドロップダウン・グリッドの見た目を整える
JavaScript でドロップダウンの選択に応じてカードを絞り込む

HTML（Liquid）を追加

<div class="pf">
  <p class="pf__sentence">
    あなたにぴったりの
    <select id="pf-tag" class="pf__select">
      <option value="">すべて</option>
      {% for tag in collection.all_tags %}
        <option value="{{ tag | downcase }}">{{ tag }}</option>
      {% endfor %}
    </select>
    を探しています
  </p>

  <div class="pf__grid" id="pf-grid">
    {% for product in collection.products %}
      <a class="pf__card" href="{{ product.url }}"
         data-tags="{{ product.tags | join: ',' | downcase }}">
        <img src="{{ product.featured_image | image_url: width: 400 }}"
             alt="{{ product.title | escape }}" loading="lazy">
        <span class="pf__title">{{ product.title }}</span>
        <span class="pf__price">{{ product.price | money }}</span>
      </a>
    {% endfor %}
  </div>
</div>

CSS を追加

.pf__sentence {
  font-size: 1.25rem;
  line-height: 2;
  margin-bottom: 24px;
}
.pf__select {
  border: none;
  border-bottom: 2px solid #333;
  background: transparent;
  font-size: 1.25rem;
  padding: 2px 8px;
  cursor: pointer;
}
.pf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 749px) {
  .pf__grid { grid-template-columns: repeat(2, 1fr); }
}

JavaScript を追加

document.addEventListener('DOMContentLoaded', () => {
  const select = document.getElementById('pf-tag');
  const cards = document.querySelectorAll('.pf__card');

  select.addEventListener('change', () => {
    const selected = select.value;
    cards.forEach((card) => {
      const tags = (card.dataset.tags || '').split(',');
      // 「すべて」または選択タグを含む商品だけ表示する
      card.hidden = !(selected === '' || tags.includes(selected));
    });
  });
});