# Variant 選択する時にサムネ画像表示する

**URL:** <https://community.shopify.com/t/variant/176147>\
**Category:** 技術的なQ＆A\
**Created:** [December 14, 2022, 6:26am UTC](https://community.shopify.com/t/variant/176147 "2022-12-14T06:26:28Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

商品のバリアント（variant）選択時にサムネイル画像を表示する方法についての質問と回答。

**質問内容：**
- テーマをカスタマイズしており、バリアント選択時にサムネイル画像を表示したい
- JavaScriptでの実装が必要か、バリアントIDと画像IDの紐付け方法について疑問

**回答内容：**
- JavaScriptではなく、`.liquid`ファイルの編集を推奨
- Dawnテーマを例にした実装手順を提供：
  1. 管理画面でバリアント（例：「カラー」オプション）にサムネイル画像を設定
  2. `main-product.liquid`ファイルの該当箇所を編集
  3. 条件分岐で特定オプション（`option.name == "color"`）の場合に画像を表示
  4. `variant.option1`を使用してバリアント値と画像を紐付け
  5. 画像サイズは`'80x'`で指定（任意の数値に変更可能）

**技術的ポイント：**
- CSSスタイルを直接指定して不要な枠線などを削除
- 複数オプションがある場合は`option2`、`option3`で判定可能

<div class="post-metadata">

**Author:** ![VXUT-shop](https://avatars.discourse-cdn.com/v4/letter/v/c37758/32.png) [@VXUT-shop](https://community.shopify.com/u/VXUT-shop)\
**Post date:** [December 14, 2022, 6:26am UTC](https://community.shopify.com/t/variant/176147/1 "2022-12-14T06:26:28Z")

</div>

お世話になります。

variant 選択する時にサムネ画像表示したいですが何が決めているんですか。

テームのカスタマイズしているのでJSの実装が必要です。

variantはinputです。

やりたいのは：

variantの選択する時にvariantのIDとサムネ画像のIDをハンドルしたいですが無理ですか。

IDがあったら表示する。

すみませんがよろしくお願いします。

---

<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:** [December 20, 2022, 11:41am UTC](https://community.shopify.com/t/variant/176147/2 "2022-12-20T11:41:22Z")

</div>

variantの画像を表示する件ですが、テーマをカスタマイズしているとのことですので、

javascriptではなく.liquidファイルを編集する形はいかがでしょうか。

カスタマイズしているテーマが不明のため、

ShopifyのDawnテーマを元に画像を表示させる方法を説明します。

### **手順1**

サムネイルを表示したいオプションを、仮に「カラー」とします。

下記画像のように、「管理画面 \> 商品管理]」にて、オプション「color」のバリエーションのサムネイル画像を、全て設定します。

 ![スクリーンショット 2022-12-20 19.52.57.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/a/aa82b900d0d7eeeda7bbf2bd27627dd4285e6bc6.png)

### ### **手順2**

section \> main-product.liquidの{%- for value in option.values -%}内にある、

下記部分が初期状態でオプションのテキストを表示しています。

```markup

```

この部分を下記のように変更いただくと、

```markup
{%- if option.name == "color" -%}
  
{%- else -%}
  
{%- endif -%}

```

下記画像赤枠のようにバリエーションで登録した画像を表示することが可能です。

 ![Qcoltd_0-1671536251958.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/c/5cecf8814be2bb3708d31e3136832dd9c8491c27.jpeg)

### ### **設定について**

```markup
{%- if option.name == "color" -%}

```

colorはオプションで設定した名前となります。

````markup

「style="border: none; border-radius: 0; padding: 0;"」は画像が表示する際不要な線などをなくすために入れています。

直接スタイルを設定していますが、classを設定し別途cssファイルに格納いただいても問題ありません。

```markup
{%- if variant.option1 == value -%}

````

今回の例では、オプションの1つ目を「カラー」としたため、vriant.option1を判定に使用しました。

質問者様が画像を表示したいオプションが、2であればoption2を、3であればoption3を設定してください。

```markup
{%- assign variant_images_src=variant.image.src | img_url: '80x' -%}

```

'80x’は表示する画像のサイズとなります。

現在は80pxで設定していますが、任意の数値に変更してください。

ご参考まで。

(キュー小坂)