バリアントの色を変更したら表示させる画像も変更させたい

[toi4]

Debutを元に今、商品詳細ページを作成しています。

そこで質問なのですが、Liquidでバリアントの色を選択したとき、同時に画像の表示もその色の画像に変更させるにはどのような方法を利用したら良いのでしょうか？

例としてこちらのサイトのようなものが実現したい内容です。

https://2xist.com/collections/mens-long-sleeve-shirts/products/essential-cotton-long-sleeve-henley-2...

https://www.tigerbottles.com/pages/custom-bottles?productid=4779990319241&size=500mL&subproductid=47...

どちらのサイトも色を選択するとその色に沿った画像を表示させています。

できれば変更させる画像は1枚だけでなく複数変更させたいです。

[toi4 · Accepted solution]

解決しました。

商品画像にある代替テキスト(image.alt)にskuをいれ、表示するvariantのskuとimage.altが一致する場合の画像を表示させることによって画像の出しわけができました。

{%- assign current_variant = product.selected_or_first_available_variant -%}

{% for image in product.images %}

{% if current_variant.sku == image.alt%}

<img src="" >

{% endif %}

{% endfor %}

[_osamu_iwasaki_]

商品管理のバリエーションの列に画像のマークがありますが、これをクリックして画像を当て込めば、DEBUTテーマであれば解決します。

[toi4]

ご回答ありがとうございます。

確かにそこに画像を当て込めば、バリアントごとに画像は変えれるのですが、そこだと一枚しか画像を変えることができないですね。

今回やりたかったこととしては色(別のバリアント)を選択した時に複数枚の画像を変更したかったので自分のやり方で問題ないと思います。

[microray]

はじめまして。

shopify初心者です。

variantごとに画像切り替えのため、コードを参考にさせていただいております。

しかし、このままだと、ドロップダウンで色選択しても、サムネイルしか変わりません（デフォルトの状態）。

リロードするとドロップダウンで選択された項目が反映されるのですが、、、

どのようにすればドロップダウンでの選択と表示させる画像がリアルタイムで連動するのでしょうか？

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