Shopify Search & Discoveryを使用したフィルターの追加

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

要件

フィルターは、互換性のあるテーマ、およびオンラインストアにLiquid APIのフィルターまたはStorefront APIのいずれかを使用するカスタムストアフロントで利用できます。互換性のあるテーマでのフィルターの表示方法をご確認ください。

テーマがフィルターに対応していない場合でも、Shopify Search & Discoveryアプリでフィルターを作成することはできますが、お客様には表示されません。

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

フィルターを追加するための考慮事項

Shopify Search & Discoveryアプリを使用する際は、以下の点にご注意ください。

  • 5,000点を超える商品を含むコレクションでは、フィルターは表示されません。大規模なコレクションは、フィルターを表示できる小規模なコレクションに分割することを検討してください。たとえば、レディースファッションのコレクションを1つ作成する代わりに、トップスジーンズブーツなどのアパレルの種類に基づいて小規模なコレクションを作成できます。
  • 100,000件を超える結果が生成される検索では、フィルターは表示されません。
  • ストアでは、1つのフィルターに最大100件の絞り込み値を表示できます。フィルターに100件を超える絞り込み値がある場合、一部の値は表示されません。類似の値をグループ化することで、絞り込み値の数を減らすことができます。1つのフィルターグループには最大200件の固有の絞り込み値を含めることができ、ストア全体では、選択したすべてのフィルター設定で最大1,000個のフィルターグループを使用できます。
  • Shopify Search & Discoveryアプリでは、1つのフィルターに最大1,000件の絞り込み値が表示されます。ストア内の固有の値をチェックできるメタフィールドの数には上限があるため、メタフィールドフィルターでは1,000件未満の値しか表示されない場合があります。フィルターで表示される絞り込み値が100件未満の場合、アプリに表示されない絞り込み値でもストアのお客様に表示されることがあります。
  • 販売元タグの絞り込み値の翻訳には対応していません。商品タグのフィルターは、ストアのデフォルト言語で買い物をしているお客様にのみ表示されます。販売元の絞り込み値は、常にストアのデフォルト言語に基づきます。
  • 絞り込み値の翻訳は、オンラインストアで公開されている言語に基づいており、海外販売ツールで設定されたマーケットの翻訳は表示されません。
  • 価格フィルターは、ストアのデフォルト通貨以外の通貨では表示されません。

フィルターの種類

すべてのストアで同じ標準フィルターを表示でき、商品カタログに固有のカスタムフィルターを作成することもできます。ストアには、標準フィルターとカスタムフィルターを組み合わせて、最大25個のフィルターを設定できます。

各フィルターソースは、ストアのフィルターに1回しか使用できません。たとえば、ストアで価格フィルターを有効にしている場合、価格はグレー表示になり、新しいフィルターのソースとして選択できなくなります。

標準フィルター

すべてのストアで、販売状況カテゴリー価格商品タイプタグ販売元の標準フィルターを利用できます。

カスタムフィルター

カスタムフィルターは、ストアで使用されている商品のオプション、メタフィールド、またはメタオブジェクトに基づいています。

商品オプションフィルター

商品オプションフィルターは、商品に追加したオプションに基づいています。

たとえば、アパレル商品に「S」、「M」、「L」などの値を持つ「サイズ」の商品オプションを追加した場合、Search & Discoveryアプリで、対応する「サイズ」という商品オプションフィルターが選択できるようになります。

商品メタフィールドフィルター

商品メタフィールドフィルターは、ストアのすべての商品に割り当てられている商品メタフィールドに基づいています。

カテゴリーメタフィールドフィルター

カテゴリーメタフィールドフィルターは、特定の商品カテゴリーに割り当てられている商品メタフィールドに基づいています。

バリエーションメタフィールドフィルター

バリエーションメタフィールドフィルターは、ストアのすべての商品バリエーションに割り当てられている商品バリエーションメタフィールドに基づいています。

標準の商品属性

