# 初期状態でバリエーションを未選択の状態にしたい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [October 5, 2020, 11:57am UTC](https://community.shopify.com/t/topic/22258 "2020-10-05T11:57:55Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary 商品ページでバリエーションごとの画像連動はできている一方、初期表示時に特定バリエーションが自動選択されるため、意図しない画像が最初に表示される問題が相談された。要望は、初期状態ではバリエーション未選択にしつつ、選択後は対応画像へ切り替わる動作。\n\n回答では、英語フォーラムの関連スレッドが案内されたほか、暫定的な実装案が提示された。内容は以下の通り。\n- 管理画面の「メディア」で、初期表示したい画像を先頭に設定\n- `product.liquid` または `product-template.liquid` の下部にコードを追加\n- `product.selected_variant` がない場合のみ JavaScript を出力し、ページ読込後に先頭サムネイルをクリックしてメイン画像を切り替える\n\nこの方法は Debut テーマで確認済みで、Simple でも動く可能性があるが、やや強引な回避策と説明された。最終的に、質問者は提示コードで目的どおり動作したと報告しており、切り替えに少し時間はかかるものの、実質的に解決済み。
**Author:** ![noki0905](https://avatars.discourse-cdn.com/v4/letter/n/258eb7/32.png) [@noki0905](https://community.shopify.com/u/noki0905)\ **Post date:** [October 5, 2020, 11:57am UTC](https://community.shopify.com/t/topic/22258/1 "2020-10-05T11:57:55Z")
商品にバリエーションをもたせて、各バリエーションに紐づく画像を設定しています。 すると、商品ページでバリエーションを変えた際に、追従して各バリエーションの画像に切り替わります。 しかし、商品ページを開いた初期状態でいずれかのバリエーションが選択されている状態のため、本来初めに表示したい画像とは別の画像が表示されてしまいます。 ▼実現したい状況 商品ページを開いた初期状態で、バリエーション選択がされていない状態にする。 各バリエーションの変更に追従して、画像が切り替わる。 テーマは「Simple」を使用しており、空欄のOptionを追加してSelectedにしようとしたのですが、 どうやらバリエーション選択のセレクトボックスは別の箇所で指定されているらしく見当たりませんでした。 よろしくお願いいたします ---
**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:** [October 6, 2020, 11:10am UTC](https://community.shopify.com/t/topic/22258/2 "2020-10-06T11:10:39Z")
この件は英語フォーラムの以下のスレッドにていくつか対応策が書かれていましたので、いずれかで実現できるかもしれません。 [https://community.shopify.com/c/Shopify-Discussion/How-can-I-choose-the-default-product-image/td-p/372337](https://community.shopify.com/c/Shopify-Discussion/How-can-I-choose-the-default-product-image/td-p/372337) なお、以下は興味があったので試作してみた案です。一応Debutでは動いたのでSimpleでも動くかもしれません。 結構強引な方法なので、仮に動いたとしても問題が出るようなら別の案を試されることをお勧めします。 目的は以下の通りです - 商品ページにアクセス時(=バリエーションが選ばれていない状態)に任意の画像をメイン画像として表示させる 手順は以下の通りです。 1. 管理画面の商品登録画面の「メディア」でメイン画像に表示させたい画像を設定する(左端の一番大きな画像/ドラッグで順序を変更可能) 2. product.liquidかproduct-template.liquidの下部にコードを追加 上記2で追加するのは以下のコードです。(querySelectorで指定するクラス名はサムネイル画像を包含するaタグのクラスを指定してください) ```markup {% unless product.selected_variant %} {% endunless %} ``` 意図する動作は以下の通りです。 - バリエーションが表示されていない場合にJavascriptのコードを出力 - ページのロードが完了した時点で、サムネイルの最初の画像をJavascriptでクリックしてメイン画像を切り替える もしも内容がご要望と違う場合は申し訳ありません。 ---
**Author:** ![noki0905](https://avatars.discourse-cdn.com/v4/letter/n/258eb7/32.png) [@noki0905](https://community.shopify.com/u/noki0905)\ **Post date:** [October 7, 2020, 4:29am UTC](https://community.shopify.com/t/topic/22258/3 "2020-10-07T04:29:39Z")
ご回答ありがとうございます。 英語フォーラムも確認しまし、試作して頂いたコードで動作を確認しました。 メインの画像が切り変わるのに少し時間を要しますが、目的にかなったものとなっています。 ありがとうございました。 今後ともよろしくお願いいたします。