ShopifyのDawnテーマの商品ページで、ボタン型の「バリエーションピッカー」に各バリエーション（Color）に紐づく画像を表示したいという要望。管理画面では「Color」「Size」を設定し、Colorごとにバリエーション画像を割り当て済み。
sections/main-product.liquid（285行付近）で {{ variant.image.src }} を使って画像表示を試みるも、画像が出ない問題。forループ（{%- for option in product.options_with_values -%}）内ではテキスト {{ value }} は表示されるが、画像取得はできていない。
技術的ポイント: ボタン型ピッカー内で各オプション値に対応するvariantを正しく参照できていない可能性。変数スコープや選択中／対応中のvariantの特定方法、画像の紐づけロジックの記述が課題。
用語補足: バリエーションピッカー＝商品オプション選択のUI。variant.image.src＝各バリエーションに割り当てた画像の参照。
添付: 管理画面設定のスクリーンショット、コード断片が理解に重要。
現状: 具体的なLiquidの書き方の支援を求めており、解決策は未提示で継続中。
Dawnテーマを使用しています。
商品ページの「バリエーションピッカー」タイプはボタンに設定した状態で「バリエーション画像」を表示したいです。
商品管理の設定はオプションで「Color」「Size」を追加して「バリエーション」の「バリエーション画像」を「Color」毎に設定しています。
テンプレートの「sections/main-product.liquid」内285行目に{{ variant.image.src }}にタグが入っていますが画像が表示されません。
{%- for option in product.options_with_values -%}
{%- endfor -%}
「Color」「Size」で設定したテキストは {{ value }} で問題なく表示されています。
こちらの書き方をご教授いただけると幸いです。
よろしくお願いします。