How to show “xxx left in stock” on shopify product page?
Shopify – show ONLY XX AVAILABLE IN STOCK on product page
Start by adding snippet in product-template.liquid
<div id="stockstatus"> {% if product.variants.size < 2 %} {% assign current_variant= product.variants.first %} {% endif %} {% if current_variant.inventory_quantity < 1 %} <p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p> {% elsif current_variant.inventory_quantity < 6 %} <p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p> {% else %} <p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p> {% endif %} </div> <script> var inv_qty = {}; {% for var in product.variants %} inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }}; {% endfor %} </script>
Now in theme.js or theme.js.liquid
and edit function updateSku / _.updateSku
if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=zero>Sold Out!</span></p>"); else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=few>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>"); else $("#stockstatus").html("<p class=plenty><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
Now add some CSS in custom.css or styles.css
p.zero,p.few,p.plenty{background: #b2e7b2; display: inline-block; padding: 3px 10px;} p.few:before { content: "\f0e7"; font-family: "FontAwesome"; margin-right: 10px;} p.zero:before { content: "\f119"; font-family: "FontAwesome"; margin-right: 10px;} p.few,p.zero{color: #fff;background: #eb5050 !important;}
Also note, you can add css for the qty number by using selector
.variant-inventory{font-weight:bold} or more specifically #stockstatus .variant-inventory{font-weight:bold}
Hopefully it would work on your theme
this is exactly i am looking for!!!!!!!!!!!! thank you so much for your help!