# バリアントの色を変更したら表示させる画像も変更させたい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [November 17, 2020, 7:15am UTC](https://community.shopify.com/t/topic/25248 "2020-11-17T07:15:53Z")\ **Posts on this page:** 5\ **Page:** 1 ## AI-generated summary ShopifyのDebutテーマで、色などのバリアント選択に応じて商品画像を切り替える方法。複数画像を色ごとに切り替えたい要件。 解決策（最新）：Liquid（Shopifyのテンプレート言語）で、画像の代替テキスト（image.alt）にSKU（在庫管理単位）を入れ、選択中のバリアント（product.selected_or_first_available_variant）のSKUと一致する画像を表示。これにより、同一バリアントに紐づく複数画像の切替が可能。コードスニペットが中心の情報。 代替案：管理画面で各バリアントに画像を割り当て（バリエーション列の画像アイコン）ればDebutで切替可。ただし1枚のみの制約があり、複数画像の切替要件には不十分。 未解決点：ドロップダウンで色を選んだ際、リアルタイムでメイン画像が切り替わらず、リロード後に反映されるという報告あり。選択と表示の即時連動方法（JavaScript連動の実装など）が未提示。議論は継続中。
**Author:** ![toi4](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/toi4/32/122174_2.png) [@toi4](https://community.shopify.com/u/toi4)\ **Post date:** [November 17, 2020, 7:15am UTC](https://community.shopify.com/t/topic/25248/1 "2020-11-17T07:15:53Z")
Debutを元に今、商品詳細ページを作成しています。 そこで質問なのですが、Liquidでバリアントの色を選択したとき、同時に画像の表示もその色の画像に変更させるにはどのような方法を利用したら良いのでしょうか？ 例としてこちらのサイトのようなものが実現したい内容です。 [https://2xist.com/collections/mens-long-sleeve-shirts/products/essential-cotton-long-sleeve-henley-20100?variant=34384646963336](https://2xist.com/collections/mens-long-sleeve-shirts/products/essential-cotton-long-sleeve-henley-20100?variant=34384646963336) [https://www.tigerbottles.com/pages/custom-bottles?productid=4779990319241&size=500mL&subproductid=4780172574857](https://www.tigerbottles.com/pages/custom-bottles?productid=4779990319241&size=500mL&subproductid=4780172574857) どちらのサイトも色を選択するとその色に沿った画像を表示させています。 できれば変更させる画像は1枚だけでなく複数変更させたいです。 ---
**Author:** ![toi4](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/toi4/32/122174_2.png) [@toi4](https://community.shopify.com/u/toi4)\ **Post date:** [November 18, 2020, 6:10am UTC](https://community.shopify.com/t/topic/25248/2 "2020-11-18T06:10:05Z")
解決しました。 商品画像にある代替テキスト(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%} ![]() {% endif %} {% endfor %} ---
**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\ **Post date:** [November 18, 2020, 6:37am UTC](https://community.shopify.com/t/topic/25248/3 "2020-11-18T06:37:49Z")
商品管理のバリエーションの列に画像のマークがありますが、これをクリックして画像を当て込めば、DEBUTテーマであれば解決します。 ![スクリーンショット 2020-11-18 15.35.49.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/f/a/dfa8a0a4dbbda058c8b30b44f2377f18f805b56f.png) ---
**Author:** ![toi4](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/toi4/32/122174_2.png) [@toi4](https://community.shopify.com/u/toi4)\ **Post date:** [November 18, 2020, 7:26am UTC](https://community.shopify.com/t/topic/25248/4 "2020-11-18T07:26:06Z")
ご回答ありがとうございます。 確かにそこに画像を当て込めば、バリアントごとに画像は変えれるのですが、そこだと一枚しか画像を変えることができないですね。 今回やりたかったこととしては色(別のバリアント)を選択した時に複数枚の画像を変更したかったので自分のやり方で問題ないと思います。 ---
**Author:** ![microray](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@microray](https://community.shopify.com/u/microray)\ **Post date:** [September 16, 2021, 12:09pm UTC](https://community.shopify.com/t/topic/25248/5 "2021-09-16T12:09:40Z")
はじめまして。 shopify初心者です。 variantごとに画像切り替えのため、コードを参考にさせていただいております。 しかし、このままだと、ドロップダウンで色選択しても、サムネイルしか変わりません（デフォルトの状態）。 リロードするとドロップダウンで選択された項目が反映されるのですが、、、 どのようにすればドロップダウンでの選択と表示させる画像がリアルタイムで連動するのでしょうか？ よろしくお願いいたします。