絞り込みを追加する

お客様がコレクションページや検索結果に表示される商品を絞り込めるように、Shopify Search & Discoveryアプリを使用してオンラインストア用の絞り込みを作成できます。たとえば、時計を販売しているストアの場合、ブランド名、価格、文字盤のサイズ、耐水性に関する絞り込みを作成できます。

要件

絞り込みが利用できるのは、Online Store 2.0のテーマ、およびオンラインストア用の絞り込みLiquid APIStorefront APIのいずれかを使用するカスタムストアフロントです。Online Store 2.0テーマで絞り込みを表示する方法についてはこちらをご覧ください。

使用しているテーマが絞り込みに対応していない場合でも、Shopify Search & Discoveryアプリ内で絞り込みを作成できます。ただし、お客様に対しては表示されません。

使用しているストアのテーマが絞り込みに対応しているかどうかを確かめるには、管理画面で [オンラインストア] > [メニュー] の順に移動します。使用しているテーマが絞り込みに対応していない場合は、[コレクションと検索の絞り込み] セクションにメッセージが表示されます。

絞り込みを追加する際の考慮事項

Shopify Search & Discoveryアプリを使用する場合は、以下の考慮事項を確認してください。

  • 5,000件を超える商品が追加されているコレクションでは、絞り込みは表示されません。大規模なコレクションは、絞り込みを表示できる小規模のコレクションに分割することを検討してください。たとえば、「女性向け」という単一のファッションコレクションを作成するのではなく、「トップス」、「ジーンズ」、「ブーツ」など、アパレルの種類に基づいた小規模なコレクションを作成することができます。
  • 100,000件を超える検索結果が表示される検索では、絞り込みは表示されません。
  • 1つの絞り込みには、ストアで最大100件の絞り込みの値を表示できます。絞り込みの値が100件以上存在する可能性がある場合、一部の値がお客様に表示されないことがあります。類似の値をグループ化することによって、表示する絞り込みの値の数を減らすことができます。絞り込みグループ1つに対して、固有の絞り込み値を最大50件まで設定でき、ストアに対して選択した絞り込みすべての設定で最大1,000件まで絞り込みグループを設定できます。
  • Shopify Search & Discoveryアプリでは、絞り込みに最大1,000件の絞り込み値が表示されます。ストア内の固有値をチェックするメタフィールドの数には制限があるため、メタフィールドの絞り込みの表示値は1,000件より少なくなります。絞り込みに表示される絞り込みの値が100件未満の場合、アプリに表示されない絞り込みの値も、ストアでお客様に表示されます。
  • [販売元][タグ] の絞り込み値には翻訳が提供されません。商品タグの絞り込みは、ストアのデフォルト言語で買い物をしているお客様にのみ表示されます。販売元の絞り込みの値は、常にストアのデフォルト言語に基づいて表示されます。
  • 絞り込みの値の翻訳は、オンラインストアで公開されている言語に基づいており、Shopify Marketsで設定されたマーケット向けの翻訳は表示されません。
  • 価格の絞り込みは、ショップのデフォルト通貨以外の通貨には表示されません。

絞り込みのタイプ

すべてのストアに同じ標準の絞り込みを表示できます。また、商品カタログ固有のカスタムの絞り込みを作成できます。標準の絞り込みとカスタムの絞り込みを組み合わせて、最大で25種類の絞り込みをストアに設定できます。

絞り込みの各ソースは、ストアの絞り込み用に1回のみ使用できます。たとえば、ストアで[価格] の絞り込みを有効にしている場合、[価格] はグレーアウトされ、新しい絞り込みのソースとして選択することはできません。

標準の絞り込み

[在庫状況][価格][商品タイプ][タグ][販売元] の標準の絞り込みは、すべてのストアで利用できます。

カスタムの絞り込み

カスタムの絞り込みを作成する場合は、商品オプション、メタフィールドメタオブジェクトのいずれかを使用します。

商品オプションの絞り込みは、商品バリエーションに基づいて設定します。たとえば、各種サイズのバリエーションがある衣料品を販売する場合は、商品オプションの「サイズ」の絞り込みを追加します。

メタフィールドやメタオブジェクトを使用して絞り込みをカスタマイズする

メタフィールドの絞り込みは、商品カタログ固有の絞り込みを作成する場合に役立ちます。たとえば、子供用玩具を販売する場合は、商品メタフィールドの絞り込みとして「年齢」をカスタム作成します。メタオブジェクトで視覚的な絞り込みを表示することにより、お客様に絞り込み条件を簡単に把握してもらえます。

