How can I display a low stock message for product variants?

[Farok]

I would like to display a message when a variant is low on stock. 

I've found and modified this part of code:

{% assign stock = 0 %}            
              {% for variant in product.variants %}
              {%capture stock %}
              {{ stock | plus:variant.inventory_quantity }}
              {% endcapture %}
              {% endfor %}
              
              {%assign stock = stock | times:1%}

			  {% if stock < 3 and stock > 0 %}
        <span class="label inventory"; style= "color: red";><h4>&#10071; Only <b> {{stock}}</b> left!</h4></span>
			  {% endif %}

However, this doesn't work with variants. It always shows. 

Then I've done this, which seemed logical to me, but didn't work either. I know some basics but I'm stuck here. 

 {% if variant.inventory_quantity < 3 and variant.inventory_quantity > 0 %}
        <span class="label inventory"; style= "color: red";><h4>&#10071; Only <b> {{stock}}</b> left!</h4></span>
			  {% endif %}

I guess the issue is that if the customer changes the variant, the page doesn't reload. 

Any solutions? Thanks in advance!

[dmwwebartisan]

@Farok 

Please try this code 

 {% if product.available %}
     
        {% assign how_many_in_stock = 0 %}
        {% for variant in product.variants %}
          {% if variant.available %}
              {% assign how_many_in_stock = how_many_in_stock | plus: variant.inventory_quantity %}
          {% endif %}
        {% endfor %}
        {% if how_many_in_stock < 15 %}
        <p class="low-stock-notification">Hurry, low stock!</p> 
        {% endif %}
      
      {% endif %}

Thanks!

[Farok]

Thanks for the reply! 

Unfortunate, this hasn't worked. It still shows the "Low Stock" Notification on all variants

Eg. 

https://5z52je85ohj9asnk-39359021187.shopifypreview.com

Here there is only stock in S. All others are sold out. It still shows on every variant 

[PaulNewton]

To get this working with variant selection is an advanced customization as the solution can vary wildly between themes.

Merchants that need this can contact me at [email protected] with this topic url, store url, theme name, and any other relevant info.

[SpotterJ]

Did you find a solution for this?

[Zel_]

You can check out this app. It is exactly providing what you asked for. Displays remaining/left in stock just above the add-to-cart button and works for variant levels. The threshold can be also selected within the app so that you can only display the widget if you are low in stock.