2026/05/25

Shopify に商品診断＆商品絞り込みを設置できるアプリ6選を紹介！コレクションフィルターで「探せる」ストアへ

@ 信条刃

今回の記事は Shopify App Store で提供されている、商品診断・商品絞り込み（コレクションフィルター）アプリについての記事です。商品数が増えてくると、お客様が「自分に合う商品」を見つけられずに離脱してしまうことがあります。この記事では、その課題を解決するアプリを6つご紹介し、あわせてコード編集で実装する方法も解説します。

商品診断・商品絞り込みとは

商品診断とは、お客様にいくつかの質問を投げかけ、その回答に応じて最適な商品を提案する仕組みのことです。アパレルなら「どんなシーンで着たいか」、コスメなら「肌質や悩み」などを尋ね、結果に合わせて商品を案内します。実店舗での接客を、オンライン上で自動的に再現するイメージです。

商品絞り込み（コレクションフィルター）は、タグ・商品タイプ・販売元・コレクションといった条件で商品リストを絞り込む仕組みです。この2つは地続きで、質問に答える感覚で条件を選ばせれば、絞り込み自体がそのまま「診断体験」になります。商品数が多いストアほど、こうした仕組みの有無が回遊率とコンバージョン率を大きく左右します。

今回は以下の記事を参考にしています。

商品診断・商品絞り込みを導入する利点

お客様が迷わず目的の商品にたどり着ける
商品数が多いストアでは、目的の商品を探すだけで疲れて離脱してしまうことがあります。質問形式で条件を選ばせることで、回遊の負担を減らせます。
コンバージョン率の向上が期待できる
「自分に合う」と感じた商品は購入につながりやすくなります。診断でお客様の意図を絞り込めば、提案の精度が上がります。
接客の自動化につながる
「何をお探しですか？」という実店舗の接客を、無人で再現できます。スタッフの手をかけずに一人ひとりへの提案が可能です。
直帰率・離脱率の改善
トップページから興味のあるカテゴリへスムーズに案内できるため、入口での離脱を防ぎやすくなります。
在庫消化・回遊のコントロール
見せたい商品やコレクションへ誘導できるため、特定カテゴリの露出を増やすといった運用が可能になります。
データに基づく改善
どの条件が選ばれているかを把握できれば、品揃えやコレクション構成の改善にも役立ちます。

商品診断・商品絞り込みアプリの選び方

数多くあるアプリの中から自社に合うものを選ぶには、いくつかの観点を持っておくと判断しやすくなります。

フィルターの種類（タグ・商品タイプ・販売元・コレクションなどに対応しているか）
お客様向けの「診断・絞り込み体験」を作れるか、それとも管理者向けの「並び替え」中心か
デザインのカスタマイズ性（ストアのブランドに馴染ませられるか）
ノーコードで設置・運用できるか
料金体系と無料体験の有無
日本語対応・サポート体制

特に「お客様自身に条件を選ばせたい」のか「ストア側で並びを自動最適化したい」のかで、選ぶべきアプリの方向性が変わります。目的を明確にしたうえで選ぶのがおすすめです。

テーマのコード編集で商品絞り込みを実装する方法

アプリを使わず、テーマのコードを編集して簡易的な「センテンス型」の商品絞り込みを実装することもできます。ここでは、商品タグで絞り込むシンプルな例を紹介します。カスタムセクションやスニペットとして組み込む想定です。

HTML（Liquid）を追加

