How can I display 'In Stock' details on my website?

Store Design
, , , , , ,
1

Hello,

I would like to add the “In Stock-Info” with the green dot like displayed in the attached picture to my shop. How can I do this?

I would really appreciate all answers! :slightly_smiling_face:

My website: aliudclothing.com

desired design: https://www.6pmseason.com/collections/6pm/products/hoodie-yellow-1

Kind regards

Kim

Bildschirmfoto 2023-10-19 um 07.51.53.png

2

Hello @KimGottwald

Please Go to Online Store → Themes → Edit code → Sections → product-template.liquid and paste this code wherever you want to set it.

{% if product.selected_or_first_available_variant.available == true %}
    
     

     <strong>IN STOCK. SHIPPING IN 1-2 
     DAYS</strong>
   

{% endif %}

and add this CSS in the theme.scss.css file. Please Go to Online Store → Themes → Edit code → Assets → theme.scss.css and paste this code at the end of the file.

div#stockbadgeholder {
    display: flex;
    font-size: .7rem;
    align-items: center;
    margin-bottom: 50px;
    gap: 10px;
}
.stock-badge-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green;
}
1 Like
3

Hi @KimGottwald

Go to your Online store > Themes > Edit code > open product-template.liquid file, find this line of code

{% if section.settings.quantity_enabled %}

{% endif %}

And place this code below the code above


                

                **IN STOCK. SHIPPING IN 1-2 DAYS**
1 Like
4

Thank you, sadly this is also visible when the product is sold out.

5

Please update code like this to solve this issue

{% if current_variant.available %}
              
                

                **IN STOCK. SHIPPING IN 1-2 DAYS**
              

              
              {% endif %}
6

Hi it isn’t working on my dawn 2.0 theme. Where do i place on the product.json codes?

7

please place the code to main-product.liquid file

8

okay thank you do you know where to add in the file, which location?

9

Did you find a solution? I can not find the correct location ;( drives me crazy