商品情報にスキップ
1 1
 

【Horizon】コレクションページの商品カードにバリアントオプションをタグ表示するブロック

【Horizon】コレクションページの商品カードにバリアントオプションをタグ表示するブロック

用途

  • コレクション編集
詳細を表示する

HorizonテーマのコレクションページでSwatchesブロックに対応していないテキスト系バリアントオプション(サイズ・素材など)を商品カードにピル形式で表示するプライベートブロックの実装例です。ブロックをカードに追加するだけで、すべての商品カードにオプション一覧がタグ形式で表示されます。

コレクションページの商品カードにバリアントオプションがピル形式で表示されている様子

テーマエディタのバリアントオプションブロック設定画面

機能

  • 商品カードの任意の位置に「バリアントオプション」ブロックとして追加できる
  • 除外するオプション名(カンマ区切り)を指定して、Swatchesブロック表示済みの色オプション等を除外できる
  • Default Title商品(バリアントなし)は自動的に非表示になる
  • テーマエディタからピルの背景色・文字色・枠線色・フォントサイズ・上下左右の余白を設定できる

追加・修正するファイル

blocks/_variant-options.liquid(新規作成)

blocks/_variant-options.liquid のコード

blocks/_product-card.liquid(L44付近に1行追加)

blocks/_product-card.liquid の schema 内 blocks 配列に {"type": "_variant-options"} を追記して、テーマエディタの「ブロックを追加」メニューに表示させます。

blocks/_product-card.liquid の変更箇所

関連TIPS:【Dawn】コレクションページの商品カードにバリアントオプションをボタン表示する

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

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

サンプルコード

動作検証済テーマ:Horizon 3.5.1

blocks/_variant-options.liquid(新規作成)