{"product_id":"2026-04-22","title":"【Horizon】Horizonテーマの商品カードに商品タグ表示ブロックを追加する設定例","description":"\u003cp\u003eHorizonテーマの商品カードに商品タグを表示する \u003ccode\u003e_product-tags\u003c\/code\u003e ブロック（private block）を追加する方法です。Horizon の theme blocks アーキテクチャを活かし、テーマエディタから商品カード内に差し込める独立ブロックとして実装します。Dawn版の実装方法は\u003ca href=\"\/products\/2023-04-23\"\u003eこちら\u003c\/a\u003e。\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e商品カード内に商品タグが並びます。テーマエディタで「除外タグ」を設定すれば、アプリが自動付与するようなタグを一括で隠せます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"コレクションページの商品カードに商品タグが表示されている様子\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22_1.png?v=1776854665\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e使用方法\u003c\/h3\u003e\n\u003cp\u003e商品ごとのタグ設定はそのままに、テーマエディタで「商品タグ」ブロックを商品カード内に追加するだけで表示されます。除外したいタグは設定パネルのフィルタ欄にカンマ区切りで入れておけばOK。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"商品管理画面のタグ設定とテーマエディタでの除外タグ設定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22_2.png?v=1776854665\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003eブロック本体（blocks\/_product-tags.liquid）\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003eclosest.product\u003c\/code\u003e で商品を受け取り、除外タグのフィルタを経て \u003ccode\u003e\u0026lt;span\u0026gt;\u003c\/code\u003e を並べます。商品カード以外の場所に差し込まれた場合は \u003ccode\u003eclosest.product\u003c\/code\u003e が空になるので何も出力しない安全設計。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"_product-tags.liquid — Liquidレンダリング部\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22_3.png?v=1776854665\" class=\"zoomable-image\" width=\"800\" height=\"900\" style=\"aspect-ratio: 0.89;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003eスタイルは CSS Custom Properties で設定値を反映\u003c\/h3\u003e\n\u003cp\u003eテーマエディタの各設定値を CSS 変数として \u003ccode\u003estyle\u003c\/code\u003e 属性で渡し、メディアクエリで PC \/ モバイルのフォントサイズを切り替えます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"_product-tags.liquid — stylesheet部\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22_4.png?v=1776854665\" class=\"zoomable-image\" width=\"800\" height=\"700\" style=\"aspect-ratio: 1.14;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e商品カードに差し込み許可を追加（blocks\/_product-card.liquid）\u003c\/h3\u003e\n\u003cp\u003eHorizon の商品カードは明示的な allow-list 方式。\u003ccode\u003eschema.blocks\u003c\/code\u003e 配列に \u003ccode\u003e{\"type\": \"_product-tags\"}\u003c\/code\u003e を1行足すだけで、テーマエディタの商品カード内ブロック追加画面から選べるようになります。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"_product-card.liquid — schema blocks に1行追加\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22_5.png?v=1776854665\" class=\"zoomable-image\" width=\"800\" height=\"400\" style=\"aspect-ratio: 2;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003eなお、\u003ccode\u003eblocks\/_product-card.liquid\u003c\/code\u003e はテーマ本体のファイルのため、Horizonのテーマ更新時に変更が上書きされる場合があります。更新後は手動での再適用、またはGitHub連携によるマージ管理をおすすめします。\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48772174053627,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-22.png?v=1776857506","url":"https:\/\/store-dojo.com\/products\/2026-04-22","provider":"STORE DOJO","version":"1.0","type":"link"}