Shopify の標準商品タクソノミーから派生した標準の商品属性は、商品にカテゴリーを割り当てると、商品メタフィールドの定義として自動的に作成されます。関連付けられたメタフィールドはメタオブジェクト参照です。対応するメタオブジェクト定義は標準であるため変更できず、フィールドの追加、削除、編集は行えません。フィールドの 1 つには、タクソノミー参照値が含まれています。

Search & Discovery アプリでは、これらの属性のソースは、以下のいずれかのオプションとして表示されます。

メタフィールドフィルター

カテゴリー、商品、バリエーションのいずれのメタフィールドであっても、すべてのメタフィールドフィルターはメタフィールドの定義に基づいています。メタフィールドの定義を追加する方法をご確認ください。以下の値のタイプでメタフィールドフィルターを作成できます。

  • 1行のテキスト
  • 1行のテキスト (リスト)
  • 小数
  • 整数
  • Trueまたはfalse
  • メタオブジェクト参照
  • メタオブジェクト参照 (リスト)

商品やバリエーションにメタフィールドを設定した後、フィルターを編集する際に、メタフィールドの定義をフィルターとして選択できます。

フィルターの編集

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックしてから、[フィルターを追加] をクリックします。

  3. [ソース] フィールドをクリックし、お客様が利用できるようにするフィルターソースを選択します。

  4. 任意:フィルターの名前を変更します

  5. 任意:フィルターの動作を変更します

  6. 任意:表示形式を変更します

  7. 任意:1 つの値としてグループ化する絞り込み値を選択します。

  8. 任意:絞り込み値を並べ替えます

  9. [保存] をクリックします。

[フィルター] セクションで、フィルターを並べ替えることもできます。個々のフィルターをクリックしてドラッグし、お客様に表示したい順序に並べます。

フィルターの名前変更

ストア内の既存のフィルターについて、お客様に表示される名前を変更できます。

フィルター名を変更しても、フィルターのソースに関する情報は変更されません。たとえば、商品オプションに基づくフィルターの名前を変更しても、個別の商品ページに表示されるそのオプションの名前は変更されません。

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックしてから、名前を変更するフィルターをクリックします。

  3. [フィルターラベル] フィールドに、新しいラベルを入力します。

  4. [保存] をクリックします。

絞り込み値

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

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

絞り込み値のグループ化

複数の絞り込み値をグループ化して、お客様に単一の絞り込み値として表示することができます。たとえば、OnyxEbonyMidnightを含むのオプションがある商品の場合、これらの値をBlackという名前の1つのフィルターにグループ化できます。フィルターグループには最大 200 個の固有の絞り込み値を含めることができ、ストアには最大 1,000 個のフィルターグループを作成できます。

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックし、[フィルターを追加] をクリックするか、既存のフィルターの名前をクリックします。

  3. フィルターが標準の商品属性に基づいている場合は、[値を管理] をクリックしてオプションを選択します。標準の商品属性フィルターのグループ化について、詳しくはこちらをご覧ください。

  4. [値] セクションで、単一の絞り込み値としてグループ化する値を選択します。検索バーを使用すると、さらに多くの絞り込み値を見つけることができます。

  5. [グループを作成] をクリックします。

  6. グループの名前を入力します。これは、お客様に表示される単一の絞り込み値になります。

  7. [完了] をクリックします。

  8. [保存] をクリックします。

標準の商品属性フィルターのグループ化

標準の商品属性に基づくフィルターには、独自のグループ化機能があります。この機能には、[値を管理] をクリックしてアクセスでき、[自動] または [手動] のいずれかのグループ化オプションを選択できます。

  • 自動:値は、タクソノミーの基本値に基づいて自動的にグループ化されます。たとえば、色のフィルターにLight redBurgundyRubyが含まれている場合、それらはすべて基本値であるRedにグループ化されます。グループのラベルと見本はカスタマイズできますが、値の追加や削除はできません。
  • 手動:値は最初にグループ化されておらず、上記の手順に基づいてグループ化できます。

制限事項

