フィルター

注目のリンク

1. ストアフロントのフィルタリングに関するShopifyドキュメント
2. Search and Discoveryのフィルターに関するShopifyドキュメント
3. タグ形式に関するShopifyドキュメント
4. Search & Discoveryアプリ
5. Shopify Search & Discoveryでフィルターを追加する方法に関するShopifyドキュメント
6. メタフィールドに関するShopifyドキュメント
7. メタオブジェクトに関するShopifyドキュメント
8. ビジュアルフィルターに関するShopifyドキュメント
9. メタフィールド定義に関するShopifyドキュメント
10. フィルターの編集に関するShopifyドキュメント

Align Shopifyテーマでは、フィルターを使って、ブログ記事、コレクションの商品、検索結果を絞り込めます。ブログフィルターでは記事タグを使用します。商品フィルターはShopifyで管理し、標準の商品データ、商品オプション、メタフィールド、メタオブジェクトを使用できます。

Alignテーマの設定については、Company XYZサポートをご利用ください。

ブログフィルター

ブログフィルターを使うと、ブログページ上でタグベースのオプションを直接選択して、表示する記事を絞り込めます。

ブログフィルターを有効にする

1. Shopify管理画面で、Online Store → Themes → Customizeに移動します。
2. 編集するBlogテンプレートを開きます。同じ設定をすべてのブログテンプレートに適用できます。
3. Blog contentセクションを選択します。
4. Enable filtersをオンにします。
5. 少なくとも1つのフィルターグループを追加します。

フィルターグループを作成する

フィルターグループは、フィルターインターフェイスに表示される見出しです。「Topics」、「Guides」、「News」などを設定できます。

1. Blog content → Filtersで、Add filter groupを選択します。
2. Group titleを入力します。
3. Filter byをTagsに設定します。
4. グループに含めるタグを追加します。
5. グループを最初から開いた状態にするか、折りたたんだ状態にするかを選択します。複数のグループがある場合、折りたたむとページを整理された状態に保てます。

タグはブログ記事から直接取得されます。表示する各タグは少なくとも1つの記事に存在している必要があります。存在しない場合、そのオプションを選択しても結果は返されません。タグ形式については、Shopifyのタグに関するドキュメントを参照してください。

タグの照合では大文字と小文字は区別されませんが、スペースと文字は一致している必要があります。たとえば、Newsとnewsは一致しますが、tag 1とtag_1は一致しません。

ブログフィルターの動作

タグを選択すると、表示される記事がすぐに更新されます。複数のタグを選択した場合、選択したすべてのタグを含む記事だけが表示されます。

選択内容はURLに反映されるため、フィルター済みの表示を共有したり、ブックマークしたりできます。

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

オプションは表示されるものの、記事が返されない場合は、次の手順を実行します。

1. タグが少なくとも1つの記事に存在することを確認します。
2. タグのスペースと特殊文字が完全に一致していることを確認します。
3. フィルターグループのタグリストから誤字や余分なスペースを削除します。

商品フィルター

商品フィルターを使うと、在庫状況、商品タイプ、価格、色など、関連する属性でコレクションページや検索結果を絞り込めます。現在のコレクションまたは検索結果に適用されるフィルターと値だけが表示されます。

Search & Discoveryアプリを使用して、商品フィルターを作成、整理、カスタマイズします。このアプリには、検索結果と商品レコメンデーションのコントロールも用意されています。Shopifyでの完全なワークフローについては、アプリでフィルターをカスタマイズするを参照してください。

現在の設定手順については、Shopify Search & Discoveryでフィルターを追加する方法に関するShopifyドキュメントを参照してください。

テーマの対応状況を確認する

商品フィルターにはOnline Store 2.0テーマが必要です。Shopifyで対応状況を確認するには、Online Store → Navigationに移動し、Collection and search filtersを確認します。

フィルターに対応していない場合でもフィルターは作成できますが、ストアフロントには表示されません。一部の非対応のサードパーティテーマでは、互換性メッセージが表示されないことがあります。

商品フィルターを表示する

フィルターに対応するテーマには、フィルターを有効化または無効化するセクション設定があります。Alignでは、Search & Discoveryでフィルターを作成した後、Online Store → Themes → Customizeで該当するコレクションテンプレートと検索テンプレートを確認します。

プラットフォーム開発のテーマでは、コレクションページのProduct gridセクションと検索ページのSearch resultsセクションにこの設定が表示されます。顧客がオプションを選択すると、商品リストは自動的に更新され、一致する結果が表示されます。

商品フィルターのソース

最大25個のフィルターを選択できます。標準フィルターはすべてのストアで利用できます。カスタムフィルターでは、カタログ固有の構成を反映できます。

標準フィルター

標準ソースには、在庫状況、価格、販売元、商品タイプ、タグが含まれます。

ノート

価格フィルターは、顧客がストアの主要通貨で買い物をする場合にのみ表示されます。

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

