On Dawn the badge Sold out badge does not appear

Technical Q&A
1

Hello !

I have the following problem : On the dawn theme, the badge “Sold out” doesn’t appear on the sold products. I tried many things, via the admin panel/ settings/ product card or via code customisation, but not really work.

I don’t understand why because in discussions, i observed that people try generally to hide it, not make it appears.

If someone could help me… I will really apreciate :slightly_smiling_face:

Thank you in advance.

Quentin

2

If it could help, here is the website adress : https://ovnihome.com/

3

Hi @Quentin19 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.badge {
    display: inline-block !important;
}
1 Like
4

Thank you very much CodingFifty,

I added the code at the end of Base.css files. It is strange, sometimes, when i reload the product page, the badge appears really quickly (like 1/4 a second) and disapears.

5

I made it like this :

…

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
outline: transparent solid 1px;
}

.localization-form__select:focus {
outline: transparent solid 1px;
}

.badge {
display: inline-block !important;
}

}

6

@Quentin19 @Please add this code in base.css file at the start of the file only add this code.

.badge {
    display: inline-block !important;
}
1 Like
7

First - check if the product is really unavailable,

radwebmax_0-1738658974919.png
radwebmax_0-1738658974919.png612×237 24.2 KB

Then you need to find the place in your buy-buttons.liquid snippet, where the condition product.available is false - and see which class/attribute should be added to the tag(usually it’s attribute - disabled). Then open the Product URL you think should be OOS, click to Inspect the Code, and hover over the Add to Cart button - if the classes/attributes from the snippet are not there - then the product is available due to the reasons in the Documentation above :slightly_smiling_face:

1 Like
8

Please add this code to Custom CSS in store admin > Sales channels > Online Store > Themes

html .badge { display: inline-block !important; }
1 Like
9

Thank you very much ! It works :blush:

10

Thank you very much. It works with adding the css code in the base.css.

But, it’s a good complement for any people in the case it had not been working :blush:

1 Like