初期状態でバリエーションを未選択の状態にしたい

[noki0905]

商品にバリエーションをもたせて、各バリエーションに紐づく画像を設定しています。
すると、商品ページでバリエーションを変えた際に、追従して各バリエーションの画像に切り替わります。

しかし、商品ページを開いた初期状態でいずれかのバリエーションが選択されている状態のため、本来初めに表示したい画像とは別の画像が表示されてしまいます。

▼実現したい状況
商品ページを開いた初期状態で、バリエーション選択がされていない状態にする。
各バリエーションの変更に追従して、画像が切り替わる。

テーマは「Simple」を使用しており、空欄のOptionを追加してSelectedにしようとしたのですが、
どうやらバリエーション選択のセレクトボックスは別の箇所で指定されているらしく見当たりませんでした。

よろしくお願いいたします

[Jizo_Inagaki · Accepted solution]

この件は英語フォーラムの以下のスレッドにていくつか対応策が書かれていましたので、いずれかで実現できるかもしれません。

https://community.shopify.com/c/Shopify-Discussion/How-can-I-choose-the-default-product-image/td-p/3...

なお、以下は興味があったので試作してみた案です。一応Debutでは動いたのでSimpleでも動くかもしれません。

結構強引な方法なので、仮に動いたとしても問題が出るようなら別の案を試されることをお勧めします。

目的は以下の通りです

• 商品ページにアクセス時(=バリエーションが選ばれていない状態)に任意の画像をメイン画像として表示させる

手順は以下の通りです。

1. 管理画面の商品登録画面の「メディア」でメイン画像に表示させたい画像を設定する(左端の一番大きな画像/ドラッグで順序を変更可能)
2. product.liquidかproduct-template.liquidの下部にコードを追加

上記2で追加するのは以下のコードです。(querySelectorで指定するクラス名はサムネイル画像を包含するaタグのクラスを指定してください)

{% unless product.selected_variant %}
  <script>
    var f = function() {
      document.querySelector('.product-single__thumbnails .product-single__thumbnail').click();
      window.removeEventListener( 'load', f, false );
    }
    window.addEventListener( 'load', f, false );
  </script>
{% endunless %}

意図する動作は以下の通りです。

• バリエーションが表示されていない場合にJavascriptのコードを出力
• ページのロードが完了した時点で、サムネイルの最初の画像をJavascriptでクリックしてメイン画像を切り替える

もしも内容がご要望と違う場合は申し訳ありません。

[noki0905]

ご回答ありがとうございます。
英語フォーラムも確認しまし、試作して頂いたコードで動作を確認しました。
メインの画像が切り変わるのに少し時間を要しますが、目的にかなったものとなっています。

ありがとうございました。
今後ともよろしくお願いいたします。