メタフィールドやメタオブジェクトを使用すると、以下に記載されている値タイプに対してカスタムの絞り込みを作成できます。

  • 単一行のテキスト
  • 単一行のテキスト (リスト)
  • Integer
  • trueまたはfalse
  • メタオブジェクトリファレンス
  • メタオブジェクトリファレンス (リスト)

絞り込みとして使用するには、メタフィールドにメタフィールドの定義が必要です。メタフィールド定義を追加する方法はこちら

メタフィールドが設定されたら、絞り込みを編集するときに、メタフィールドをオプションとして選択できます。

絞り込みを編集する

  1. Shopify Search & Discoveryアプリで [絞り込み] に移動してから [絞り込みを追加] をクリックします。
  2. [ソース] フィールドをクリックし、お客様が利用できるようにする絞り込みソースを選択します。
  3. [値] セクションで、表示する絞り込み値を選択します。
  4. 任意:絞り込みの名前を変更します。
  5. 任意:絞り込みの挙動を変更します。
  6. 任意:絞り込みの値を選択し、1個の値としてグループ化します。
  7. [保存] をクリックします。

[絞り込み] セクションから絞り込みを並べ替えることもできます。個々の絞り込みをクリックして、お客様に表示する順番にドラッグします。

絞り込み名を変更する

ストア内の既存の絞り込みに設定されているお客様向けの名前は、変更することができます。

絞り込み名を変更しても、絞り込み元に関する情報は変更されません。たとえば、商品オプションを基準にして絞り込み名を変更しても、個々の商品ページに表示される各オプション名は変更されません。

手順:

  1. Shopify Search & Discoveryアプリで [絞り込み] に移動してから、名前を変更する絞り込みをクリックします。
  2. [ラベルを絞り込み] フィールドに、新しいラベルを入力します。
  3. [保存] をクリックします。

絞り込み値

ストアには、コレクションまたは検索結果の商品に適用される絞り込みの値のみが表示されます。

絞り込みの値にはさまざまな並び替えルールが適用され、メタフィールドの絞り込みを使用すると、並び替えと表示される値をより詳細に管理できます。

絞り込み値をグループ化する

複数の絞り込み値をグループ化すると、お客様に対して1個の絞り込み値として表示することができます。たとえば、「」の選択肢として「オニキス」、「エボニー」、「ミッドナイト」がある商品を扱っているとします。これらの値を「」という名前の1個の絞り込みにグループ化することができます。1個の絞り込みグループには、最大50個の固有の絞り込み値を設定でき、1件のストアに対しては、最大1,000個の絞り込みグループを設定できます。

手順:

  1. Shopify Search & Discoveryアプリで、[絞り込み] に移動して [絞り込みを追加] をクリックするか、既存の絞り込みの名前をクリックします。
  2. 任意:新しい絞り込みを追加する場合は、[ソース] フィールドをクリックし、お客様が利用できるようにする絞り込みソースを選択します。
  3. [値] セクションで、1個の絞り込み値としてグループ化する値を選択します。他の絞り込み値を探すには、検索バーを使用します。
  4. [グループを作成] をクリックします。
  5. グループの名前を入力します。これが、お客様に表示される1個の絞り込み値となります。
  6. [完了] をクリックします。
  7. [保存] をクリックして絞り込み設定を変更します。

絞り込みの値の並べ替え

絞り込みの値はデフォルトでアルファベットと数値の昇順で表示されます。たとえば、「靴の寸法」の商品オプションの絞り込みは最小値から最大値の順に表示されます。

60ワット」など数字で始まり単語で終わる絞り込みの値は、同じ単語で終わる値の絞り込みの値の横に表示されます。たとえば、絞り込みの値が「2年」、「6か月」、「3年」、「2か月」である「年数」の商品オプションの絞り込みは、以下の順序で並べ替えられます。

  • 2か月
  • 6か月
  • 2年
  • 3年

並べ替え順のカスタムは、「サイズ」という名前の絞り込みに適用され、一般的なサイズ用語が正しい順で表示されます。たとえば、「XS」 (極小) は「S」 (小) より前に表示されます。

ソート順をカスタマイズする

絞り込みの値にカスタマイズされたソート順を設定するには、事前に設定された選択肢がある単一行テキストメタフィールドを作成します。管理画面で設定した順序は、絞り込み値のソート順としてストアに表示されます。

