How to display "in stock" and Icon in product pages of Dawn theme?

Store Design
, , ,
1

Hello, I want to achive something like in the photo below on my Dawn theme. Anyone knows how to code / implement this? Or maybe there is a special app for that? (Been looking in app store and found nothing)

Screenshot 2023-02-17 at 14.26.16.png
Screenshot 2023-02-17 at 14.26.16.png644×350 20.7 KB

2

To add the “In Stock” text and icon to product pages on the Dawn theme, you can follow these steps:

  1. From your Shopify admin, click on “Online Store” and then click on “Themes”.
  2. Find the Dawn theme and click on “Actions” > “Edit Code”.
  3. In the left-hand menu, click on “Sections” and then click on the “product-template.liquid” file to open it.
  4. Find the section of code that outputs the product price. This should look something like:

Code:

{% if product.price %} {{ product.price | money }} {% endif %}

  1. Add the following code immediately after the product price code:

phpCopy code

{% if product.available %}

In Stock

{% else %}

Out of Stock

{% endif %}

This will add an “In Stock” message and checkmark icon to product pages if the product is available. If the product is not available, it will display an “Out of Stock” message instead.

  1. Click “Save” to apply the changes to your theme.

You can customize the “In Stock” text and icon by editing the relevant HTML and SVG code in the above example.

3

Thanks for your help. The code works but only for the variant that loaded first. The text doesn’t change when choosing other variants. Do you have a different code that show the stock status of a variant and changes accordingly? I think it may need a use of a javescript but I couldn’t figure it out.