まず、文章の中にドロップダウンを埋め込んだ絞り込みフォームと、商品グリッドを用意します。コレクションページのテンプレートやカスタムセクションに記述します。

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

  <div class="product-finder__grid" id="finder-grid">
    {% for product in collection.products %}
      <div class="product-finder__card"
           data-tags="{{ product.tags | join: ',' | downcase }}">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | image_url: width: 400 }}"
               alt="{{ product.title | escape }}" loading="lazy">
          <p class="product-finder__title">{{ product.title }}</p>
          <p class="product-finder__price">{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>

  <p class="product-finder__empty" id="finder-empty" hidden>
    該当する商品が見つかりませんでした。
  </p>
</div>

CSS を追加

次に、文章とドロップダウン、商品グリッドの見た目を整えます。テーマの CSS ファイルか、セクションの {% stylesheet %} 内に記述します。

.product-finder__sentence {
  font-size: 1.25rem;
  line-height: 2;
  margin-bottom: 24px;
}

.product-finder__select {
  border: none;
  border-bottom: 2px solid #333;
  background: transparent;
  font-size: 1.25rem;
  padding: 2px 8px;
  cursor: pointer;
}

.product-finder__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 749px) {
  .product-finder__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-finder__card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

JavaScript を追加

最後に、ドロップダウンの選択に応じて商品カードを絞り込む処理を追加します。選択されたタグを持つカードだけを表示し、該当が0件のときはメッセージを表示します。

document.addEventListener('DOMContentLoaded', () => {
  const select = document.getElementById('finder-tag');
  const cards = document.querySelectorAll('.product-finder__card');
  const emptyMessage = document.getElementById('finder-empty');

  const applyFilter = () => {
    const selected = select.value;
    let visibleCount = 0;

    cards.forEach((card) => {
      const tags = (card.dataset.tags || '').split(',');
      const isMatch = selected === '' || tags.includes(selected);
      card.hidden = !isMatch;
      if (isMatch) visibleCount += 1;
    });

    // 0件のときだけメッセージを表示する
    emptyMessage.hidden = visibleCount !== 0;
  };

  select.addEventListener('change', applyFilter);
});

コード実装の注意点

このサンプルは「コレクション内の商品をタグで絞り込む」最小限の実装です。実運用では以下のような点に注意が必要です。

コレクションの商品数が多い場合、全商品を一度に出力するとページが重くなるため、ページネーションや遅延読み込みの工夫が必要です。
2つのフィルターを連動させる「カスケード絞り込み」や、クイックビュー・カート追加までを自前で実装するのはかなりの工数になります。
テーマをアップデートするとコードが上書きされる可能性があるため、変更箇所の管理が必要です。

ここまで作り込むくらいなら、最初から商品診断・絞り込みアプリを導入したほうが、結果的に早く・安全に運用できるケースがほとんどです。まずはアプリで小さく試し、必要に応じてコード編集を検討するのがおすすめです。

価格比較

主要なアプリの料金と特徴を整理すると、次のようになります。

シンプル商品診断＆絞り込み｜お手軽コレクションフィルター：月額 $6.99。文章型ドロップダウンでお客様が直感的に絞り込める。クイックビュー・カート追加対応
OT | Collection Sort & Manage：無料〜月額 $29.99。50種類以上のソートと在庫商品の優先表示
Sort'd ‑ Prime Collection Sort：無料〜月額 $70。ドラッグ&ドロップとアナリティクス、A/B テスト
Flexible Collection Sort：月額 $4。シンプル＆低価格な並び替え
syncX: Stock Sync & Inventory：無料〜月額 $10。在庫同期とスマートソートの両立
Collection Sort & Category | KX：月額 $19〜$299。AI ソートと 1:1 レコメンド

Shopify アプリの日本語サポート

日本語に対応しているかどうかも、導入時の大切な判断材料です。

シンプル商品診断＆絞り込み｜お手軽コレクションフィルター：日本語対応（国内開発・日本語サポート）
syncX: Stock Sync & Inventory：日本語表示に対応
OT | Collection Sort & Manage：英語のみ
Sort'd ‑ Prime Collection Sort：英語のみ
Flexible Collection Sort：英語のみ
Collection Sort & Category | KX：英語のみ

海外製アプリは高機能なものが多い一方、管理画面が英語のため設定でつまずきやすい傾向があります。日本語でのサポートを重視するなら、国産の「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」が安心です。

使いやすさ

総合的に見て、最初の1本としておすすめなのは 「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」 です。多くの海外製アプリが「ストア側でコレクションの並びを自動最適化する」管理者向けの機能に寄っているのに対し、本アプリは お客様自身が文章の中のドロップダウンから条件を選び、診断する感覚で商品にたどり着ける という、購入体験そのものを改善するアプリです。

ノーコードでワンクリック設置でき、カードデザインやクイックビューまで日本語の管理画面から細かく調整できます。月額 $6.99・7日間無料体験と導入ハードルも低いため、まずは気軽に試せます。

終わりに

商品診断・商品絞り込み（コレクションフィルター）は、商品数が多いストアほど効果を発揮する施策です。お客様が迷わず目的の商品にたどり着ける導線を用意することで、回遊率・コンバージョン率の向上が期待できます。

コード編集での実装も可能ですが、カスケード絞り込みやクイックビューまで作り込むと工数がかさみます。まずはアプリで小さく始めて、効果を確かめながら育てていくのがおすすめです。

今回は以下の記事を参考にしています。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify に商品診断＆商品絞り込みを設置できるアプリ6選を紹介！コレクションフィルターで「探せる」ストアへ

商品診断・商品絞り込みとは

商品診断・商品絞り込みを導入する利点

商品診断・商品絞り込みアプリの選び方

おすすめの商品診断・商品絞り込み Shopify アプリ

シンプル商品診断＆絞り込み｜お手軽コレクションフィルター ☆ 迷ったらこれ

特徴・機能

価格設定

OT | Collection Sort & Manage

特徴・機能

価格設定

Sort'd ‑ Prime Collection Sort

特徴・機能

価格設定

Flexible Collection Sort

特徴・機能

価格設定

syncX: Stock Sync & Inventory

特徴・機能

価格設定

Collection Sort & Category | KX

特徴・機能

価格設定

テーマのコード編集で商品絞り込みを実装する方法

HTML（Liquid）を追加

CSS を追加

JavaScript を追加

コード実装の注意点

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopifyにコレクション一覧を設置できるアプリ6選を紹介！商品カテゴリー表示カルーセルでストアを魅力的に

Shopify に商品診断＆商品絞り込みを設置できるアプリ6選を紹介！コレクションフィルターで「探せる」ストアへ

Shopifyに縦型ショート動画ギャラリー・動画グリッドを設置できるアプリ6選を紹介！

ShopifyのサンクスページにLINE友だち追加ボタンを設置するできるアプリ6選を紹介！

Shopify にポイントプログラムを設置できる会員ポイントアプリ6選を紹介！

ShopifyでCSV注文作成・一括注文インポートができるアプリ6選を紹介！