以下の例では、「スキルレベル」メタフィールドの値が、「初級」、「中級」、「上級」の順に手動で並べ替えられています。

スキルレベルのオプションを初級、中級、上級の順に表示するメタフィールドエディタ

空の絞り込み値をカスタマイズする

お客様が購入可能な商品を見つけやすくするために、空の絞り込み値をリストの下部に移動したり、完全に非表示にしたりできます。これにより、お客様は条件と一致する結果の値に注目できます。たとえば、色とサイズが異なるTシャツを販売しているとします。「」以外のすべての色は在庫切れです。空の値を下部に移動すると、「」の絞り込みでは「」が最初に表示されます。空の値を非表示にすると、「」の絞り込みでは「」の選択肢だけが表示されます。

手順:

  1. Shopify Search & Discoveryアプリで、[設定] に移動します。
  2. [絞り込み] > [空の値] セクションで、以下のいずれかのオプションを選択します。

    • 空の絞り込み値を非表示にするには、[非表示にする] を選択します。すべての絞り込み値が空の場合、絞り込みは完全に非表示になります。
    • 空の絞り込み値を値リストの下部に移動するには、[最後に表示] を選択します。
    • デフォルトの並べ替えロジックで並べ替えた空の絞り込み値を保持するには、[デフォルトの順序で表示] を選択します。
  3. [保存] をクリックします。

絞り込みの値を除外する

お客様に表示する値を詳細に管理する必要がある場合は、ストアに表示する値のみを含むメタフィールドの絞り込みを使用できます。

たとえば、自動コレクションの条件や管理画面の商品リストの絞り込みなど、ストアフロントの絞り込み以外の目的で商品タグを使用することがあります。商品タグの絞り込みタイプの代わりに、単一行テキストまたはリストタイプメタフィールドタイプを使用できます。

視覚的な絞り込み

絞り込み値には、色やパターン、詳細な画像などの視覚的要素を含めることができます。たとえば、「布地の色」の絞り込みでは、絞り込み値ごとに小さな色見本を表示できます。

絞り込み値を使用してビジュアルを作成するには、メタフィールドメタオブジェクトを使用してストアのカスタムデータを設定します。その際、以下の要件を満たしている必要があります。

  • 絞り込み値の見本や画像の表示に対応したオンラインストアのテーマ。
  • 以下の基準を満たすメタオブジェクト。

    • 画像が付いた1つ以上のフィールドまたはファイルフィールド。どちらのフィールドも1つの値にのみ対応でき、値のリストには対応していません。
    • 絞り込み値に名前を付けるフィールド。1つの値のみを許可する必要があり、値のリストを絞り込み名として使用することはできません。このフィールドは、以下のいずれかのタイプにすることができます。
      • 単一行のテキスト
      • 小数
      • 整数
      • boolean (trueまたはfalse)
  • 以下の基準を満たすメタフィールド定義。

    • 定義は商品またはバリエーションに対して行われます。
    • メタフィールドタイプはメタオブジェクトであり、前のステップで作成したメタオブジェクト定義を参照します。
    • メタフィールドで、1つのエントリーまたはメタオブジェクトのエントリーのリストを許可するかどうかを設定します。
  • メタオブジェクト定義とメタフィールド定義の両方で、ストアフロントアクセスを有効にする必要があります。

視覚的な絞り込みのベストプラクティス

商品バリエーションを絞り込むことにより、検索結果とコレクションページ上のより関連性が高いバリエーションへのリンクが可能になります。たとえば、赤色の見本をクリックすると、赤色の商品のみが表示されます。バリエーションレベルの絞り込みを活用するには、メタオブジェクトリファレンスにバリエーションのメタフィールドを使用します。絞り込みにとって特定のバリエーションへのリンクが重要ではない場合は、代わりに商品のメタフィールドを使用してください。

色見本のメタオブジェクト定義には、色フィールドと画像フィールドの両方が必要です。両方の値を指定する必要はありませんが、これにより、将来いずれかのフィールドを使用できるようになります。

商品やバリエーションに絞り込みが可能な複数の色がある場合、メタフィールドの定義を設定してエントリーのリストを許可します。これにより、複数のメタオブジェクトエントリーを1つのアイテムに割り当てることができ、各メタオブジェクトエントリーがストアに絞り込み値として表示されます。

ステップ:

