# Dawnテーマの商品ページで「バリエーションピッカー」でバリエーション画像を表示したいです。 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [November 15, 2021, 2:13am UTC](https://community.shopify.com/t/dawn/78126 "2021-11-15T02:13:07Z")\ **Posts on this page:** 1\ **Page:** 1 ## AI-generated summary 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の書き方の支援を求めており、解決策は未提示で継続中。
**Author:** ![Anonymous\_08c5a3679bd76251614e6c783b120416](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@Anonymous\_08c5a3679bd76251614e6c783b120416](https://community.shopify.com/u/Anonymous_08c5a3679bd76251614e6c783b120416)\ **Post date:** [November 15, 2021, 2:13am UTC](https://community.shopify.com/t/dawn/78126/1 "2021-11-15T02:13:07Z")
Dawnテーマを使用しています。 商品ページの「バリエーションピッカー」タイプはボタンに設定した状態で「バリエーション画像」を表示したいです。 商品管理の設定はオプションで「Color」「Size」を追加して「バリエーション」の「バリエーション画像」を「Color」毎に設定しています。 ![ダウンロード.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/3/23f31a2abcc123ce7aabeeb6f45e06c933b192b2.jpeg) テンプレートの「sections/main-product.liquid」内285行目に{{ variant.image.src }}にタグが入っていますが画像が表示されません。 ```markup {%- for option in product.options_with_values -%} {%- endfor -%} ``` 「Color」「Size」で設定したテキストは {{ value }} で問題なく表示されています。 こちらの書き方をご教授いただけると幸いです。 よろしくお願いします。