How can I add a stock level indicator to my product page?

[lordlauzi]

I'd like to add something to my product page like shown on the picture.

Something like a Green dot with message if the product is available and red dot if it's not.

I do not have any experience in coding, I copy pasted most codes from the community.

Please help

[Erica]

Hi @lordlauzi !

Erica here from Shopify.

We actually have an app that would do something very similar.

With Product Inventory Information you can set up something like this:

You could also look into Shopper & Stock Counter, that might not be exactly what you had in mind, but it's a useful addition and helps boosting sales by creating urgency.

These apps have different plans and pricing, but offer a free trial, so you could test them and see how they work for you.
Just remember to uninstall them by the end of the free trial if you don't want to keep them.

Let me know how you get on.
All the best, Erica

[ankur-verma · Accepted solution]

Hi lordlauzi,

You can do it by your-self with very little effort.
Just go to the product.available.liquid file here you can add code like this

{% if product.available %}
<div class="red" style="color:green">* Some Message in Green</div>
{% else %}
<div class="green" style="color:red">* Some Message in Red</div>
{% endif %}

Please let me know If it works for you.

[lordlauzi]

It worked perfectly thank you, I tried to to create a third option. I though it would work with

{% if product.available %} 
<div class="red" style="color:green"><span class="dot1"></span> Lagernd</div>
  {% else%}
<div class="green" style="color:red"><span class="dot"></span> Nicht Lagernd</div>
  {% else if product.price = 3000%}
  <div class="blue" style="color:blue"><span class="dot2"></span> Bestellt</div>
{% endif %}

My idea was that if the product has a certain price (30) a blue text and circle will show up.

Do you have any recomandations It does not work like that.

Another problem that I have is that the circle and the text isnt on the same height, do you know how to align them?

[ankur-verma]

Hi Lordlauzi,

You just used the condition in wrong way. That's why it did not worked.
use it like that.

{% else if product.price == 30   %}

Then it will work surely. And regarding the alignment I am not that much good in designing.
But if you can send me the front-end url then may I can offer some help.

[lordlauzi]

Thank you for your Reply, unforntuneatly it does not work for me. I allready tried different variants of else if, elsif etc. but If the blue dot shows up the red does not.  The blue dot with text should show up if the price is 30 and the inventory is 0, the should only show up if the inventory was 0.

Here is my code:

{% if product.available %} 
<div class="red" style="color:green"><span class="dot1" style="margin-top:5px"></span> Lagernd</div> 
  {% else%}
<div class="green" style="color:red"><span class="dot"style="margin-top:15px"></span> Nicht Lagernd</div>
  {% else if product.price == 30   %}
  <div class="blue" style="color:blue"><span class="dot2"style="margin-top:15px"></span> Bestellt</div>
{% endif %}
          {%- endif -%}
  <style>
.dot1 {
  height: 15px;
  width: 15px;
  background-color: 	#008000;
  border-radius: 50%;
  display: inline-block;
}
</style>
  <style>
.dot {
  height: 15px;
  width: 15px;
  background-color: 	#FF0000;
  border-radius: 50%;
  display: inline-block;
}
</style>
  <style>
.dot2 {
  height: 15px;
  width: 15px;
  background-color: 	 	#00008B;
  border-radius: 50%;
  display: inline-block;
}
</style>

[timwf]

I see.. I think the problem is that you are using a span element within the div container.

Try closing off the div before the span and see if that works

[lordlauzi]

I found a solution thank you very much for your help 🙂

[Smeelah]

That is very cool. I am wondering if it is possible to do the same thing but using the condition 'less than 3 items' instead of  'available'?

I have the problem where wholesale customers are getting to the cart after having added more items to the cart than are available, and then having to back up and edit because there are no stock levels shown. Having a 'less than 3' notice would suffice for now. I have been using Fera but there is a lot of code and which is currently causing some google indexing issues. 

I'd appreciate any help!

[timwf]

Re the styling-

Add another inline style to your span tags.. example -

<span class="dot1" style="margin-top:5px"></span>

Play around with your "px" number until aligned...

[lordlauzi]

Thank you for your reply. I tried your Solution but it only moved to Dot with text to the top, but I need to to align the dot with the text.

Here is my code:

{% if product.available %} 
<div class="red" style="color:green"><span class="dot1" style="margin-top:5px"></span>Lagernd</div> 
  {% else%}
<div class="green" style="color:red"><span class="dot"style="margin-top:15px"></span> Nicht Lagernd</div>
  {% else if product.price == 30   %}
  <div class="blue" style="color:blue"><span class="dot2"style="margin-top:15px"></span> Bestellt</div>
{% endif %}

[KarolisV99]

Hello, I am trying to input this code but i cannot locate where product.available.liquid is? 

I can see product.coming-soon product.json product.gift-card product.out-of-stock product.side-by-side. How can I overcome this problem?

[Smeelah]

What is your theme?

[KarolisV99]

Influence 

[Smeelah]

Sorry, I can't help you with that theme...but for others with 2.0 themes, this tutorial from Ed's codes was great:

https://www.youtube.com/watch?v=WMdYdvrFQ1s

[Zel_]

Hi @lordlauzi ,

I know it might be a little late for you but in case other new readers are here, you can check Hey! Low Stock Countdown app for this purpose. No need for any coding skills and display the low stock count on the product page within a few minutes.