# 商品ページにてバリエーションピッカーで選択したオプションごとの在庫に応じ任意のテキストを表示させたい。

**URL:** <https://community.shopify.com/t/topic/414835>\
**Category:** 技術的なQ＆A\
**Created:** [May 18, 2025, 7:23am UTC](https://community.shopify.com/t/topic/414835 "2025-05-18T07:23:15Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

**問題の内容:**

バリエーション（オプション）付き商品で、在庫切れ時に「※予約商品になります【お届け日数2ヶ月前後】」というテキストを表示させたいが、以下の不具合が発生:

- オプションが複数ある場合、選択に関わらず常に表示される
- 全オプション在庫切れの場合、オプション数分だけ重複表示される

**原因:**

現在のLiquidコードは、ページ読み込み時のみ処理され、`for`ループでバリエーション数分出力されるため。バリエーションピッカーの選択変更に動的に対応していない。

**解決策:**

Qcoltd氏が提供したJavaScriptベースのソリューション:

- 注意文を初期状態で非表示に設定
- JavaScriptで選択されたバリエーションの在庫数をチェック
- 在庫状況に応じて表示/非表示を切り替え
- ページ読み込み時点の在庫数を基準（リアルタイム更新ではない）

**結果:**

提供されたコードで想定通りに動作し、問題が解決された。ただし、一部の有料テーマでは動作しない可能性がある。

<div class="post-metadata">

**Author:** ![\_8\_5](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_8_5/32/391155_2.png) [@\_8\_5](https://community.shopify.com/u/_8_5)\
**Post date:** [May 18, 2025, 7:23am UTC](https://community.shopify.com/t/topic/414835/1 "2025-05-18T07:23:15Z")

</div>

複数オプションがある製品を販売しています。

商品ページにてバリエーションピッカーで選択したオプションごとの在庫に応じ、"※予約商品になります【お届け日数2ヶ月前後】"と表示させる方法はありますでしょうか？

現在カスタマイズされたliquidに下記コードを記述しています。

{% for variant in product.variants %}  
{% if variant.inventory\_management == “shopify” and variant.inventory\_quantity \< 1 %}  
{% if product.variants.first.inventory\_policy == ‘continue’ %}

※予約商品になります  
【お届け日数2ヶ月前後】
{% endif %} {% endif %} {% endfor %}

オプションが無い製品に関しては問題ないのですが、オプションが複数ある製品はオプション数に応じて"※予約商品になります【お届け日数2ヶ月前後】"と複数回表示されてしまいます。

3パターンの画像を添付しますのでアドバイス頂きたいです。

①オプション無し/在庫切れ

こちらは特に問題ない

 ![オプション無し売り切れ.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/9/97e6291dc9213520973daaad9c9392ed89ddea4f.jpeg)

②オプション2種類あり/1オプションのみ在庫無し

バリエーションピッカーでどちらを選択しても"※予約商品になります【お届け日数2ヶ月前後】"と表示される。

 ![オプションあり。片方売り切れ.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/c/c4b956576bcc5f0b3e46b91a3e914c5ad29ce396.jpeg)

③オプション2種類あり/全オプション在庫無し

"※予約商品になります【お届け日数2ヶ月前後】"と2回表示される。

 ![オプション有り。全て売り切れ.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/3/3ef5be9b59028866a9cad558c31124ef338e02a0.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:** [May 19, 2025, 3:55am UTC](https://community.shopify.com/t/topic/414835/2 "2025-05-19T03:55:14Z")

</div>

@_8_5 様

ご記載いただいたコードですと、商品詳細ページを開いた際にのみ処理が動くため、

オプションの在庫がない②の場合、表示が表示されたままとなります。

オプションの在庫が双方ない③の場合は、for文でオプションの数分処理を行っているので、２重に表示が出力されます。

上記の問題を解決するには、注意文を非表示で設定しておき、

JavaScriptを利用し、商品（バリエーションごと）の在庫数を確認し、注意文を表示・非表示されることが良いと思われます。

下記のコードをカスタマイズされたliquidに記載いただくと、ご要望の内容で表示されるかと思います。

また、在庫数はユーザーが商品詳細ページを開いた時点の在庫数をもとにしておりますので、リアルタイムでの在庫数のチェックは行なっておりません。

※テンプレート（主に有料）によっては下記の仕組みで動かないテンプレートもございますので、その場合はご了承ください。

```markup
{%- comment -%}初期状態は非表示にしておく{%- endcomment -%}

  ※予約商品になります
【お届け日数2ヶ月前後】

```

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![\_8\_5](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_8_5/32/391155_2.png) [@\_8\_5](https://community.shopify.com/u/_8_5)\
**Post date:** [May 19, 2025, 4:17am UTC](https://community.shopify.com/t/topic/414835/3 "2025-05-19T04:17:29Z")

</div>

非常に助かりました!

想定通り作動致しました！

ありがとうございます。