Shopifyで商品絞り込み・商品診断・コレクションフィルターを導入できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/23

1. はじめに

Shopify（ショッピファイ）は、世界中の店舗で利用されているネットショップ作成サービスです。専門的な知識がなくても、商品の登録から決済、配送までをひとつの管理画面で運用できます。そして Shopify アプリは、その Shopify ストアに後から機能を追加できる拡張ツールです。アプリを導入することで、標準では用意されていない便利な機能を、コードを書かずにストアへ取り入れられます。

このガイドでご案内する 「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」 は、文章の中にドロップダウンを埋め込んだ "センテンス型" の商品絞り込みブロックをストアに追加できるアプリです。お客様は質問に答える感覚で条件を選ぶだけで、自分にぴったりの商品がリアルタイムに表示されます。タグ・商品タイプ・販売元・コレクションの4種類のフィルターに対応し、2つのフィルターを組み合わせたカスケード（連動）絞り込みも可能です。商品カードのデザインやセールバッジ、クイックビュー、カート追加ボタンまで、コーディング不要で細かくカスタマイズできます。

料金

Basic Plan：月額 $6.99（または年額 $69.90 で17%お得）
インストールから7日間、無料でアプリをお試しいただけます
年払いで実質2ヶ月分無料でお得にご利用いただけます

アプリストア

シンプル商品診断＆絞り込み｜お手軽コレクションフィルター（Shopify App Store）

シンプル商品診断＆絞り込みアプリのメイン画像

2. 「シンプル商品診断＆絞り込み｜お手軽コレクションフィルター」でできること

このアプリは、お客様が「自分に合う商品」を見つけやすいストアづくりをお手伝いします。文章の中に組み込まれたドロップダウンから条件を選ぶだけで、絞り込まれた商品が瞬時に表示されるので、商品数が多いストアでもお客様を迷わせません。デザインや表示項目は管理画面から自由に調整でき、専門知識がなくても、ストアの雰囲気に合わせた絞り込みコーナーを設置できます。

シンプル商品診断＆絞り込みアプリのメイン画像

主な特徴

文章スタイルのドロップダウンで、お客様が直感的に商品を絞り込めます。
タグ・商品タイプ・販売元・コレクションの4種類のフィルターに対応しています。
2つのフィルターを連動させるカスケード絞り込みが使えます。
カードデザイン・バッジ・ボタンなど豊富なカスタマイズが可能です。
クイックビューやカート追加ボタンを標準搭載しています。
コーディング不要、ワンクリックでテーマに追加できます。

質問形式ドロップダウンで、直感的に商品を絞り込みできる！

「〇〇を探しています」といった文章の一部がドロップダウンになっており、お客様はクイズに答える感覚で条件を選べます。選ぶたびに商品が即座に絞り込まれるので、欲しい商品にスムーズにたどり着けます。

質問形式ドロップダウンで商品を絞り込んでいる様子

タグ・商品タイプ・販売元・コレクションに対応！

絞り込みの基準は、タグ・商品タイプ・販売元・コレクションの4種類から自由に選べます。ストアの商品構成に合わせて、もっとも探しやすい切り口でフィルターを設定できます。

タグ・商品タイプ・販売元・コレクションのフィルタータイプ選択画面

カードデザインやバッジ、ボタンなどを自由にカスタマイズできる！

商品カードのデザインはミニマル・ボーダー・シャドウなどから選べ、角丸や背景色、セールバッジの表示方法、ボタンのスタイルまで細かく調整できます。ストアのブランドイメージにぴったり合う見た目に仕上げられます。

カードデザインやバッジ、ボタンをカスタマイズしている設定画面

クイックビューやカート追加ボタンなどを標準搭載！

商品をクリックしなくても詳細を確認できるクイックビューや、その場でカートに追加できるボタンを標準で備えています。お客様の購入までの手間を減らし、スムーズなお買い物体験を提供できます。

クイックビューとカート追加ボタンが表示された商品カード

スキーマで様々な項目を編集できる！

テーマエディタ上の設定パネルから、文章・フィルタータイプ・デザイン・表示件数など、あらゆる項目をノーコードで編集できます。プレビューを見ながら、思いどおりの絞り込みコーナーを作り込めます。

テーマエディタの設定パネルで各項目を編集している様子

１クリックでテーマに追加できる！

アプリの管理画面から、追加したいテーマを選んでボタンを押すだけで、ブロックをストアに設置できます。難しい設定は不要で、すぐに使い始められます。

ワンクリックでテーマに追加するボタンが表示された管理画面

3. アプリのインストール

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

シンプル商品診断＆絞り込み｜お手軽コレクションフィルター（Shopify App Store）

料金

Basic Plan：月額 $6.99（または年額 $69.90 で17%お得）
インストールから7日間、無料でアプリをお試しいただけます
年払いで実質2ヶ月分無料でお得にご利用いただけます

インストール手順

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓にアプリ名「シンプル商品診断＆絞り込み」を入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

4. アプリブロックをテーマに追加

インストールが完了したら、絞り込みブロックをストアのテーマに追加します。かんたんな「自動でテーマに追加」と、任意のページに設置できる「手動でテーマに追加」の2つの方法があります。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブからアプリブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

5. アプリのカスタマイズ

テーマエディタの設定パネルから、絞り込みブロックの文章・デザイン・表示項目を自由にカスタマイズできます。ここでは設定項目をグループごとにご紹介します。

基本設定

このグループでは、ブロックの見出しや絞り込み文章の基本的な見た目を設定します。

