How to display product availability status in the Dawn theme?

[darkthrone]

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

[made4Uo]

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 %}

[JordanPlayFaire]

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]

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

[AvyCoffee]

Hi Jordan - did you add this code at the bottom of main-product.liquid?