How to display product availability status in the Dawn theme?

darkthrone
Shopify Partner
21 0 4

I am looking to display if the current product is in stock or not. I have seen some for have had it so it displays the number of products, I am however just trying to display whether it is in stock or not. 

I am using the Dawn theme.

Thank you

Replies 3 (3)

made4Uo
Shopify Partner
3821 716 1148

Hi @darkthrone

 

You can use the code below to show when In stock or Out of Stock. However, if you have multiple variants, this doesn't update until your refresh the page. You have to have a custom script to update this. 

 

If you have no variant, you can use the custom block to edit the theme. Please follow the instructions below. 

1. From you Admin page, go to Online store > Themes > Customize

2. Go to your product page, and click "Add block", click "Custom block"

3. Please the code below in the textbox. 

{% if product.selected_or_first_available_variant.available %} In Stock {% else %} Out of stock {% endif %}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
JordanPlayFaire
Tourist
6 0 0

Great, it works! Now, I've seen some websites that have this feature and the 'In Stock' sign is green and has a green circle next to it - sometimes flashing, to show Live Stock. Do you know how I can add this feature or change the colour? Say Green for In Stock and Red for out?

 

Thank you

JordanPlayFaire
Tourist
6 0 0

Hi, following my previous message, after some trial and error I managed to make this work with the help of Chat GPT.

By adding a Custom Liquid box onto the Product Page Default Template, I can now see the In Stock indicator flashing green to kind of show Live Stock status with following code;

<style>
.stock-indicator .live-indicator {
color: #9DA9A0; /* Green shade for the text */
font-weight: bold;
}

.stock-indicator .out-of-stock-indicator {
color: red;
font-weight: bold;
}

.stock-indicator .live-indicator::before {
content: '●'; /* Solid circle */
color: #9DA9A0; /* Same green shade for the circle */
font-size: 18px; /* Adjust size as needed */
margin-right: 5px; /* Space between the circle and text */
animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
50% {
opacity: 0;
}
}
</style>

<div class="stock-indicator">
{% if product.selected_or_first_available_variant.available %}
<span class="live-indicator">In Stock</span>
{% else %}
<span class="out-of-stock-indicator">Out of Stock</span>
{% endif %}
</div>

 

Hope this helps someone else!

 

Thanks

 

Jordan