Shopifyでコレクションページに絞り込み・検索・並び替えを追加できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/01

はじめに

Shopify は、世界中の店舗が使っているネットショップ作成サービスです。管理画面から商品登録・決済・配送までをひとつにまとめて運営でき、専用の「アプリ」を追加することで、コーディングをせずにストアに新しい機能を足すことができます。

「シンプル商品絞り込みカスタマイズ｜コレクション検索・並び替え」は、コレクションページ（商品一覧ページ）に 絞り込みバー・キーワード検索・並び替えメニュー を追加するアプリです。価格・商品タイプ・ブランド・タグ・在庫状況・商品オプション（カラーやサイズなど）・メタフィールドといった多彩な条件で商品を絞り込めるほか、新着順や割引率順、メタフィールドを使ったカスタム並び替えにも対応しています。レイアウトはドロップダウン・サイドバー・モーダルの3種類から選べるので、テーマのデザインを崩さずに設置できます。

料金は月額 $14.99（年払いなら $149.99 で実質2ヶ月分お得）で、インストールから7日間は無料でお試しいただけます。アプリの詳細・レビューは Shopify アプリストアのシンプル商品絞り込みカスタマイズ｜コレクション検索・並び替えから確認できます。

コレクションページにお手軽に絞り込み・検索・並び替えを追加できるアプリ

「シンプル商品絞り込みカスタマイズ」でできること

このアプリでできることは、大きく分けて次の5つです。

価格・商品タイプ・ブランド・タグ・在庫状況・商品オプション・メタフィールドで絞り込みできます。
コレクション内の商品をキーワードでその場検索できます。
新着順・売れ筋順・割引率順・メタフィールドなど多彩な並び替えができます。
ドロップダウン・サイドバー・モーダルの3種類のレイアウトから選べます。
管理画面とテーマエディタの両方からデザインと表示項目を自由にカスタマイズできます。

価格・タグ・メタフィールドまで絞り込める柔軟なフィルター機能

「絞り込み」設定画面から、価格帯・商品タイプ・ブランド（販売元）・タグ・在庫状況といった標準的な項目に加えて、商品オプション（カラーやサイズなど）やメタフィールド・メタオブジェクトを使った独自の絞り込み項目まで追加できます。

メタフィールド・メタオブジェクトで絞り込み・並び替え

コレクション内の商品をキーワードですぐに検索できる

コレクションページ内で表示されている商品を、商品名でその場検索できます。絞り込みと組み合わせて使うこともでき、絞り込みと検索は常に AND 条件で適用されます（例：「タグで絞り込んでからキーワードでさらに絞る」）。検索の入力中はテキスト欄のフォーカスが維持されるため、1文字入力するたびに入力欄から手が離れる、といったことはありません。

ドロップダウン・サイドバー・モーダルの3レイアウトから選べる

絞り込み・検索・並び替え UI は、テーマに設置するブロックの種類によって「ドロップダウン型」「サイドバー型」「モーダル型」の3レイアウトから選べます。ストアのデザインやコレクションページの構成に合わせて選択できます。

ドロップダウン型のフィルターバーを表示できる

サイドバー型で絞り込み・検索・並び替えを表示できる

モーダル型でフィルターと検索をコンパクトに表示

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

管理画面の「設定」画面からテーマを選んで「テーマに追加」をクリックするだけで、コレクションページに絞り込みバーが自動的に設置されます。

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

アプリのインストール

Shopify アプリのインストールは、どのアプリでも共通の手順です。

Shopify 管理画面の左下にある「設定」を開きます。
設定メニューから「アプリと販売チャネル」を開きます。すでにインストール済みのアプリが一覧で表示され、右上に「Shopify App Store」ボタンがあります。
「Shopify App Store」を開き、検索欄に「シンプル商品絞り込みカスタマイズ」または「filter search sort」と入力します。
検索結果からアプリを開き、「アプリを追加する」を押します。
表示される権限（アクセススコープ）の確認画面で内容を確認し、「アプリをインストール」を押すとインストールが完了します。

インストールが完了すると、左メニューの「アプリ」欄にアプリ名が追加され、管理画面からいつでも開けるようになります。

まず最初にやる設定

インストール直後は、テーマにまだ絞り込み・検索・並び替え UI が設置されていない状態です。ストアフロントに表示させるまでの最短ルートは次の3手順です。

