コンテンツにスキップ

フィルターグループ

展開可能なタグフィルターグループを追加して、コレクションの絞り込みをよりわかりやすく、使いやすくします。

このブロックを使用して、コレクションのフィルターにカスタムのタグベースのフィルターグループを作成します。各ブロックはそれぞれ独立した展開可能なフィルターモジュールとして表示されるため、複数のグループを重ねて、絞り込みの選択肢をより整理して表示できます。フィルターグループに関するCompany XYZドキュメント も参照してください。テーマエディターでの設定の流れについては、セクションとブロックに関するShopifyドキュメント を参照してください。

このブロックは、グループ名、グループに含めるタグ、デフォルトでグループを開くかどうかという3つの実用的な選択で制御されます。

Filter title を使って、買い物客向けにわかりやすいラベルをグループに付けます。短く親しみやすい名前が最適で、特に複数のフィルターグループをすばやく確認する必要がある場合に効果的です。

Filter tags を使って、グループに表示するフィルターオプションを定義します。タグはカンマ区切りのリストで入力し、各タグがカタログ内の商品タグと完全に一致するようにしてください。ここでは一貫した命名が重要です。特に、似たタグでも大文字・小文字、スペース、表記が異なる場合は注意が必要です。

このグループに優先度の高いフィルターが含まれ、顧客が最初に使う可能性が高い場合は、Show open by default をオンにします。複数のフィルターグループを重ねて表示する場合は、重要度の低いものを閉じたままにすると、フィルター領域をより見やすくできます。

このブロックは、一貫した商品タグ付けに依存します。ここで入力したタグが商品に使用されているタグと一致しない場合、フィルターグループが不完全になったり、期待よりも役立ちにくくなったりすることがあります。

  1. タイトルは買い物客にわかりやすくします。 一目でフィルターの選択肢が明確に伝わる、平易なグループ名を使用してください。
  2. タグの表記を正確に一致させます。 フィルターオプションの見落としや混乱を避けるために、商品タグと同じ表記を使用してください。
  3. 関連するタグはまとめます。 各ブロックを1つの属性またはテーマを中心に構成すると、フィルターパネルを見やすく保てます。
  4. 重要なグループだけを開きます。 そのコレクションで最も重要な絞り込み項目を含む場合にのみ、グループを展開した状態で表示してください。
  5. 実際のコレクションで確認します。 公開されているコレクションページでフィルターグループを確認し、含めたタグが表示中の商品に合っているかをチェックしてください。
  6. プレビューとストアフロントの両方を確認します。 テーマエディターは公開前の設定に役立ちますが、最終的な余白や可読性に影響するのは公開後の表示です。
  7. デスクトップとモバイルの両方でテストします。 レイアウトや表示は画面サイズによって変わるため、どちらの表示幅でもフィルターグループが見やすいか確認してください。