タイトル：絞り込みブロックの上に表示する見出しです。「商品を探す」「あなたにぴったりの一着は？」など、お客様に呼びかける言葉を入れると効果的です。
ブロックスタイル：ブロック全体の枠の見せ方を選べます。
- なし：枠線を付けず、シンプルに表示します。
- 枠線（アクセントバー付き）：枠線とアクセントバーで囲み、コーナーとして目立たせます。
- カード：カード状の枠で囲み、独立したパーツとして際立たせます。
センテンスの書き出し：ドロップダウンの前に置く文章です。「〇〇を探しています」のように、自然な文章の出だしを入れると、お客様が直感的に操作できます。
ドロップダウンのデザイン：文章中のドロップダウンの見た目を選べます。
- アンダーライン：下線スタイルで、文章になじむシンプルな見た目です。
- アンダーライン（太字）：下線を太字にして、選択箇所を強調します。
- ピル（丸型）：丸みのあるボタン状のデザインです。
- ボックス：四角い枠で囲んだはっきりとしたデザインです。
絞り込みの背景色：タイトルと絞り込み文章をまとめた領域の背景色です。ストアの配色に合わせて設定すると、コーナー全体に統一感が出ます。

基本設定の設定画面

フィルター 1 設定

1つ目のドロップダウンで使う絞り込みの基準を設定します。

フィルタータイプ：絞り込みに使う商品情報の種類を選びます。
- タグ：商品に付けたタグで絞り込みます。
- 商品タイプ：商品の種類（タイプ）で絞り込みます。
- 販売元：商品の販売元（ベンダー）で絞り込みます。
- コレクション：商品が属するコレクションで絞り込みます。
「すべて」ラベル：何も選ばれていないときに表示する選択肢の文言です。「すべて」「指定なし」「any」など、初期状態を分かりやすく示す言葉がおすすめです。

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

フィルター 2 設定

2つ目のドロップダウンと、文章の末尾テキストを設定します。フィルター 2 をタグにした場合、フィルター 1 の選択に応じて選択肢が連動して変化するカスケード絞り込みが働きます。

フィルタータイプ：2つ目の絞り込みに使う商品情報の種類を選びます（タグ／商品タイプ／販売元／コレクション）。
接続テキスト：フィルター 1 とフィルター 2 の間に入れる文章です。「の中で」「かつ」など、2つの条件を自然につなぐ言葉を入れると読みやすくなります。
「すべて」ラベル：フィルター 2 で何も選ばれていないときに表示する文言です。
センテンスの末尾テキスト：文章の最後に付ける言葉です。「を探しています」「がほしい」など、文章を締めくくる表現を入れると自然な仕上がりになります。

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

カードデザイン

絞り込み結果として表示される商品カードの見た目を設定します。

カードスタイル：商品カードの枠の見せ方を選べます。
- ミニマル：枠を付けず、すっきりと表示します。
- ボーダー：枠線で囲み、1枚ずつ区切って見せます。
- シャドウ：影を付けて立体感を出します。
カードの角丸：カードの角の丸み（なし／小／中／大）を選べます。やわらかい印象にしたいときは丸みを大きく設定するのがおすすめです。
カードの背景色：商品カードの背景色です。商品画像を引き立てたいときに調整すると効果的です。
画像の比率：商品画像の縦横比を選べます。
- 商品画像に合わせる：元画像の比率をそのまま使います。
- 1:1 正方形／4:3 横長／3:4 縦長／16:9 ワイド：指定した比率にそろえて、グリッドの見た目を統一できます。
画像の表示方法：指定した比率に対する画像の収め方を選べます。
- カバー（切り抜いて埋める）：枠いっぱいに画像を広げます。
- コンテイン（全体を表示）：画像全体が見えるように収めます。
ホバー時に画像をズーム：マウスを重ねたときに画像をわずかに拡大します。動きを付けてお客様の関心を引きたいときに有効です。

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

バッジ・ボタン

セールやお問い合わせを促すバッジと、カート追加・クイックビューなどのボタンを設定します。

セールバッジ：割引商品に表示するバッジの種類を選べます。
- 割引率を表示（例: -30%）：割引率を自動計算して表示します。
- テキストを表示：指定した文字（後述）を表示します。
- 非表示：バッジを表示しません。
セールバッジのテキスト：セールバッジを「テキストを表示」にしたときに使う文言です（例：SALE）。
セール価格の色：セール価格を強調する文字色です。目立たせたいときは赤系の色がおすすめです。
売り切れバッジのテキスト：在庫切れ商品に表示する文言です（例：売り切れ／Sold Out）。
ボタンのスタイル：カート追加ボタンの見た目を選べます。
- アウトライン：枠線のみのボタンです。
- 塗りつぶし：背景色を塗ったはっきりとしたボタンです。
- テキストのみ：文字だけのシンプルなボタンです。
- 非表示：カート追加ボタンを表示しません。
ボタンの角丸：ボタンの角の丸み（なし／小／中／ピル）を選べます。
カートに追加ボタンのテキスト：カート追加ボタンに表示する文言です（例：カートに追加）。
カート追加完了テキスト：カートに追加できたときに一時的に表示する文言です（例：追加しました！）。
クイックビューボタンを表示する：商品をクリックせずに詳細を確認できるクイックビューボタンの表示／非表示を切り替えます。
クイックビューボタンのテキスト：クイックビューボタンに表示する文言です。
もっと見るボタンのテキスト：表示上限を超えた商品を追加で読み込むボタンの文言です（例：もっと見る）。
詳細リンクのテキスト：クイックビュー内に表示する、商品ページへのリンク文言です（例：商品の詳細を見る）。
数量ラベルのテキスト：クイックビュー内の数量入力欄に付けるラベルです（例：数量）。