アプリの管理画面を開き、「設定」ページへ進みます。
「テーマを選択」で追加先のテーマを選びます（公開中のテーマがデフォルトで選択されています）。
「テーマに追加」を押します。テーマエディタが新しいタブで開き、コレクションページに ドロップダウン型 の絞り込みバーが追加された状態でプレビューされるので、内容を確認して右上の「保存」を押します。

設定画面。テーマを選択する欄と「テーマに追加」「テーマをプレビュー」ボタン、アプリブロックの自動追加に関する注意バナー、言語設定が並ぶ

🚨 「テーマに追加」で追加されるのは、常にドロップダウン型のブロックです。 サイドバー型やモーダル型を使いたい場合は、「ストアフロントの設定」の章で紹介する手順で、テーマエディタから該当のブロックに手動で差し替えてください。

🚨 テーマのバージョンによっては、「テーマを選択」の選択欄が空欄になったり、自動追加がうまく反映されない場合があります。その場合も同様に、テーマエディタから手動でブロックを追加してください。

管理画面でできること

アプリの管理画面には5つのページがあります。トップの「ダッシュボード」には「絞り込み」「並び替え」への導線カードが並びます。

管理画面のダッシュボード。絞り込みカードと並び替えカードが縦に並ぶ

ページ	内容
ダッシュボード（`/app`）	「絞り込み」「並び替え」への導線カードのみ
絞り込み（`/app/filter`）	絞り込み項目の追加・編集・並び替え
並び替え（`/app/sort`）	並び替え項目の追加・編集・並び替え
設定（`/app/settings`）	テーマへの追加・言語設定
よくある質問（`/app/faq`）	FAQ の一覧表示（日本語かつ登録がある場合のみサイドバーに表示）

絞り込み項目を管理する

「絞り込み」画面では、ストアフロントに表示する絞り込み項目を追加・編集・並び替えできます。表を「ラベル・ソース・タイプ」の3列で一覧表示し、行をクリックすると詳細設定が展開されます。

絞り込み画面。ラベル・ソース・タイプの3列で項目が一覧表示され、右上に「すべての項目を編集」「絞り込みを追加」ボタンがある

絞り込み項目を追加する

画面右上の「絞り込みを追加」をクリックすると、「ソースを選択」モーダルが開きます。追加できる項目は3種類です。

種別	追加できる数	内容
標準フィルター	各1つまで	価格・商品タイプ・ブランド・タグ・在庫状況（すでに追加済みの種類は選択肢から自動的に除外されます）
商品オプション	複数追加可	商品に登録されているオプション（カラー・サイズなど）を絞り込み項目にする
商品メタフィールド	複数追加可	Shopify のメタフィールド定義から選んで絞り込み項目にする

絞り込みのソース選択モーダル。名前とタイプの一覧から選んで追加する

追加した項目は一覧の末尾に追加され、そのまま詳細設定が開いた状態になります。

各項目でできる設定

一覧の各行をクリックすると詳細設定が展開されます（右上の「すべての項目を編集」を押すと全項目をまとめて展開できます）。

絞り込み項目の詳細設定。表示ラベル・選択方式・絞り込み条件の入力欄

絞り込み項目の詳細設定の続き。表示フィールド・絞り込み方式・非表示にする値の入力欄

設定項目	内容
表示ラベル	ストアフロントに表示する項目名を自由に変更できます（最大50文字、文字数カウント表示あり）
選択方式	「複数選択（チェックボックス）」または「単一選択（ラジオボタン）」を選べます（価格・範囲指定中の項目を除く）
絞り込み条件	複数選択時、「OR（少なくとも一つ）」または「AND（すべて）」を選べます
表示フィールド（メタフィールドのみ）	寸法・重量・評価・金額・メタオブジェクト参照など、値が複数の要素を持つメタフィールドで、どの値を表示するか選べます（例: 寸法・重量・金額は「値＋単位（デフォルト）」「値のみ」「単位のみ」、メタオブジェクト参照は参照先の特定フィールドを選択）
絞り込み方式（数値メタフィールドのみ）	「値の一覧から選択」または「数値の範囲で指定（最小〜最大）」を選べます
非表示にする値	タグ・商品タイプ・ブランド・オプション・メタフィールドの各項目で、ストアフロントに表示したくない値を検索して除外できます（内部用タグやテスト商品の非表示に便利です。価格・在庫状況には設定できません）