ストアの商品またはバリエーションにメタフィールドを割り当てた後、オンラインストアの絞り込みを設定できます。

  1. ShopifyのSearch & Discoveryアプリで、[絞り込み] に移動します。
  2. [絞り込みを追加] または既存の絞り込みをクリックします。
  3. [ソース] フィールドをクリックし、メタオブジェクトリファレンスがあるメタフィールドの絞り込みを選択します。
  4. [オプションを表示] をクリックします。
  5. メタフィールドを選択して、絞り込み値のラベルフィールドを設定します。
  6. [イメージを追加する] にチェックを入れ、ビジュアルスタイルを選択します。
    • 小さな色見本やパターンには、[見本] を選択します。以下を選択して、見本の内容を設定してください。
      • 見本の色の色フィールド。
      • 見本パターンの画像フィールド。

- アイコンやロゴなど、トリミングしないグラフィックについては、[画像] を選択します。[画像] の画像フィールドを選択して、内容を設定してください。

絞り込みの仕組み

コレクションページ上の商品または検索結果上の商品に適用できる絞り込みのみ表示されます。

および」条件を使用すると、複数の絞り込みから絞り込み値を選択でき、これによって表示される商品の数が減らすことができます。たとえば、「」の絞り込みで「」、「サイズ」の絞り込みで「8」を選択すると、赤でサイズが8の商品が返されます。

デフォルトでは、「または」条件を使用すると、同じ絞り込みから絞り込み値を選択でき、これによって結果の件数が増える場合があります。たとえば、「」の絞り込み値として「」と「」を選択すると、赤または緑の商品がすべて返されます。特定の絞り込みのタイプでは、代わりに「および」条件を絞り込み値に対して使用できます。Shopify Search & Discoveryアプリを使用すると、絞り込みの挙動のカスタマイズ方法を確認できます。

表示される商品の数は、絞り込みが商品レベルであるか、バリエーションレベルであるかによって異なります。たとえば、お客様が商品オプションの絞り込みから複数の色の値を選択しても、1つの商品しか表示されないことがあります。これは、商品オプションがバリエーションレベルの絞り込みであり、すべての色がその1つの商品のバリエーションに属している場合に生じます。

絞り込みの挙動をカスタマイズする

商品タグ、メタフィールドリスト、メタオブジェクトリファレンスリストの絞り込みでは、絞り込み値の条件として、デフォルトの「または」条件もしくは「および」条件を選択できます。たとえば、「および」絞り込みを使用して、商品タグの絞り込みで「新しい」と「セール」を選択すると、この両方のタグが付いている商品のみが返されます。

手順:

  1. Shopify Search & Discoveryアプリで [絞り込み] に移動してから [絞り込みを追加] をクリックします。
  2. [ソース] フィールドをクリックし、お客様が利用できるようにする絞り込みソースを選択します。
  3. [ロジック] セクション内の絞り込み値に適用する挙動を選択します。
  4. [保存] をクリックします。

翻訳を絞り込む

絞り込みのラベル、値、グループは、ストアが対応している他の言語に翻訳することができます。この翻訳には、Shopify Translate & Adaptなどの翻訳アプリを使用します。

絞り込み用に翻訳された内容がない場合は、ストアのデフォルトの言語が使用されます。

絞り込み値は、商品と商品バリエーションの翻訳内容を基準としています。

絞り込み値の数は、言語に応じて変化する場合もあります。たとえば、ストアのデフォルトの言語は英語で、対応言語としてフランス語も追加しているとします。「」の絞り込み値には、「Brown (茶色)」という値があります。英語には茶色を意味する共通語が1つ、フランス語には共通語が2つあります。翻訳アプリを使用すると、ストアにある商品の「Brown (茶色)」という絞り込み値が、自動的に「Brun (茶色)」または「Marron (茶色)」に翻訳されます。ストアフロントの絞り込みでは、英語の場合は「」の絞り込みで茶色に対して1つの値が表示され、フランス語の場合は茶色に対して2つの値が表示されます。

各絞り込み値に対する翻訳を1つのみにするには、翻訳アプリで商品の翻訳内容を編集する必要があります。

マーケットの言語

絞り込み値の翻訳は、特定マーケットの言語設定の追加インスタンスには対応していません。たとえば、オンラインストアでのフランス語の商品翻訳については、カナダとフランスのマーケット向けに、2件のフランス語翻訳を追加できます。この場合は、お客様が特定マーケットでフランス語で買い物している場合でも、すべての絞り込み値は一般的なフランス語が基準となります。

絞り込みラベルと絞り込みグループは、特定マーケット向けの言語翻訳に対応しています。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す