商品オプションフィルターはバリエーションに基づきます。たとえば、サイズのバリエーションがある商品では、Sizeフィルターを提供できます。

オプションはバリエーションレベルのフィルターであるため、複数の値を選択しても、一致するバリエーションを持つ1つの商品が返される場合があります。

メタフィールドとメタオブジェクトのフィルター

メタフィールドでは、おもちゃの年齢範囲など、カタログ固有のフィルターを提供できます。メタオブジェクトでは、顧客にわかりやすい色や画像を使ったビジュアルフィルターをサポートできます。

サポートされるカスタムフィルターの値タイプは次のとおりです。

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

メタフィールドをフィルターとして選択するには、事前にメタフィールド定義を作成する必要があります。設定後、フィルターを編集する際にそのメタフィールドを選択します。設定方法については、メタフィールドでカスタムフィルターを追加するを参照してください。

ヒント

Bulk Editorを使用すると、多数の商品にわたってメタフィールドやその他の商品属性を更新できます。

商品フィルターを作成、編集する

1. Search & DiscoveryアプリでFiltersに移動し、Add filterを選択します。
2. 顧客が利用できるようにするフィルターソースを選択します。
3. 必要に応じて、顧客に表示するLabelの名前を変更します。フィルター名の変更について詳しくは、こちらを参照してください。
4. 必要に応じて、選択した値の関係を変更します。フィルターの動作について詳しくは、こちらを参照してください。
5. 必要に応じて、類似する値を1つの顧客向けの選択肢にまとめます。フィルター値のグループ化について詳しくは、こちらを参照してください。
6. Saveを選択します。

Filters画面でフィルターをドラッグすると、ストアフロントでの順序を変更できます。

フィルターのラベルを変更しても、ソースの名前は変更されません。たとえば、商品オプションに基づくフィルターの名前を変更しても、商品ページ上のそのオプション名は変わりません。

フィルター値

現在のコレクションまたは検索結果に関連する値だけが顧客に表示されます。各フィルターはストアフロントに最大100個の値を表示できます。類似する値をグループ化すると、表示数を減らせます。

アプリでは、1つのフィルターにつき最大1,000個の値を表示できます。アプリで表示されない値でも、ストアフロントのフィルターが100個の上限内であれば、ストアフロントに表示されることがあります。値の形式に応じて、異なる並べ替えルールが適用されます。

類似する値をグループ化する

グループ化すると、複数のソース値を1つの顧客向けの値にまとめられます。たとえば、「onyx」、「ebony」、「midnight」を「Black」としてまとめて表示できます。

1. Search & DiscoveryアプリでFiltersに移動します。
2. Add filterを選択するか、既存のフィルターを開きます。
3. フィルターソースを選択します。
4. Valuesテーブルで、まとめる値を選択します。必要に応じて検索またはShow moreを使用します。
5. Create groupを選択します。
6. 顧客に表示する1つのグループ名を入力します。
7. Done、続いてSaveを選択します。

値がテーブルで利用できない場合は、別の値を追加するコントロールを使用して、手動で入力します。1つのフィルターグループには最大50個の一意の値を含めることができ、ストアには最大1,000個のフィルターグループを作成できます。

フィルター値を並べ替える

値は通常、アルファベット順または数値順の昇順で並べ替えられます。数字と共通の単語を含む値は自然にグループ化されます。たとえば、年齢の値は次のように並べ替えられます。

1. 2か月
2. 6か月
3. 2年
4. 3年

「Size」という名前のフィルターでは、一般的なサイズ用語にカスタム順序が使用され、XSなどの値がSより前に配置されます。

独自の順序を設定するには、あらかじめ選択肢を設定した1行テキストのメタフィールドを作成します。選択肢の順序がストアフロントでの順序になり、「Novice」、「Intermediate」、「Professional」のような順序を設定できます。

空の値を処理する

空の値は非表示にする、最後に移動する、またはデフォルトの順序のままにすることができます。空の値を非表示にするか優先度を下げると、現在商品を返す選択肢に顧客が集中しやすくなります。

1. Search & DiscoveryアプリでSettingsに移動します。
2. Filtersで次のいずれかのオプションを選択します。
   • Hideは空の値を削除し、すべての値が空の場合はフィルターを非表示にします。
   • Show at the endは空の値を利用可能な選択肢の下に移動します。
   • Show in default orderは通常の並べ替えロジックを維持します。
3. Saveを選択します。

不要な値を除外する

正確に管理するには、ストアフロントのフィルタリングに使用する値だけを含むメタフィールドを使用します。商品タグが自動コレクションの条件や管理画面の商品リストのフィルタリングにも使用されている場合は、この方法が適しています。

1行テキストのメタフィールドタイプまたはリストタイプを、商品タグのフィルターソースの代わりに使用できます。

ビジュアルフィルター

ビジュアルフィルターでは、値に色やパターン画像を組み合わせることができます。フィルターがメタオブジェクトを使用する場合、Display optionsで顧客にテキスト、スウォッチ、または両方を表示するかどうかを設定します。

