How to show low inventory for all variants on product page?

[Andia]

im trying to use this code:

{% if product.variants.first.inventory_quantity < 5 and product.variants.first.inventory_quantity > 0 %} <p style="color: #000000; text-align:center">ONLY {{ product.variants.first.inventory_quantity }} LEFT</p> {% elsif product.variants.first.inventory_quantity < 1 %} <p style="color: #000000; text-align:center">SOLD OUT</p> {% endif %}

but it only seems to work on the first variant and doesnt work when i change variants (ie XS, S, M etc)

Can anyone help with adjusting the code??

[AnneLuo]

Hello, @Andia 

What theme are you using? Can you share your store url?

[Andia]

Dawn theme.

www.andiacollective.com.au

[theycallmemakka]

Hi @Andia ,

You will have to modify JS to make this work. Currently you have added only the DOM elements. To make it dynamic, we will have to add custom JS[Most probably in global.js]. 

[Andia]

how do i do this?!