商品情報にスキップ
1 1
公開日:2024.12.16

Shopifyのテーマ「Rise/Dawn」のコレクションページフィルター「タグによる絞り込み」でタグの指定・除外が行えるようにする設定例

Shopifyのテーマ「Rise/Dawn」のコレクションページフィルター「タグによる絞り込み」でタグの指定・除外が行えるようにする設定例

用途

  • コレクション編集

実装方法

  • HTML/CSS
詳細を表示する

こちらこちらの設定方法は除外するタグを指定するだけのものでしたが、タグのボリュームが増えてくると除外するよりも指定したタグのみを表示する方が利便性が高くなります。というわけで、テーマ「Rise/Dawn」のエディタ上で指定または除外したいタグを追加・削除・編集できるようにする方法です。

◆設定のメリット
・テーマエディタ上で指定・除外タグの編集が可能。

◆具体的な設定手順
①「sections/main-collection-product-grid.liquid」にschemeを「ja.schema.json」にラベルを追加
②「sections/main-collection-product-grid.liquid」に絞り込み設定snippetsに指定したタグリストを渡す引数を追加
③「snippets/facets.liquid」に除外するタグの読み込み、デスクトップ用・モバイルドロワー用のフィルタに除外処理を追加


テーマ「Rise/Dawn」のコレクションページフィルター「タグによる絞り込み」でタグの指定・除外が行えるようにする設定例


【(テーマRise/Dawnの場合)設定方法①】「sections/main-collection-product-grid.liquid」にschemaを「ja.schema.json」にラベルを追加


【(テーマRise/Dawnの場合)設定方法②】「sections/main-collection-product-grid.liquid」にコードを追加(絞り込み設定snippetsに指定したタグリストを渡す引数を追加)


【(テーマRiae/Dawnの場合)設定方法③】「snippets/facets.liquid」にコードを追加(指定・除外タグの判別処理、およびデスクトップ・モバイルドロワー用のフィルタに指定・除外処理を追加)


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「sections/main-collection-product-grid.liquid」にschemaを追加

関連ポスト