【Shopify TIPS】
テーマ「Horizon」の商品詳細ページで、バリエーションごとに設定したコメント(HTMLタグもOK)を、バリアント変更に連動して切り替えて表示するブロックの設定例です。

サイズごとの寸法・着用感、素材ごとの取り扱い注意点など、バリエーション切替に連動した補足情報をその場で表示できます。Horizon純正のvariant-picker.jsはバリエーション切替時にページ全体をfetchする作りですが、このブロックは独自にDOM差し替えを実装しているので、初期表示時にメタフィールド値を出力しつつ、切替時はリアルタイムで該当箇所だけ書き換わるイメージです。

ベンダーファイルには手を加えず、blocks/variant-comment.liquid を1つ追加するだけで動くので、テーマアップデートの影響も受けません。

#Shopify


スレッド

【Horizon】バリエーションごとに設定したコメント(HTMLタグもOK)を商品ページに表示するブロック
https://store-dojo.com/products/2026-05-06

Xで見る