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
Extend this functionality to show quantity plus minus buttons also
References:
this is exactly i am looking for!!!!!!!!!!!! thank you so much for your help!
What theme is this for?
Didnt work when i tried. Im a noob at this, so the short frases makes me want to guess too.