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

Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例:その2

Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例:その2

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
詳細を表示する

こちらの方法は商品バリアント名に直接バッジを記載する方法でしたが、商品管理や受発注への影響を避けるためバリアント名自体は変更せず、バリアントピッカーにバッジを表示する方法です。
運用難易度が少々上がってしまいますが、JSON形式の商品メタフィールドを使ってバッジを表示させたいバリアントを指定します。

◆実装のメリット
・バリアント名そのものに影響を与えず、バッジの表示を追加可能
・バリアント名の変更による商品管理や受発注への影響を避けられる
・同様にSEOへの影響を避けられる

◆具体的な実装手順
①JSON型の商品メタフィールドを作成し、対象の商品のバリアントに応じた内容を指定
②商品テンプレートにLiquidセクションを追加しコードを挿入


テーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例:その2


【設定方法①】JSON型の商品メタフィールドを作成し、対象の商品のバリアントに応じた内容を指定


【(テーマRise/Dawnの場合)設定方法②】商品テンプレートにLiquidセクションを追加しコードを挿入


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

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

サンプルコード

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

商品テンプレートにLiquidセクションを追加しコードを挿入

関連ポスト