並び替え・有効化・削除

各行の左端のハンドルをドラッグすると、ストアフロントでの表示順を並び替えられます
目のアイコンで有効／無効を切り替えられます（無効にした項目はストアフロントに表示されません）
ゴミ箱アイコンで削除できます（標準フィルターは削除後も「絞り込みを追加」から再追加できます）

設定を変更すると画面下部と管理画面上部の両方に保存バーが表示されるので、「保存する」で反映してください。「キャンセル」を押すと変更前の状態に戻せます。

Shopify 管理画面側でフィルター設定済みのメタフィールドは、このアプリ側の設定をしなくてもストアフロントに自動で表示されます。

並び替え項目を管理する

「並び替え」画面では、コレクションページの並び替えメニューに表示する項目を設定します。操作方法は絞り込み画面と共通です。

並び替え画面。おすすめ順・価格低い順・価格高い順・新しい順・古い順・ベストセラー・アルファベット順(A-Z/Z-A)・メタフィールドの一覧

並び替え項目を追加する

「並び替えを追加」を押すとソース選択モーダルが開きます。

種別	内容
標準並び替え	おすすめ順（手動並び順）・価格が安い/高い順・新着順・古い順・売れ筋順・商品名 A→Z / Z→A の8種類（Shopify ネイティブの並び替えのためサーバー側で高速処理）
拡張並び替え	割引率が大きい順・在庫あり優先（クライアント側で計算）
商品メタフィールド	メタフィールド定義から選んで並び替え項目にする（何個でも追加可）

並び替えのソース選択モーダル。割引率が大きい順・在庫あり優先などの拡張項目とメタフィールド項目が並ぶ

メタフィールド並び替えの詳細設定

メタフィールドを使った並び替え項目では、以下を指定できます。

メタフィールド並び替えの詳細設定。表示ラベル・値の型・並び順・ソート対象フィールドの入力欄

設定項目	内容
値の型	数値・テキスト・日時から選択（型に応じて正しく並び替えます）
並び順	昇順・降順
ソート対象フィールド	メタオブジェクト参照など複数の値を持つメタフィールドの場合、並び替えに使う値を選択します

並び替え・有効化・削除・デフォルト

ドラッグ＆ドロップで表示順を並び替えられます
目のアイコンで有効／無効の切り替え、ゴミ箱アイコンで削除ができます

🚨 デフォルトの並び替え順を選ぶ専用の欄はありません。 保存時に、一覧の一番上にある有効な項目が自動的にデフォルトとして採用されます。特定の順番を初期表示にしたい場合は、その項目を一番上にドラッグしてから保存してください。

テーマへの追加導線・言語設定

「設定」画面には、次の2つのセクションがあります（画面は「まず最初にやる設定」の章を参照）。

セクション	内容
テーマに検索・絞り込み・並び替え機能を追加	テーマ選択とワンクリック追加・プレビューの機能
言語設定	管理画面の表示言語を20言語から選択できます

言語設定はサーバーには保存されません。選択した言語はブラウザの localStorage に保存され、次回以降そのブラウザで管理画面を開いたときに優先的に適用されます。別のブラウザや端末で開く場合は、あらためて選び直してください。

なお、日本語環境では「テーマに追加」の下に、自動追加が失敗した場合の案内バナーが表示されます。困ったときは画面右下の「ご利用ガイド」もあわせてご確認ください。

ストアフロントのデザイン設定（テーマエディタ）

絞り込み・検索・並び替えの見た目は、テーマエディタで各ブロックの設定から調整します。このアプリには、置き方の異なる4種類のブロックが用意されています。

ブロック名	種別	特徴
自動挿入｜シンプル商品絞り込みカスタマイズ	App Embed（サイト全体に1つだけ設置）	コレクションページを自動検出して UI を挿入。「UIタイプ」設定でドロップダウン／モーダル／サイドバーを切り替えられる
ドロップダウン｜シンプル商品絞り込みカスタマイズ	App Block（コレクションテンプレート専用）	商品グリッドの上部に検索・絞り込み・並び替えを横並びで表示。「テーマに追加」で自動追加されるのはこのブロック
サイドバー｜シンプル商品絞り込みカスタマイズ	App Block（コレクションテンプレート専用）	商品グリッドの横にサイドバー形式で絞り込みを表示
モーダル｜シンプル商品絞り込みカスタマイズ	App Block（コレクションテンプレート専用）	ボタンをクリックすると絞り込み・検索がモーダルで開く

