絞り込み（フィルタ）
Search & Discoveryのフィルタをcollection.filtersで描画し、URLパラメータと非同期再描画で絞り込みを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、絞り込み（フィルタ）の項目をテーマで描画し、URLパラメータで絞り込みを動かせるようになります。
受託では「項目はアプリで定義し、テーマは描画するだけ」という分担を守ると、運用者が項目を自分で変えられます。
絞り込みの項目はどこで決まるか
管理画面のSearch & Discoveryアプリで、在庫・価格・ベンダー・タイプ・タグ・メタフィールド・オプションのフィルタを有効にします。
テーマはcollection.filtersを描画するだけで、項目の定義はしません。/collections/x/tag形式の旧方式より、Search & Discoveryを使います。
メタフィールドで絞り込むには、定義側で「フィルター」を有効にします。
filterオブジェクトから何が取れるか
typeはlist / boolean / price_rangeの3種類です。filter.labelとfilter.values（label / count / active / param_name / value）で、チェックボックスなどを作ります。
価格帯はmin_value / max_value / range_maxです。filter.active_valuesとurl_to_removeで、解除のUIを作ります。
URLパラメータと再描画はどう組むか
?filter.v.availability=1&filter.p.vendor=Acme&filter.v.price.gte=1000のように、GETフォームで自然に組み立てます。nameにはparam_nameをそのまま使います。
フォームが変わったらfetch(url + '§ion_id=product-grid')で取得したHTMLを差し替え、history.pushStateでURLを同期します。
発展：フィルタが出ない上限
商品数が非常に多いコレクションでは、フィルタが出ない上限があります。
値は公式ドキュメントで確認します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。