スウォッチの要件

スウォッチを設定するには、次の項目が必要です。

1. 1行テキスト、小数、整数、真または偽など、少なくとも1つの対応するテキストフィールドを持つメタオブジェクト。
2. 少なくとも1つの色フィールドまたは画像ファイルフィールド。リストフィールドはビジュアルには対応していません。
3. メタオブジェクトを参照する商品またはバリエーションのメタフィールド。
4. メタオブジェクトと参照するメタフィールドの両方でストアフロントアクセスが有効になっていること。

メタオブジェクトのチュートリアルでは、追加の設定方法を説明しています。

ビジュアルフィルターを設定する

1. Search & DiscoveryアプリでFiltersに移動します。
2. フィルターを追加するか、既存のフィルターを開きます。
3. メタオブジェクト参照を持つフィルターを選択します。
4. Display optionsを選択します。
5. 値のLabelに使用するメタフィールドを選択します。
6. Show swatchが有効な場合、Swatch colorには色フィールド、Swatch patternには画像フィールド、またはその両方を選択します。
7. Show swatchを無効にすると、ラベルのみが表示されます。

ノート

テーマでは、多くの場合、色よりもスウォッチ画像が優先されます。両方を設定した場合、通常はパターン画像が利用できないときの代替として色が使用されます。

フィルターの動作

異なるフィルターから選択した値にはANDロジックが使用されます。Colorから「Red」、Sizeから「8」を選択すると、両方の条件を満たす商品が返されます。

同じフィルター内の値では、デフォルトでORロジックが使用されます。Colorから「Red」と「Green」を選択すると、どちらかの値に一致する商品が返されます。ただし、商品タグ、メタフィールドリスト、メタオブジェクト参照リストのフィルターでは、ANDロジックを使用できます。

この動作をカスタマイズするには、次の手順を実行します。

1. Search & DiscoveryアプリでFiltersに移動し、Add filterを選択します。
2. フィルターソースを選択します。
3. Logicで、値に適用する関係を選択します。
4. Saveを選択します。

詳しくは、フィルターの動作をカスタマイズするを参照してください。

フィルターの翻訳

フィルターのラベル、値、グループは、対応言語に翻訳できます。Translate & Adaptなどの翻訳アプリでこのコンテンツを管理できます。翻訳が利用できない場合は、デフォルト言語が使用されます。

商品タグフィルターはデフォルト言語でのみ表示され、販売元の値は常にデフォルト言語を使用します。その他の値は、翻訳された商品とバリエーションのコンテンツに基づきます。

翻訳に一貫性がないと、同じ概念に対して複数の値が作成される場合があります。たとえば、「Brown」を「Brun」と「Marron」の両方に翻訳すると、両方の値が表示されます。1つの値を維持できるよう、翻訳された商品コンテンツを統一してください。

フィルター値では、特定のマーケット向けに設定された追加の言語インスタンスはサポートされません。値には一般的な言語の翻訳が使用されますが、フィルターのラベルとグループではマーケット固有の翻訳を使用できます。

制限事項

1. 商品数が5,000点を超えるコレクションにはフィルターが表示されません。大規模なコレクションを小規模な自動コレクションに分割し、ドロップダウンナビゲーションメニューでリンクすることを検討してください。
2. 検索結果が100,000件を超える検索にはフィルターが表示されません。
3. ストアフロントのフィルターには最大100個の値を表示できます。値がさらに多い場合は、値のグループ化を使用してください。
4. アプリでは、1つのフィルターにつき最大1,000個の値を表示できます。メタフィールドフィルターでは、一意の値を確認するメタフィールドの数が限られているため、表示数が少なくなる場合があります。
5. 各フィルターグループには最大50個の一意の値を含めることができ、選択したフィルター設定全体で最大1,000個のグループを作成できます。
6. 販売元とタグの値は翻訳できません。タグフィルターはデフォルト言語でのみ表示され、販売元の値も常にその言語を使用します。
7. フィルター値の翻訳には公開済みのストア言語が使用され、Marketsで設定したマーケット固有の翻訳は表示されません。
8. 価格フィルターは、ストアのデフォルト通貨以外の通貨では表示されません。

使用上の注意

1. ブログタグを慎重に一致させる。 ブログフィルターで記事が返されない場合は、スペースと特殊文字を確認してください。
2. 目的を絞った商品フィルターを選択する。 顧客がコレクションや検索結果を意味のある形で絞り込める属性を優先してください。
3. 類似する値を統合する。 表示上限に近づく前に、同義語やほぼ同一のオプションをグループ化してください。
4. フィルターロジックをテストする。 ANDまたはORの動作によって、顧客が期待する組み合わせが表示されることを確認してください。
5. 翻訳を確認する。 同等の選択肢が別々のフィルターとして表示されないよう、翻訳された商品値に一貫性を持たせてください。