FROM CACHE - jp_header
解決済

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

toi4
遊覧客
26 3 6

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

1 件の受理された解決策

toi4
遊覧客
26 3 6

成功

解決しました。

商品画像にある代替テキスト(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 %}
 

元の投稿で解決策を見る

4件の返信4

toi4
遊覧客
26 3 6

成功

解決しました。

商品画像にある代替テキスト(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 %}
 
microray
訪問者
1 0 0

はじめまして。

shopify初心者です。

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

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

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

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

 

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

_osamu_iwasaki_
Shopify Partner
185 47 193

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

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

toi4
遊覧客
26 3 6

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

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

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