How to display green 'in stock' icon on product page?

Store Design

Topic summary

Goal: show a green “in stock” indicator on the product page in Shopify.

Context and suggestions:

  • A contributor requested the store URL to tailor code and noted an icon might not be necessary if simple code suffices.
  • App options were proposed to add product badges/alerts: Trust Me – Free Trust Badges, Back In Stock: Customer Alerts, and Alert Me! Restock Alerts.

Latest update (most relevant):

  • A user posted a Liquid/CSS snippet that displays a pulsing green dot and the text “In stock, ready to ship” wrapped in a Liquid conditional: {% if product.available %} … {% endif %}.
  • They report the Liquid tags (“if in stock”/“endif”) are appearing as text, indicating the code was likely placed in a non-Liquid area (e.g., a rich text field) instead of a theme template/section. They want placement under the product price and ask if the conditional properly hides the icon when out of stock.

Status and open items:

  • No confirmed solution yet. Next steps include sharing the site/theme and placing the snippet in the correct product template/section so Liquid renders, then verifying the conditional behavior.

Note: The code snippet is central to this discussion.

Summarized with AI on January 25. AI used: gpt-5.
1

Does anyone have a solution to show this? I

1 Like
2

Hi @altigear ,

Do you mind sharing your website so we can provide an appropriate code for you? You might not need an icon but just a piece of code

3

Hi there, @altigear !

Welcome to the Community! Definitely a great place to gather some input regarding anything about the platform!

With regards to your inquiry, getting more context from you will definitely help myself and other contributors to know exactly what you are looking for. While we wait however, I have found some apps that may help you in this quest as they provide badges for your products to display in your storefront:

Definitely give these apps a lookover as they will allow you to add those badges that you are after to notify customers about products being back in stock. Let us know how these work out for you so we can assist further if necessary.

I am also looking forward to hearing more from you about this matter.

4

Hello. I am trying to add a in stock icon to shopify. Here is there code. Can you tell me where I put this. When I place the code onto the product page it has the “if in stock” and “endif” showing on the page. Also I am not sure If the code is correct in terms of hiding the icon when product is out of stock. Can you assist. I would like it to be under the product price on the product page. Thanks. Code:

{% if product.available %}

In stock, ready to ship
.instock-pulse { display: flex; flex-wrap: nowrap; align-items: center; } .icon–pulsing { position: relative; width: 20px; height: 20px; margin-right: 10px; } .icon–pulsing:after, .icon–pulsing:before { background: #54c63a; width: 10px; height: 10px; border-radius: 10px; position: absolute; left: 0; top: 0; content: “”; margin: 5px; } @keyframes inventory-pulse{ 0%{ opacity:0.5; } to{ transform:scale(2.5); opacity:0; } } .icon–pulsing:before { animation: inventory-pulse 2s linear infinite; } {% endif %}