カテゴリーフィルターは、グループ化をサポートしていません。

絞り込み値の並べ替え

ストアのニーズに最も合う方法で、絞り込み値を並べ替えることができます。2種類の並べ替え順序が用意されています。

自動並べ替え

絞り込み値は、デフォルトで、アルファベット順と数字順の両方で昇順に表示されます。たとえば、靴のサイズの商品オプションフィルターでは、値が小さいものから大きいものへの順で表示されます。

60 ワットのように、数字で始まり単語で終わる絞り込み値は、同じ単語で終わる絞り込み値の隣に表示されます。たとえば、絞り込み値が2 years6 months3 years2 monthsである年齢という商品オプションフィルターは、以下の順序で並べ替えられます。

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

サイズ」という名前のフィルターにはカスタムの並び順が適用されるため、一般的なサイズの用語が正しい順序で表示されます。たとえば、XS (エクストラスモール) はS (スモール) の前に表示されます。

新しい絞り込み値は自動的に並べ替えられます。

手動での並べ替え

手動での並べ替えでは、絞り込み値の表示順を選択できます。手動の並び順を保存した後、並び順を更新するまで、新しい絞り込み値はリストの最後に表示されます。

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックし、既存のフィルターを選択するか、新しいフィルターを作成します。

  3. [並べ替え] で、[手動] を選択します。

  4. 値をドラッグして並べ替えます。または、複数の値を選択して [一番上に移動] または [一番下に移動] をクリックすると、まとめて位置を変更できます。

  5. 任意:[自動で並べ替え] をクリックして Shopify Magic で並べ替えます

  6. [保存] をクリックします。

Shopify Magic での並べ替え

Shopify Magic を使用すると、フィルター名とその値に基づいて、論理的な順序で値を並べ替えることができます。見本フィルターを使用するフィルターでは、16進数カラーコードと色相環での位置を考慮して並び順が決定されます。

[自動で並べ替え] ボタンをクリックすると、Shopify Magic によって値が並べ替えられます。新しい順序が希望どおりでない場合は、[並べ替えを元に戻す] ボタンをクリックして手動で並べ替えた順序に戻すか、ストアの要件に合わせて値を並べ替えることができます。

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

お客様が購入可能な商品を見つけやすくするために、空の絞り込み値をリストの最下部に移動するか、完全に非表示にすることができます。これにより、お客様は一致する結果のある値に集中できます。たとえば、さまざまな色とサイズの T シャツを販売しているとします。以外のすべての色が在庫切れの場合、空の値を一番下に移動すると、カラーフィルターではが最初に表示されます。空の値を非表示にすると、カラーフィルターにはのオプションのみが表示されます。

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [設定] をクリックします。

  3. [フィルター] > [空の値] セクションで、以下のいずれかのオプションを選択します。

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

絞り込み値を除外する

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

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

ビジュアルフィルター

絞り込み値には、色、柄、またはより詳細な画像などのビジュアル要素を含めることができます。たとえば、生地の色フィルターでは、各絞り込み値に小さな色の見本を表示できます。

絞り込み値でビジュアルを作成するには、メタオブジェクト参照に基づいた以下のいずれかのフィルタータイプを使用します。

標準商品属性フィルターを追加する

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックします。

  3. [フィルターを追加] をクリックするか、既存のフィルターをクリックします。

  4. [ソース] フィールドをクリックし、標準商品属性に基づいたカテゴリーメタフィールドタイプまたは商品メタフィールドタイプのフィルターを選択します。

  5. [値を管理] をクリックします。

  6. グループ化には、[自動] または [手動] のいずれかを選択します。

  7. [見本を含める] を選択します。テキストのみにする場合は、このオプションを選択しないままにします。

  8. 画像を見本として使用するには、[利用可能な場合は画像を使用する] を選択します。

  9. [保存] をクリックします。

カスタムメタフィールドフィルターを追加する

