How can I change the color of the 'Out of Stock' banner?

[Monaloa]

Hello everyone,

I would like to change the color of the box “OUT OF STOCK”, top right on the product picture.

Here it is Beige, like the other box “Dernières pièces”, but I would like to change the color in black or another color.

I can’t find the option in the theme, do you know if I can have add a code?

URL store : www.monaloa.fr

Thank you,

Best,

[webwondersco]

@Monaloa Could you please share your store URL?

[niraj_patel]

Hello @Monaloa
Can you share store URL?

[Monaloa]

www.monaloa.fr

[Monaloa]

Hi, www.monaloa.fr

[niraj_patel]

Hello @Monaloa

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.badge { color: #ff0081 !important; background-color: #b3a0ef !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[webwondersco]

@Monaloa Would you like to display like this?

But I can see no additional class related to out-of-stock related class in it.

[Monaloa]

Hi,

Thank you for the solution. I would only like to change color of “out of stock” banners, not “dernières pièces” banners.

With this code, it changes the color of all the banners

[Monaloa]

Hi,

Thank you ! Yes like this it is fine. Black background. But I want to keep the other banners “Dernières pièces” in beige.

[niraj_patel]

@Monaloa

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

span.color-background-1 { background: #000 !important; color: #fcf8f1 !important; }

Result:

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

Hi @Monaloa

I’m Dan from Ryviu: Product Reviews & QA app.

You can follow this instruction to change background of sold out badge.

• Go to Online Store > Themes > Edit code > open card-product.liquid file
• Find this line of code around line 123 of this find: {%- if card_product.available == false -%}
• Add this code below after <span right below above code

style="background: #000; color: #fff;"​