Tutorial: Changing the Sale Badge Color

Bo
Shopify Staff (Retired)
1793 196 467

This tutorial outlines how to change the color of the Sale Badge on Shopify Supported themes. This request is often made to our Support team as a lot of stores would like the color of their sales badges to match that of their branding. With the following tutorial, you will be able to edit the color of the badge's font, background, and border. 

For example, you can change the badge from this: 

07-52-7v3sp-rqbg5

To this:

07-51-4t1nn-kq36z

 

 

Before we get into the steps of the tutorial it is important that you understand the purpose of the following CSS properties in relation to the sale badge: 

background is to change the background color of the badge.

color is to change the badge label/ font color

border is to change the border. The first part, 2px, refers to the thickness of the border, the second part, solid, is the border style, third part, green, is the color of the border. For example:

 

  border: 2px solid blue;

 

Please visit this page to learn more about CSS border properties.

You can also use hex color to match the button to your branding. Instead of writing the name of the color you would like the button to be you can input the hex code of the color found in this hex color picker online. For example, if you wanted a specific shade of purple you would input color: #7300ed; as opposed to color: purple;

 

Debut

1. Open ‘theme.scss.liquid’ or ‘theme.css.liquid’.

2. On the bottom of the file, paste this code: 

 


.price__badge--sale {
  color: white;
  background: green;
  border: 2px solid blue;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Brooklyn

1. Open ‘theme.scss.liquid’ file.

2. On the bottom of the file, paste this code:  

 

.grid-product__on-sale {
  color: white;
  background: red;
  border: 2px solid green;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Supply

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.sale-tag {
  color: white;
  background: red;
  border: 2px solid green;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Boundless

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.product-item__badge {
  color: white;
  background: red;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Minimal

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.badge--sale {
  color: white;
  background: red;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Simple:

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.badge--sale span {
  color: white;
  background: red;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Venture

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.product-tag {
  color: white;
  background: red;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Express

1. Open ‘theme.min.css’.

2. On the bottom of the file, paste this code:  

 

.price__badge {
  color: white;
  background: red;
  border: 2px solid green;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

 

Narrative

1. Open ‘theme.scss.liquid'.

2. On the bottom of the file, paste this code:  

 

.card__badge {
  color: white;
  background: red;
}

 

3. Edit the values of background, border, and color to your liking.

4. Click Save. 

To learn more visit the Shopify Help Center or the Community Blog.

Replies 18 (18)

JKD19
Tourist
25 0 1

I like the sale banner which is useful for offers but I would also like an 'Introductory' banner for new feature/latest product that is not a sale price but a new price as Introductory Offer.

I see no feature in the admin section for Introductory only a compare price for sale banner, is there an option to select either?

Ahh, I have Empire theme...sorry wrong post!

moving
Visitor
1 0 0

Can we update password for a User or Customer that already exists in Shopify using the Shopify API? moving

https://prosheffieldremovals.co.uk/
UmairA
Shopify Partner
1106 101 225

Hi @moving ,

Yes, you can do it. Here is the link to the tutorial https://help.shopify.com/en/manual/customers/customer-accounts

Alluringbeauty
Visitor
1 0 2
Hello, I'm Millie, I have to delete the banner on my website that says "Free shipping for orders over $30" my website is https://www.alluringbeauty.net... I'm having trouble contacting support or submitting a ticket.
I would really appreciate it 🙂
zahid3d29
Shopify Partner
72 5 28

Hi, Millie. I am shopify expert here. I can help you easily with that problem. I just need few minutes to get back your shipping top bar on the right place. please reply me here or send me mail zahid3d29@gmail.com 

what I'll need?

1) Just access to your shop login for once. 

 

Thanks

Zahid

Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code a perfect blend!   ❤️
UmairA
Shopify Partner
1106 101 225

Hey there @Alluringbeauty ,

Welcome to the Shopify community. I visited your store and found that you are using the debut theme. To remove the Announcement banner follow the steps below.

1> Go to online store > Themes

2> Next to your live theme click on "Customize"

3> On customization sections click on the header

4> Scroll down and uncheck the "Show announcement bar" checkbox.

That's all.

Best of luck with your store launch!

Resa25
Excursionist
20 4 3

Resa25_0-1603132378442.png

Is it really like this? My shop remains unchanged, is something wrong? please find a solution.
I use the Venture theme.

this is my shop link

https://kapemart.com/collections/sale

 

UmairA
Shopify Partner
1106 101 225

Hey there @Resa25 ,

For the Venture, theme use the following code

.product-tag {
color: red !important;
background: yellow !important;
}

 

Change the value of color as you wish.

Resa25
Excursionist
20 4 3

thank you very much your answer really helped me.

ShoppersQlik
Excursionist
12 0 2

I want to change badge shape to flag 

flag.JPG

I want in this format

please help me

fahadmalik
Visitor
1 0 0

I want to change button in to badges of massage chairs can some one tell me how I change it???
Here is my site dreammassagechair.com

Marrakikech
Visitor
2 0 0

Blue and waite 

Miguel-Concept
Tourist
3 0 0

yeah love blue too

harveythomas
Shopify Partner
15 1 9

If you are looking for an application that automatically adds Text, logo, badge, sticker, .... to your product images, then this app Super Watermarks is our best choice for you. for you

ALLO
Visitor
1 0 0

THANKYOU!!! Yours was the only one that worked for me. The theme separation definitely made a differance.

Jen-X
Tourist
9 0 3

Is there a way to manually turn the sale badge on/off, one product at a time, instead of having it tied to the comparison price? I like to have "compare to" prices for all products, but don't want every product to have the sale badge turned on. 

If that's not possible, is there a way to turn them off altogether, and then put them back on when I really do have a sale?

Venture Theme. 

www.discoballdesigns.com

Thank you!

 

Focused2
Visitor
1 0 1

Hello! I am using the free "dawn" theme. Is it possible to edit my code to change the sale button color? I would love to do so, but I couldn't find anything on the dawn theme. 

 

Thanks!

mycinema
Visitor
3 0 0

How can I do this for the free Shopify Dawn theme?