# バリエーション画像の下に売り切れを表示

**URL:** <https://community.shopify.com/t/topic/35302>\
**Category:** 技術的なQ＆A\
**Created:** [February 9, 2021, 3:08am UTC](https://community.shopify.com/t/topic/35302 "2021-02-09T03:08:10Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

Shopify Liquidで、バリエーション画像の直下に在庫状況（例: SOLD OUT）を表示したいという相談。`product.images` と `product.variants` を1つの `for` 文で同時に回せず、画像と在庫表示が別リストになってしまう点が課題だった。

回答では、画像は `image` ではなく各 `variant` が持つ `variant.image.src` を使い、`{% for variant in product.variants %}` でバリエーション単位に処理すればよいと案内。あわせて `variant.inventory_quantity` や `variant.available` で在庫判定できることも示された。

途中で、Liquidは初回描画時のみ評価されるため、選択中バリエーションに応じて動的にUIを切り替えるなら、Liquidで在庫情報をJavaScriptへ渡し、jQuery等で変更検知して表示更新する案も補足された。

最終的に、投稿者は `variant` ベースの実装で希望どおり表示でき、不具合なく設定完了。サムネイルクリック時の挙動変更は一時的な別問題として触れられたが、主題自体は解決済み。

<div class="post-metadata">

**Author:** ![matsudaira](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@matsudaira](https://community.shopify.com/u/matsudaira)\
**Post date:** [February 9, 2021, 3:08am UTC](https://community.shopify.com/t/topic/35302/1 "2021-02-09T03:08:10Z")

</div>

もう少しのところでつまずいており、どうぞ知恵をお貸しください。

Q：バリーエーション画像ごとに在庫数を表示し、売り切れと表示させたい

バリエーションのproductオブジェクトが  
画像は「image in product.images」  
在庫数は「variant in product.variants 」  
と違っている為、一度のFor文の中で回せないのですが、  
Liquidで「&」に当たる様な方法はあるのでしょうか？

{% for image in product.images & variant in product.variants %}- ![{{ image.alt | escape }}]() {% if variant.inventory\_quantity ==1 %}

在庫あり

{% else %}

SOLD OUT

{% endif %}
{% endfor %}

の中に- どうぞよろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 9, 2021, 6:18am UTC](https://community.shopify.com/t/topic/35302/2 "2021-02-09T06:18:50Z")

</div>

前提部分の画像の取得に関しまして、以下でバリエーションの画像が取得できるのではと思います。

[https://shopify.dev/docs/themes/liquid/reference/objects/variant#variant-image](https://shopify.dev/docs/themes/liquid/reference/objects/variant#variant-image)

```markup
{{ variant.image.src }}

```

上記私が勘違いしていましたら申し訳ありません。

---

<div class="post-metadata">

**Author:** ![matsudaira](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@matsudaira](https://community.shopify.com/u/matsudaira)\
**Post date:** [February 9, 2021, 8:53am UTC](https://community.shopify.com/t/topic/35302/3 "2021-02-09T08:53:34Z")

</div>

ご返信いただきありがとうございます！

画像パスの部分を

{{ variant.image.src }}

に変更し

{% for variant in product.variants %}

でFor文を作成したところ、希望通りの表示ができました！ありがとうございます！

ただ、サムネイルをクリックするとメイン画像に表示される設定が解除されてしまい、別ページで画像が開く設定になってしまいました。

また別の問題なので、もう少しチャレンジしてみます。

ありがとうございました。

---

<div class="post-metadata">

**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:** [February 10, 2021, 3:07am UTC](https://community.shopify.com/t/topic/35302/4 "2021-02-10T03:07:10Z")

</div>

LiquidはDOM構築前の言語なので、  
バリエーションごとに在庫数を判定する条件式は、  
初回読み込み時しか動かないと思いますが、動いてるのでしょうか？

例えば **variant.available** オブジェクトだけで何とかなるかもしれませんが、  
UIを作るためには、おそらく下記のようなプログラムを作っておかないといけない気がします。

- **在庫配列をLiquidでJavaScriptの変数に定義**
- **ユーザーが選択したバリエーションを、JQueryでchange判定**
- **html()関数等でHTML表示を切り替える**

---

<div class="post-metadata">

**Author:** ![matsudaira](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@matsudaira](https://community.shopify.com/u/matsudaira)\
**Post date:** [February 10, 2021, 4:37am UTC](https://community.shopify.com/t/topic/35302/5 "2021-02-10T04:37:06Z")

</div>

> **Show More**
>

ご返信頂きありがとうございます！

{% for image in product.images %}

{% for variant in product.variants %}

別々のulで読み込ませると下記画像のように表示はされるので

動いていると思います。

CSSで無理やり調整すればなんとかなるのですが、

{% for image in product.images %}と{% for variant in product.variants %}を一つのfor文にまとめる方法があるのか？可能なのか？

ご存知でしたらご教授下さいませ！

 ![image1.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/5/15ceaf30a0b89b8edfc8a6e0b3b8e18273a269e7.jpeg)

---

<div class="post-metadata">

**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:** [February 10, 2021, 5:57am UTC](https://community.shopify.com/t/topic/35302/6 "2021-02-10T05:57:38Z")

</div>

商品詳細でバリエーションを一覧表示したいのであればこれで取得出来ます。

[https://shopify.dev/docs/themes/liquid/reference/objects/variant/](https://shopify.dev/docs/themes/liquid/reference/objects/variant/)

```python
{% for variant in product.variants %}
  画像URL：{{ variant.image.src }}

  在庫数：{{ variant.inventory_quantity }}

  販売中（true）か売り切れか（false）：{{ variant.available }}
      
{% endfor %}

```

 ![スクリーンショット 2021-02-10 15.02.06.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/9/d9bc18ff46958468f7dc48f0fd991d965526e931.png)

---

<div class="post-metadata">

**Author:** ![matsudaira](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@matsudaira](https://community.shopify.com/u/matsudaira)\
**Post date:** [February 10, 2021, 7:43am UTC](https://community.shopify.com/t/topic/35302/7 "2021-02-10T07:43:59Z")

</div>

度々アドバイスいただきありがとうございます！

おかげさまで不具合なく設定できました！！！

この度は本当にありがとうございました。