# バリエーションで指定したカラーのサムネールを表示させたい。

**URL:** <https://community.shopify.com/t/topic/132362>\
**Category:** 技術的なQ＆A\
**Created:** [July 3, 2022, 12:15am UTC](https://community.shopify.com/t/topic/132362 "2022-07-03T00:15:41Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Shopifyの商品ページで、カラーごとのサムネールをアプリを使わずに表示したいという要望。Liquid（Shopifyのテンプレート言語）でpreselected variantの画像を使う例をスウォッチ内に入れたところ、全カラーが「現在選択中のカラー」の画像で表示される問題が発生。画像添付あり。

提案された解決策: スウォッチ生成のループ内で、value（カラー）に一致するvariantをproduct.variantsから検索し、該当variantのfeatured_image（そのバリアントの代表画像）のsrc/altを採用。例: variant.option1 == value で一致判定し、見つかったらbreakしてその画像を使用。

前提条件・注意: コードは未検証、カラーがoption1である構成を前提。同一カラーのサイズ違いなどの全バリアントで同じ画像がfeatured imageとして設定されていることが必要。

結果: 提案を適用後、期待通りカラーごとのサムネール表示に成功。現時点で課題や未解決点は提示されておらず、解決済み。

<div class="post-metadata">

**Author:** ![Rhythmos](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@Rhythmos](https://community.shopify.com/u/Rhythmos)\
**Post date:** [July 3, 2022, 12:15am UTC](https://community.shopify.com/t/topic/132362/1 "2022-07-03T00:15:41Z")

</div>

バリエーションで指定したカラーのサムネールを表示させたいです。

アプリで「G:Variant Image + Color Swatch」というアプリがありますが、アプリを使用しないで実装したいです。

参考サイト  
[https://nga-appstore.myshopify.com/products/asymmetric-strap-dorsay-pumps](https://nga-appstore.myshopify.com/products/asymmetric-strap-dorsay-pumps)

下記のURLを参考にして  
[https://shopify.github.io/liquid-code-examples/example/preselected-variant-image](https://shopify.github.io/liquid-code-examples/example/preselected-variant-image)

{%- assign featured\_image = product.selected\_or\_first\_available\_variant.featured\_image | default: product.featured\_image -%}  
 ![{{ featured_image.alt | escape }}]()

上記のコードを下記のコードに追加いたしました。

{% comment %} if color swatch {% endcomment %}  
{% if color\_swatch\_options contains option\_name and style == ‘swatches’ %}

{%- assign featured\_image = product.selected\_or\_first\_available\_variant.featured\_image | default: product.featured\_image -%}  
 ![{{ featured_image.alt | escape }}]()

\<input type=“radio” class=“product-form\_\_swatch\_\_input u-hidden-visually” id=“{{ id }}” name=“{{ option\_name }}-c” value=“{{ value | escape }}” data-position=“{{ option.position }}” {{ checked }}/\>  
  
  
{{ value }}

{% comment %}

サムネールは表示されましたが、バリアントで指定したカラー全部の数だけ、現在選択されているカラーのサムネールなっています。

 ![sample.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/4/e/74e7a4b17852dda27e8a7d6becbec33609e83fb4.jpeg)

自分でいろいろ調べましたが、思った解決策が見つかりません。

どうか、ご教授いただけると嬉しいです。

何卒よろしくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 6, 2022, 12:09pm UTC](https://community.shopify.com/t/topic/132362/2 "2022-07-06T12:09:18Z")

</div>

掲載されているコードの前後がどうなっているかによって変わってしまうのですが、

おそらく、下記のようなfor文の中に記載されたコードを掲載いただいたのではないかと思いますので、それを前提に回答いたします。

```markup
{% for option in product.options_with_value %}
  {% for value in option.values %}
     {{ 対象のコード }}
  {% endfor %}
{% endfor %}

```

下記のようにされてはいかがでしょうか？

```markup
{% for option in product.options_with_value %}
  {% for value in option.values %}

    {% comment %}掲載コードの赤色の部分を下記に書き換えます ここから{% endcomment %}
    {% assign featured_img_src='' %}
    {% assign featured_img_alt = '' %}
    {% for variant in product.variants %}
      {% if variant.option1 == value %}
        {% assign featured_img_src=variant.featured_image.src | img_url: '1024x' %}
        {% assign featured_img_alt = variant.featured_image.alt | escape %}
        {% break %}
      {% endif %}
    {% endfor %}
    
    {% comment %}掲載コードの赤色の部分を下記に書き換えます ここまで{% endcomment %}

  {% endfor %}
{% endfor %}

```

**注意点**

- 上記のコードは動作確認しておりません。
- 上記のコードは、同じカラーのバリエーションには全て同じ画像が設定してあることを前提にしています。(BlackのSサイズ、BlackのMサイズ、BlackのLサイズ、これら全てに、同じ画像がfeatured imageとして設定してあることを前提にしています。)
- カラーがoption1であることを前提にしています。

推測も前提も多いので、うまく動くか分かりませんが、

ご参考になれば幸いです。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![Rhythmos](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@Rhythmos](https://community.shopify.com/u/Rhythmos)\
**Post date:** [July 6, 2022, 12:33pm UTC](https://community.shopify.com/t/topic/132362/3 "2022-07-06T12:33:54Z")

</div>

うまく表示されました。

ありがとうございます。

本当に助かりました。