商品の在庫数が指定数以下になった場合、購入ボタン付近に「残りわずか」と表示させたいです。

[Yr3]

お世話になります。
初投稿の為、内容に不備などがありましたらご容赦いただけますと幸いです。
私自身liquidの知識が浅いので、詳しい方の知恵をお借りしたいと思い投稿させていただきました。

◆使用しているテーマ
有料テーマ　Prestige 6.0.0

◆現在の状態
購入時からliquidファイルの編集はしておりません。

◆やりたいこと
在庫数が５個以下になった場合、購入ボタン付近に「残りわずか」と表示させたいです。

大変お手数なのですが、ご教示いただけますと幸いです。
何卒よろしくお願い致します。

[株式会社フルバランス · Accepted solution]

Yr3様

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

商品ページで在庫状況がわかると親切ですよね。

以下記事が参考になるかと存じます。

https://ec-side-project.com/shopoify-inventory/

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E5%95%86%E5%93%81%E3%81%AE%...

一例ですが、大まかな流れとしては、

1.商品の在庫数を取得　product.variants.first.inventory_quantity

2. 在庫数が５個以下だったらという分岐を作成

　例）{% if product.variants.first.inventory_quantity <= 5 %}

3.if文の中に「残りわずか」を表示させるhtml要素を追記

　例）<div class="few_stock">残りわずか</div>

4. product-form.liquidにある購入ボタン要素付近に上記を記載

ただし、複数バリエーションがある場合に、バリエーション選択時に表示切り替えを行う場合は別途javascriptなどでの制御が必要になるかと存じます。

何かヒントになりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　渡邉

[Yr3]

渡邉様

はじめまして、Yr3です。

ご確認いただきありがとうございます！

とてもわかりやすい解説助かりました。

参考記事も含め試させていただきます。

この度はありがとうございました！