絞り込みを追加する

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

要件

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

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

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

絞り込みのタイプ

ストアでは絞り込みを最大25件選択できます。すべてのストアに同じ標準の絞り込みを表示できます。また、マーチャントは商品カタログ固有のカスタムの絞り込みを作成できます。

標準の絞り込み

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

メモ

価格の絞り込みは、ストアの主要通貨と同じ通貨で買い物をしているお客様にのみ表示されます。

カスタムの絞り込み

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

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

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

メタフィールドやメタオブジェクトを使用してカスタムの絞り込みを追加する

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

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

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

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

ヒント

一括編集は、すべての商品のメタフィールドや他の属性をすばやく更新するために役立つツールです。

絞り込みを編集する

オンラインストアで使用する絞り込みをアプリで編集できます。

手順:

1. Shopify Search & Discoveryアプリで [絞り込み] に移動してから [絞り込みを追加] をクリックします。
2. お客様が利用できるようにする絞り込みソースを選択します。
3. 任意：お客様に対して表示される絞り込みラベルの名前を変更します。絞り込み名の変更の詳細はこちらをご覧ください。
4. 任意：各絞り込み値に適用する挙動を変更します。絞り込みの挙動の詳細はこちらをご覧ください。
5. 任意：絞り込み値を選択し、お客様に対して表示される1個の値としてグループ化します。絞り込み値のグループ化の詳細はこちらをご覧ください。
6. [保存] をクリックします。

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

フィルター名を変更する

ストア内の既存の絞り込みのお客様向けラベルは、変更することができます。絞り込み画面で絞り込みをクリックし、絞り込みラベルフィールドを変更します。

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

絞り込み値

ストアフロントのお客様には、コレクションまたは検索結果の商品に適用される絞り込みの値のみが表示されます。各絞り込みについて、最大100の絞り込みの値が表示されます。表示される絞り込みの合計数を減らすには、類似の絞り込みの値をグループ化して1つの絞り込みにします。

メモ

Search & Discoveryアプリでは、絞り込みに最大1,000の絞り込みの値が表示されます。絞り込みの値はアプリでは表示されない場合がありますが、ストアフロントでお客様に表示されます。

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

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

複数の絞り込み値をグループ化すると、お客様に対して1個の絞り込み値として表示することができます。たとえば、商品オプション「色」に「オニキス」、「エボニー」、「ミッドナイト」の値が設定されていても、お客様に対してこれらを単に「黒」と表示することが可能です。

手順:

1. Shopify Search & Discoveryアプリで、[絞り込み] の [絞り込みを追加する] をクリックするか、テーブル内にある既存の絞り込み設定をクリックします。
2. お客様が利用できるようにする絞り込みソースを選択します。
3. [値] テーブルで、1個の絞り込み値としてグループ化する値を選択します。絞り込み値は、検索バーを使用するか、[さらに表示する] をクリックしてを探します。
4. [グループを作成] をクリックします。
5. グループの名前を入力します。これが、お客様に表示される1個の絞り込み値となります。
6. [完了] をクリックします。
7. [保存] をクリックして絞り込み設定を変更します。

[値] テーブルに表示される絞り込み値には上限数が設定されているため、目的の値が見つからない場合もあります。絞り込み値をさらに追加するには、アイコンをクリックして [別の値を追加] をクリックし、目的の値を入力します。

メモ

1個の絞り込みグループに対しては最大50個の固有の絞り込み値を設定でき、1つのストアに対しては最大1,000個の絞り込みグループを設定できます。

絞り込みの値の並び替え

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

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

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

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

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

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

以下の例では、「スキルレベル」のメタフィールドの値を「初級」、「中級」、「上級」に手動で並べ替えることができます。

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

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

手順:

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

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

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

絞り込みの値を除外する

お客様に対して表示される値を詳細に管理する必要がある場合は、ストアフロントでお客様に表示する値のみをメタフィールドの絞り込みに追加して使用します。

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

視覚的な絞り込み

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

視覚的な絞り込みの要件

ストアの絞り込み値に視覚的な情報を含める場合、以下の要件を満たす必要があります。

