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

【Horizon】商品タグ表示ブロックを商品詳細ページにも差し込めるようにする設定例

【Horizon】商品タグ表示ブロックを商品詳細ページにも差し込めるようにする設定例

用途

  • 商品情報管理・編集
詳細を表示する

2026-04-22 で追加した 商品タグ表示ブロック を、商品詳細ページ(PDP)にも差し込めるようにする追加設定です。blocks/_product-details.liquid の schema に1行追加するだけで、商品詳細ブロック内のブロック選択メニューに「商品タグ」が現れるようになります。

完成イメージ

商品詳細ページで、商品情報ブロック内の任意の位置(例: タイトルと価格の間)に商品タグを差し込めます。除外タグの指定などの設定はコレクションカード版と共通で、設定パネルからそのまま利用できます。

商品詳細ページで商品タグが表示されている様子(表示除外タグ指定付き)

使用方法

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

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

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

このTIPSで使う _product-tags.liquid2026-04-22 のTIPS と同じものです。既に導入済みであればそのまま使えます(コード全文はそちらのサンプルコード/下図を参照)。

_product-tags.liquid — 2026-04-22 と同じ内容

コード追加:blocks/_product-details.liquid の allow-list を拡張

商品詳細ブロック(_product-details.liquid)は、差し込める子ブロックを schema の blocks 配列で明示的に列挙する方式です。@theme(publicブロック全許可)+個別タイプ(pricevariant-pickerbuy-buttons 等)を併用しており、ここに _product-tags を追加しない限り、private ブロックである本TIPSは差し込み候補に表示されません。

既存の末尾エントリ(product-custom-property)の後ろに、以下の1要素を追加します。

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

保存後、テーマエディタで「商品情報」セクションの「商品の詳細」ブロックを選択 → 「ブロックを追加」 → 「商品」カテゴリに「商品タグ」が現れます。

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

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

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

サンプルコード

動作検証済テーマ:Horizon 3.4.0

blocks/_product-tags.liquid(新規作成・ブロック本体 — 2026-04-22 と共通)