# Dawn商品ページにバリエーションが設定されていた場合の商品画像初期値について **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [April 8, 2023, 3:39am UTC](https://community.shopify.com/t/dawn/206537 "2023-04-08T03:39:38Z")\ **Posts on this page:** 6\ **Page:** 1 ## AI-generated summary Dawnテンプレートで商品バリエーションに画像を設定すると、商品ページ初期表示時にメイン画像ではなくバリエーション画像が表示される問題について質問が投稿されました。 **提案された解決策:** Qcoltdが、Dawn 9.0.0向けに`product-media-gallery.liquid`ファイルの編集方法を提示: - 68行目付近のコードを変更し、`featured_media`の割り当てロジックを調整 - 92行目付近のコードも修正 **発生した追加問題:** 最初の修正後、バリエーションのない商品でメイン画像が表示されず、サムネイルに2個の画像が表示される不具合が発生。 **最終的な解決:** nagisaneが提案されたコードを基に独自にカスタマイズを実施: - 68行目のコードを再調整 - 92行目は初期コードのまま使用 - 232行目付近のコードを変更 Dawn 8.0.1で表面上は理想通りの表示を実現したと報告。ただし、素人カスタマイズのため完全な検証は未実施との注記あり。
**Author:** ![nagisane](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@nagisane](https://community.shopify.com/u/nagisane)\ **Post date:** [April 8, 2023, 3:39am UTC](https://community.shopify.com/t/dawn/206537/1 "2023-04-08T03:39:38Z")
現在、DAWNのテンプレートを使用してショップを制作中なのですが、商品のバリエーション登録を行って、バリエーションごとに画像を設定すると、実際の商品ページを開いた時に、商品のメディア欄に登録したメイン画像ではなく、バリエーションの一番上の画像が表示されてしまいます。 商品ページを開いた時の商品画像初期値は、商品のメイン画像にして、バリエーションを選択すると、バリエーション画像に切り替わるようにしたいです。 ※バリエーション選択欄については、ドロップダウン式を採用しており、当方でliquidをいじって初期値が「選択してください」になるようにしました。 お詳しい方がいらっしゃいましたら、是非ご教授願います。 ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [April 10, 2023, 10:57am UTC](https://community.shopify.com/t/dawn/206537/2 "2023-04-10T10:57:55Z")
[https://community.shopify.com/post/1448100](https://community.shopify.com/post/1448100) 上記の投稿が類似の内容かと思いますが、違う場合は申し訳ありません。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [April 10, 2023, 11:22am UTC](https://community.shopify.com/t/dawn/206537/3 "2023-04-10T11:22:18Z")
Dawnのバージョンにもよるのですが、 もし、9.0.0をお使いであれば、 ストア管理画面 \> オンラインストア \> テーマ \> コード編集 にて、 スニペット(snippets) \> product-media-gallery.liquid を下記のように編集します。 ※十分に検証しておりませんので、不具合がある可能性もあります。 68行目付近 ```markup {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} ``` ↓ ```markup {%- assign featured_media = product.featured_media -%} {%- if product.selected_variant -%} {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} {%- endif -%} ``` 92行目付近 ```markup {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} ``` ↓ ```markup {%- assign exclude_media_id = product.featured_media.id -%} {%- if product.selected_variant -%} {%- assign exclude_media_id = product.selected_or_first_available_variant.featured_media.id -%} {%- endif -%} {%- unless media.id == exclude_media_id -%} ``` お使いのDawnのバージョンによっては、 上記がそのまま適用できない可能性もあります。 その場合はバージョンをお教えいただければ検証できるかもしれません。 ご参考まで。 (キュー田辺) ---
**Author:** ![nagisane](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@nagisane](https://community.shopify.com/u/nagisane)\ **Post date:** [April 11, 2023, 12:32am UTC](https://community.shopify.com/t/dawn/206537/4 "2023-04-11T00:32:19Z")
詳しいご回答ありがとうございます！ 早速コードを書き換えてみたところ、理想通りの表示になりました！ 今のところとくに不具合もなさそうです。 本当にありがとうございました。 ---
**Author:** ![nagisane](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@nagisane](https://community.shopify.com/u/nagisane)\ **Post date:** [April 11, 2023, 2:58am UTC](https://community.shopify.com/t/dawn/206537/5 "2023-04-11T02:58:36Z")
詳しいご回答ありがとうございます！ 早速コードを書き換えてみたところ、理想通りの表示になったと思ったのですが、後々よく確認してみると、バリエーションのない商品のメイン画像(大きい画像)が表示されなかったり、バリエーションのある商品に関してはサムネイルに1枚目の画像が2個続けて表示される感じになってしまいました。 こちらについても解決策わかればご教授いただけますと幸いです。 ---
**Author:** ![nagisane](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@nagisane](https://community.shopify.com/u/nagisane)\ **Post date:** [April 11, 2023, 7:13am UTC](https://community.shopify.com/t/dawn/206537/6 "2023-04-11T07:13:37Z")
度々失礼いたします。 教えていただいたコードを元にいろいろ書き換えて試していたら、ひとまず表面上は、理想通りの表示になったようなので、ご報告致します。 ※素人のカスタマイズなので、おかしな部分があるかもしれません。 ↓68行目付近の教えていただいたコードを下記のように変更 ```markup {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} {%- if product.selected_variant -%} {%- assign featured_media = product.featured_media -%} {%- endif -%} ``` ・92行目付近は初期コードのまま使用 ・232行目付近から下記のように変更 ```markup {%- for media in product.media -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} {%- liquid capture media_index if media.media_type == 'model' increment model_index elsif media.media_type == 'video' or media.media_type == 'external_video' increment video_index elsif media.media_type == 'image' increment image_index endif endcapture assign media_index = media_index | plus: 1 -%} - {%- if media.media_type == 'model' -%} {%- render 'icon-3d-model' -%} {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} {%- render 'icon-play' -%} {%- endif -%} {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }} {%- endcapture -%} {%- endunless -%} {%- endfor -%} ``` ↓ ```markup {%- if product.selected_variant -%} {%- for media in product.media offset:1 -%} {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} {%- liquid capture media_index if media.media_type == 'model' increment model_index elsif media.media_type == 'video' or media.media_type == 'external_video' increment video_index elsif media.media_type == 'image' increment image_index endif endcapture assign media_index = media_index | plus: 1 -%} - {%- if media.media_type == 'model' -%} {%- render 'icon-3d-model' -%} {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} {%- render 'icon-play' -%} {%- endif -%} {%- capture thumbnail_id -%} Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }} {%- endcapture -%} {%- endunless -%} {%- endfor -%} ``` ※バージョンはDawn 8.0.1でした。 改めて、この度はご回答いただきありがとうございました！