CHANGE COLOR of "Ouf of stock" Banner

Monaloa
Tourist
8 0 1

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,

 

Capture d’écran 2024-02-23 à 15.07.44.png

 

Replies 10 (10)

webwondersco
Shopify Partner
1035 157 154

@Monaloa Could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
Monaloa
Tourist
8 0 1
webwondersco
Shopify Partner
1035 157 154

@Monaloa Would you like to display like this?

webwondersco_0-1708941290978.png

 

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

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
Monaloa
Tourist
8 0 1

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.

techlyser_web
Shopify Partner
1404 262 276

Hello @Monaloa 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Monaloa
Tourist
8 0 1
techlyser_web
Shopify Partner
1404 262 276

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 </body> on theme.liquid

<style>
   .badge {
      color: #ff0081 !important;

      background-color: #b3a0ef !important;
    }
</style>

techlyser_web_0-1708941293980.png

 

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

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Monaloa
Tourist
8 0 1

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

techlyser_web
Shopify Partner
1404 262 276

@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 </body> on theme.liquid

<style>
  span.color-background-1 {
    background: #000 !important;
    color: #fcf8f1 !important;
 }
</style>

Result:

techlyser_web_1-1708953548020.png

 

techlyser_web_0-1708953492422.png

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

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

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;"​

 

 

Screenshot 2024-02-26 at 16.58.46.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now