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

[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です。

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

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

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

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

[Nishi]

はじめまして

株式会社UnReactの西川と申します。

既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプル在庫数表示｜お手軽残りわずか表示」も有効な解決策の一つとしてご紹介させていただきます。

在庫数をリアルタイムで商品ページに表示することができる、非常に安価なアプリです。

下記、参考情報です。

シンプル在庫数表示｜お手軽残りわずか表示

Shopifyで残りわずか表示を挿入して在庫数表示が実現できるアプリについて徹底解説｜ご利用ガイド

その他にも 42 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

参考アプリ一覧