• 絞り込み値の見本や画像の表示に対応したオンラインストアのテーマ。

• 以下の基準を満たすメタオブジェクト。

  • 1つ以上のテキストフィールド。テキストフィールドのタイプは、単一行のテキスト、小数値、整数、trueまたはfalseのいずれかである必要があります。
  • 画像が付いた1つ以上の色フィールドまたはファイルフィールド。値のリストであるフィールドは非対応です。

• メタオブジェクトを参照する商品またはバリエーションのメタフィールド。

• メタオブジェクトとメタオブジェクトの参照は、ストアフロントのアクセスに対して有効になっている必要があります。

メタオブジェクトのチュートリアルでは、メタオブジェクトの設定に役立つ詳細情報を確認できます。

ステップ：

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

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

ヒント

テーマは、色よりも見本の画像を優先して表示する場合が多くなります。見本の表示では、[見本パターン] と [見本の色] の両方のフィールドを選択した場合、通常、色は絞り込み値に利用可能なパターン画像がない場合にのみ表示されます。

絞り込みの仕組み

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

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

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

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

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

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

手順:

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

翻訳を絞り込む

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

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

メモ

商品タグの絞り込みは、ストアのデフォルト言語で買い物をしているお客様にのみ表示されます。商品の販売元の絞り込み値は、常にストアのデフォルト言語に基づいて表示されます。

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

絞り込み値の数は、言語に応じて変化する場合もあります。たとえば、英語版のストアで色の絞り込み値「Brown」が表示される場合、翻訳アプリを使用した際に、ストアの商品全体にわたって「Brown」という値に対して2つの異なる翻訳が提供され、一部が「Brun」、その他が「Marron」となる場合などがあります。この場合は、フランス語表示でストアを閲覧しているお客様には、絞り込みで「Brun」と「Marron」の両方が表示され、英語表示のお客様には「Brown」のみが表示されます。各絞り込み値に対する翻訳を1つのみにするには、翻訳アプリで商品の翻訳内容を編集する必要があります。

マーケットの言語

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

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

制限

5,000を超える商品が追加されているコレクションでは、絞り込みは表示されません。5,000超の商品があるコレクションでのこの制限の回避策としては、大規模なコレクションを小規模な自動コレクションのグループとして表示し、それらをドロップダウンナビゲーションメニューで関連付ける方法があります。たとえば、ストアで大規模な「女性」ファッションのコレクションへの1つのリンクを用意するのではなく、「トップス」、「ジーンズ」、「ブーツ」の小規模なサブコレクションへのナビゲーションリンクを用意します。

100,000件を超える検索結果が表示される検索では、絞り込みは表示されません。

1個の絞り込みには、ストアフロントで最大100個の絞り込みの値を表示できます。ストアに絞り込みの値が100個以上存在する可能性がある場合、一部の値がお客様に表示されないことがあります。類似の値をグループ化することによって、表示可能な絞り込みの値の数を減らすことができます。

Search & Discoveryアプリでは、絞り込みに最大1,000件の絞り込み値が表示されます。ストア内の固有値をチェックするメタフィールドの数には制限があるため、メタフィールドの絞り込みの表示値は1,000件より少なくなります。絞り込みに表示される絞り込みの値が100件未満の場合、アプリに表示されない絞り込みの値も、ストアフロントでお客様に表示されます。

1個の絞り込みグループに対して、固有の絞り込み値を最大50個まで設定でき、1つのストアに対して選択した絞り込みすべての設定で最大1,000個まで絞り込みグループを設定できます。

販売元とタグの絞り込み値には翻訳が提供されません。商品タグの絞り込みは、ストアのデフォルト言語で買い物をしているお客様にのみ表示されます。販売元の絞り込みの値は、常にストアのデフォルト言語に基づいて表示されます。

絞り込みの値の翻訳は、オンラインストアで公開されている言語に基づいており、Shopify Marketsで設定されたマーケット向けの翻訳は表示されません。

価格の絞り込みは、ショップのデフォルト通貨以外の通貨には表示されません。