テーマへの追加方法

Shopify 管理画面で「オンラインストア」→「テーマ」→「テーマを編集する」を開きます。
上部の「ホームページ」（テンプレート選択）からコレクションページのテンプレートへ移動します。
特定のレイアウトを固定で置きたい場合は、コレクションテンプレート内の「アプリを追加」から「ドロップダウン｜シンプル商品絞り込みカスタマイズ」「サイドバー｜シンプル商品絞り込みカスタマイズ」「モーダル｜シンプル商品絞り込みカスタマイズ」のいずれかを選んで追加します。
サイト全体に自動で適用したい場合は、左上のアイコンから「埋め込みアプリ」を開き、「自動挿入｜シンプル商品絞り込みカスタマイズ」のトグルを有効にして、「UIタイプ」でレイアウトを選びます。
表示を確認し、右上の「保存」をクリックします。

「自動挿入｜シンプル商品絞り込みカスタマイズ」はコレクションページを自動検出して UI を挿入する App Embed です。あとから「UIタイプ」の設定を変えるだけでレイアウトを切り替えられるので、色々なレイアウトを試したい場合に向いています。専用の App Block（ドロップダウン／サイドバー／モーダル）は、コレクションテンプレート内の特定の位置に固定して配置したい場合に向いています。

全ブロック共通の設定

ブロックの種類によって設定項目は少しずつ異なりますが、共通する部分も多くあります。設定名は実際のテーマエディタに表示される名称です。

グループ	主な設定項目
一般	検索・絞り込み・並び替えの表示ON/OFF、商品数表示、0件メッセージ、アクセント色・テキスト色・背景色、文字サイズ
検索	プレースホルダー、検索ボタン文言、検索ラベル、商品数の単位、検索枠線色、検索背景色
絞り込み	クリアボタン文言、最小/最大ラベル（価格帯フィルター用）、チェック色・未チェック背景・チェック間隔
並び替え	並び替えラベル（並び順ラベル）
ページネーション	表示件数、ページネーションのターゲット要素、配置・丸み・高さなどの見た目、通常時／アクティブ時／前後ボタンの色
その他	余白調整、追加CSS

ページネーションについて: 「ページネーションのターゲット要素」にテーマのページネーションを示す CSS セレクタ（例: .pagination）を指定すると、そのページネーションがそのまま使われます。0（未指定）や、該当する要素が見つからない場合は、自動的に無限スクロール（下までスクロールすると次のページの商品が追加表示される方式）に切り替わります。「表示件数」を0に設定すると、テーマ本来の表示件数がそのまま適用されます。

自動挿入ブロックの設定

App Embed としてサイト全体に適用するブロックです。共通設定に加えて、以下を設定できます。

自動挿入ブロックの設定パネル全体。一般・検索・絞り込み・並び替え・ページネーション・追加CSSまで一通り表示されている

設定項目	内容
UIタイプ	ドロップダウン・モーダル・サイドバーから表示レイアウトを選択
モーダルボタン	モーダル選択時のボタン文言
モーダル位置	モーダル選択時、画面のどちら側から開くか（左/右）
ボタン配置	モーダルボタンの配置（左/中央/右）
適用モード	モーダル内で絞り込みを選択した際、自動で反映するか、ボタンで確定するかを選択
サイドバー幅	サイドバー選択時の幅（180〜360px、初期値280px）
検索を有効・絞り込みを表示・並び替えを表示	それぞれの表示をON/OFFできます
重なり順	絞り込み UI が他の要素の下に隠れてしまう場合に数値を大きくします

ドロップダウン型ブロックの設定

商品グリッドの上部に検索・絞り込み・並び替えを横並びで表示するブロックです。共通設定に加えて、以下を設定できます。

ドロップダウン型のフィルターバーを表示できる

ドロップダウン型ブロックの設定パネル全体。一般・検索・絞り込み・並び替え・ページネーション・その他まで一通り表示されている