メタオブジェクト参照に基づいてカスタムメタフィールドフィルターを追加できます。カスタムメタフィールドフィルターを追加する前に、以下の要件とベストプラクティスを確認してください。

カスタムメタフィールドに基づいたビジュアルフィルターの要件

カスタムメタフィールドフィルターのビジュアルを作成するには、以下の要件を満たす必要があります。

  • 以下の基準を満たすメタオブジェクト:
    • 画像を含むカラーフィールドまたはファイルフィールドが1つ以上あること。どちらのフィールドもサポートしているのは1つの値のみで、値のリストはサポートされていません。
    • 絞り込み値に名前を付けるためのフィールド。許可されるのは 1つの値のみで、値のリストはフィルター名として使用できません。このフィールドには、以下のいずれかのタイプを指定できます。
      • 1行のテキスト
      • 小数
      • 整数
      • ブール値 (true または false)
  • 以下の基準を満たすメタフィールドの定義:
    • 定義は商品またはバリエーションのいずれかのために作成されていること。
    • メタフィールドタイプがメタオブジェクトであり、前のステップで作成したメタオブジェクト定義を参照していること。
    • メタフィールドでメタオブジェクトの単一のエントリ、またはエントリのリストのどちらを許可するかを設定します。
  • メタオブジェクト定義とメタフィールドの定義の両方で、ストアフロントアクセスを有効にする必要があります。

カスタムメタフィールドに基づくビジュアルフィルターのベストプラクティス

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

色の見本のメタオブジェクト定義には、色と画像の両方のフィールドが必要です。両方に値を入力する必要はありませんが、両方のフィールドがあれば、今後どちらかのフィールドを使用するオプションができます。

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

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックします。

  3. [フィルターを追加] をクリックするか、既存のフィルターをクリックします。

  4. [ソース] フィールドをクリックし、カテゴリー、商品、またはバリエーションのメタフィールドタイプのフィルターを選択します。

  5. メタフィールドを選択して、絞り込み値の [ラベル] フィールドを設定します。

  6. [ビジュアルを含める] にチェックを入れ、ビジュアルスタイルを選択します。

    • 選択 見本 - 小さな色の見本やパターン向け。以下を選択して見本のコンテンツを設定します。
      • [見本の色] の色フィールド。
      • [見本のパターン] の画像フィールド。
    • [画像] - アイコン、ロゴ、その他トリミングすべきでないグラフィック向け。[画像] の画像フィールドを選択してコンテンツを設定します。

フィルターの動作

コレクションページまたは検索結果の商品に適用できるフィルターのみが表示されます。

異なるフィルターから絞り込み値を選択すると AND 条件となり、表示される商品数が少なくなることがあります。たとえば、フィルターからを選択し、サイズフィルターから8を選択すると、赤色でサイズが 8 の両方の条件に一致する商品が返されます。

デフォルトでは、同じフィルターから絞り込み値を選択すると OR 条件となり、結果の数が増えることがあります。たとえば、のフィルターからの値を選択すると、赤または緑のすべての商品が返されます。特定のフィルタータイプでは、代わりに絞り込み値に AND 条件を使用できます。Shopify Search & Discovery アプリでフィルターの動作をカスタマイズする方法をご確認ください。

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

フィルターの動作をカスタマイズする

商品タグ、メタフィールドリスト、メタオブジェクト参照リストのフィルターでは、値の間のフィルター条件を、デフォルトの OR 条件または AND 条件のいずれかに選択できます。たとえば、AND 絞り込みで、商品タグフィルターから NewSale を選択すると、両方のタグを持つ商品のみが返されます。

手順:

  1. 管理画面から、[アプリ] > Search & Discovery に移動します。

  2. [フィルター] をクリックしてから、[フィルターを追加] をクリックします。

  3. [ソース] フィールドをクリックし、お客様が利用できるようにするフィルターソースを選択します。

  4. [ロジック] セクションで、絞り込み値に適用する動作を選択します。

  5. [保存] をクリックします。

フィルターの翻訳

