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

【Horizon】Horizonテーマの商品カードに商品タグ表示ブロックを追加する設定例

【Horizon】Horizonテーマの商品カードに商品タグ表示ブロックを追加する設定例

用途

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

Horizonテーマの商品カードに商品タグを表示する _product-tags ブロック(private block)を追加する方法です。Horizon の theme blocks アーキテクチャを活かし、テーマエディタから商品カード内に差し込める独立ブロックとして実装します。Dawn版の実装方法はこちら

完成イメージ

商品カード内に商品タグが並びます。テーマエディタで「除外タグ」を設定すれば、アプリが自動付与するようなタグを一括で隠せます。

コレクションページの商品カードに商品タグが表示されている様子

使用方法

商品ごとのタグ設定はそのままに、テーマエディタで「商品タグ」ブロックを商品カード内に追加するだけで表示されます。除外したいタグは設定パネルのフィルタ欄にカンマ区切りで入れておけばOK。

商品管理画面のタグ設定とテーマエディタでの除外タグ設定

ブロック本体(blocks/_product-tags.liquid)

closest.product で商品を受け取り、除外タグのフィルタを経て <span> を並べます。商品カード以外の場所に差し込まれた場合は closest.product が空になるので何も出力しない安全設計。

_product-tags.liquid — Liquidレンダリング部

スタイルは CSS Custom Properties で設定値を反映

テーマエディタの各設定値を CSS 変数として style 属性で渡し、メディアクエリで PC / モバイルのフォントサイズを切り替えます。

_product-tags.liquid — stylesheet部

商品カードに差し込み許可を追加(blocks/_product-card.liquid)

Horizon の商品カードは明示的な allow-list 方式。schema.blocks 配列に {"type": "_product-tags"} を1行足すだけで、テーマエディタの商品カード内ブロック追加画面から選べるようになります。

_product-card.liquid — schema blocks に1行追加

なお、blocks/_product-card.liquid はテーマ本体のファイルのため、Horizonのテーマ更新時に変更が上書きされる場合があります。更新後は手動での再適用、またはGitHub連携によるマージ管理をおすすめします。

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

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

サンプルコード

動作検証済テーマ:Horizon 3.4.0

blocks/_product-tags.liquid(新規作成・全体)