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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
Leave a Reply