設定項目	内容
並び替え・商品数の配置	検索欄の右／絞り込みの右のどちらに表示するか
並び替え・商品数の順番	商品数を先に表示するか、並び替えを先に表示するか
絞り込みボタンのスタイル	絞り込み枠線色・絞り込み枠線の丸み・絞り込みボタンの高さ・内側余白（上下/左右）
並び替えのスタイル	並び替え枠線色・並び替え枠線の丸み・内側余白（上下/左右）、商品数表示の高さ、商品数と並び替えの間隔
重なり順	他の要素の下に隠れてしまう場合に数値を大きくします

サイドバー型ブロックの設定

商品グリッドの横にサイドバー形式で絞り込みを表示するブロックです。共通設定に加えて、以下を設定できます。

サイドバー型で絞り込み・検索・並び替えを表示できる

設定項目	内容
サイドバー幅	180〜360px の範囲で指定
スマホ用ボタンテキスト・配置	スマホ表示時、絞り込みを開くボタンの文言と配置（左/中央/右）
スマホ用モーダル位置	スマホでボタンをタップした際に開くパネルの位置（左/右）
スマホ用商品数の位置	ボタンの左／右のどちらに商品数を表示するか

モーダル型ブロックの設定

ボタンをクリックすると絞り込み・検索がモーダルで開くブロックです。共通設定に加えて、以下を設定できます。

モーダル型でフィルターと検索をコンパクトに表示

モーダル型ブロックの設定パネル全体。一般・検索・絞り込み・並び替え・ページネーション・その他まで一通り表示されている

設定項目	内容
ボタンテキスト	モーダルを開くボタンの文言
表示位置	画面のどちら側から開くか（左/右）
ボタン配置	ボタンの配置（左/中央/右）
適用モード	絞り込みを自動反映するか、ボタンで確定するか
商品数の位置	ボタンの左／右のどちらに商品数を表示するか

こんなときはこう設定する

シンプルに見せたい場合: ドロップダウン型を選び、検索・並び替えの表示をONにしたまま「並び替え・商品数の順番」を「商品数 → 並び替え」にすると、情報量を抑えつつ必要な操作だけをコンパクトにまとめられます。
絞り込み項目が多いストアの場合: サイドバー型を選ぶと、絞り込み項目を縦に並べて表示できるため、多くの条件を一覧しながら組み合わせて絞り込みやすくなります。
モバイル中心のストアの場合: モーダル型、またはサイドバー型のスマホ用ボタンを活用すると、画面が狭くても絞り込み UI が邪魔になりません。
1ページに何百点も商品があるストアの場合: 「ページネーションのターゲット要素」を空欄のままにしておくと自動的に無限スクロールになるため、ページ送りの操作をお客様にさせずに済みます。

うまく表示されないときは

絞り込み・検索・並び替えのUIがコレクションページに出ない

「テーマに追加」による自動追加は、テーマのバージョンによってはうまく反映されない場合があります。その場合は、「ストアフロントのデザイン設定」の章の手順で、テーマエディタから該当ブロックを手動で追加してください。また、追加した先がコレクションページのテンプレートか（ホームページなど別のテンプレートに追加していないか）もあわせて確認してください。

意図せずページネーションが無限スクロールになる

「ページネーションのターゲット要素」に指定した CSS セレクタが、実際のテーマのページネーション要素と一致していないと、自動的に無限スクロールへ切り替わります。ボタン式のページネーションを維持したい場合は、テーマのページネーション要素のセレクタ（例: .pagination）を正しく指定してください。

絞り込みの選択肢に表示したくない値が出てしまう

「絞り込み」設定画面の各項目にある「非表示にする値」から、内部用タグやテスト商品などを検索して除外できます。ただし、在庫状況と価格の2種類は除外の対象外です（2値のみ、または範囲指定のため）。

初期表示の並び順が意図したものと違う

「並び替え」設定画面には、デフォルトの並び替えを直接選ぶ欄がありません。一覧の一番上にある有効な項目が保存時に自動的にデフォルトとして採用される仕様のため、初期表示にしたい項目を一番上にドラッグしてから保存してください。

Shopify での絞り込み・検索・並び替えアプリ活用に関するよくある質問

絞り込みのレイアウトを変更したいときは

管理画面に「レイアウトを切り替える」設定はありません。レイアウト（ドロップダウン／サイドバー／モーダル）は、テーマエディタでどのブロックを配置するかによって決まります。変更したい場合は、「ストアフロントのデザイン設定」を参考に、別のブロックへ差し替えるか、自動挿入ブロックの「UIタイプ」設定を切り替えてください。