商品情報にスキップ
1 1
公開日:2023.05.13最終更新日:2025.01.10

Shopifyのテーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法

Shopifyのテーマ「Dawn」でバリアントごとに設定したコメント(HTMLタグもOK)を表示する方法

用途

  • 商品情報管理・編集

実装方法

  • Javascript
詳細を表示する

Shopifyの商品情報について、バリエーションごとに商品情報も一部切り替えて表示したいというリクエストを頂くことがあります。色々と方法は考えられますが、バリエーションメタフィールドを使った実装例です。

※2023年5月当時のポストで使用していたDawnバージョンとは、テーマの構造が異なっているため、コードは最新番のテーマに合わせて差し替えています)

テーマ「Dawn」で、バリアントごとに設定したコメント(HTMLタグもOK)を表示する方法


【設定手順①】バリアントメタフィールドの定義を追加し、対象商品のバリアント詳細画面でメタフィールドを編集


【設定手順②】「main-product.liquid」にschemeを、「ja.schema.json」にラベルを追加


【設定手順③】「main-product.liquid」にコードを追加


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

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

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

main-product.liquidのscheme


ja.schema.json


main-product.liquidの表示側コード

関連ポスト