Re: How to change the colour of the 'sold out' badge only

How to change the colour of the 'sold out' badge only

miab1567
Excursionist
18 0 4

I changed the colour of the 'sale' badge for the product cards and product pages, however I don't know how to do it for only the 'sale' badge. I want the 'sold out' badge to be a black background and white text on the product cards and product pages. 

 

This is my shop link d63bb7.myshopify.com

Replies 10 (10)

Tech_Coding
Shopify Partner
384 106 90

Hello @miab1567 

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--bottom-left{
     background: #000 !important;
  }

  span.badge--bottom-left.color-accent-2 {
     background: #eb1c1c !important;
  }
</style>

Tech_Coding_0-1727777696130.png

Tech_Coding_0-1727778397001.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
miab1567
Excursionist
18 0 4

not quite right. 

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

Tech_Coding
Shopify Partner
384 106 90

I have update the above code please add that 
Thanks

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

GTLOfficial
Shopify Partner
625 135 123

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

.badge--bottom-left, {
  background: #000 !important;
}

 

 

result

13.png12.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
miab1567
Excursionist
18 0 4

But this also changes the 'sale' badge to be the same colour as the 'sold out' badge

 

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

GTLOfficial
Shopify Partner
625 135 123


Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

span#NoMediaStandardBadge-template--20458406019403__product-grid-10132389036363 {
background: red !important;
}

result
14.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

TechNinja
Shopify Partner
6 0 0

Hi,

 

Add this on your theme.liquid file.

 

 

<style>
.badge--bottom-left, span.badge.price__badge-sale {
    background: black!important;
}
</style>

 

 

miab1567
Excursionist
18 0 4

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

Huptech-Web
Shopify Partner
1004 204 215

Hello @miab1567 , You have to make some code changes in your files. First, You need to open the code editor to add a class for sold-out badges.

To open the code editor go to Shopify Admin > Online Store > Themes > Edit Code. Review below screenshot for the reference.
Edit Code.png

 

Open the "card-product.liquid" file and locate the HTML elements that have the class "badge badge--bottom-left color-". Add the "sold-out" class to these elements, but only if they are used for displaying the "Sold Out" badge. If the class appears multiple times for the "Sold Out" badge, ensure the "sold-out" class is added to each occurrence. Do not add the class for badges displaying "Sale. Review the screenshot below for reference:
badge_bg_color.png

 

Once you add the class open the "theme.liquid" file and add the below code before the </head> tag.

 

{% style %}
.badge.sold-out {
    background-color: #000;
}
{% endstyle %}

 

 

AT...

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

PageFly-Richard
Shopify Partner
4731 1078 1743

Hi @miab1567 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
span.badge.price__badge-sale {
    background-color: red !important;
}
<style>

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.