フィルターのラベル、値、グループは、ストアの他のサポート対象言語に翻訳できます。コンテンツは、Shopify Translate & Adaptなどの翻訳アプリで翻訳できます。

フィルターの翻訳済みコンテンツがない場合は、ストアのデフォルト言語が使用されます。

絞り込み値は、商品と商品バリエーションの翻訳済みコンテンツに基づいています。

言語によって、フィルターの値の数が異なる場合があります。たとえば、ストアのデフォルト言語が英語で、サポート対象言語としてフランス語も追加するとします。の絞り込み値に茶色が含まれています。英語には茶色を表す一般的な単語が1つありますが、フランス語には2つあります。翻訳アプリは、茶色の絞り込み値を、ストアの商品全体でBrunまたはMarronのいずれかに自動的に翻訳します。ストアフロントのフィルターでは、英語のフィルターに茶色の値が1つ表示され、フランス語では2つ表示されます。

各絞り込み値の翻訳を1つだけに維持するには、翻訳アプリで商品の翻訳済みコンテンツを編集する必要があります。

マーケットの言語

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

フィルターのラベルとフィルターグループは、特定のマーケット向けの言語翻訳をサポートしています。

フィルターのトラブルシューティング

フィルターに関する一般的な問題については、以下の解決策を確認してください。

複数通貨のストアで価格フィルターが見つからない

海外価格または複数通貨を有効にしている場合、お客様がストアのデフォルト通貨以外の通貨を選択すると、価格フィルターは表示されません。これは、価格フィルター機能の現在の制限事項です。

フィルターの表示に関する問題のトラブルシューティング

フィルターが存在するにもかかわらず、想定されるすべての商品やフィルターオプションが表示されない場合、ストアの検索インデックスに関連する問題である可能性があります。この問題は、以下の場合に発生することがあります。

  • 最近、商品に新しいメタフィールドの値を追加した
  • 最近、フィルター関連の新しい情報で商品を更新した
  • ストアの検索データが同期されていない

インデックスの問題を解決するには、以下の手順を試してください。

  1. 自動再インデックスが完了するまで24~48時間待つ
  2. 影響を受ける商品に小さな更新 (商品名にスペースを追加するなど) を加えて保存し、再インデックスをトリガーする
  3. 問題が解決しない場合は、Shopify サポートに問い合わせる

商品オプションのフィルターに予期しない値が表示される

商品オプションの絞り込みでは、商品バリエーションのオプションのタイトルに基づいた値が表示されます。絞り込みに予期しない値が表示される場合やオプションが表示されない場合は、以下を確認してください。

  • 商品間で商品オプション名が完全に一致していることを確認する (たとえば、「Color」と「Color:」を混在させず、一貫して「Color」を使用するなど)
  • フィルターを使用する商品に商品オプションが設定されていることを確認する

フィルターが表示されない

商品数の上限により、状況によってはフィルターが表示されない場合があります。

  • コレクション:コレクションに 5,000 点を超える商品が含まれている場合、フィルターは非表示になります。
  • 検索結果:検索結果の商品が 100,000 点を超える場合、フィルターは非表示になります。

コレクションまたは検索結果がこれらの上限を超えている場合、そのページではお客様がフィルターを利用できなくなります。

絞り込み値の欠落や不備

フィルターには、表示できるユニークな値の数に上限があります。

  • タグ:最大 5,000 個のユニークなタグ値
  • 商品のオプションと属性:最大 1,000 個のユニークな値
  • メタフィールド:メタフィールドの構造によっては、一部の値が欠落する場合があります。

絞り込み値が欠落している場合は、これらの上限を超えていないか確認してください。

フィルターの翻訳に関する問題

フィルターまたは絞り込み値が別の言語で正しく表示されない場合:

  • 翻訳アプリでコンテンツが翻訳されていることを確認してください。
  • 商品タグと販売元のフィルターは、ストアのデフォルト言語でのみ表示されます。
  • 複数言語での翻訳サポートを強化するには、メタフィールドのフィルターを使用してください。