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

解決済
Highlighted
遊覧客
20 3 4

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枚だけでなく複数変更させたいです。

0 件の「いいね!」
Highlighted
遊覧客
20 3 4

成功

解決しました。

商品画像にある代替テキスト(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 %}
 
0 件の「いいね!」
Highlighted
遊覧客
27 2 38

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

スクリーンショット 2020-11-18 15.35.49.png

1 件の「いいね!」
Highlighted
遊覧客
20 3 4

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

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

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

0 件の「いいね!」