Tutorial: Changing the Sale Badge Color

Bo
Shopify Staff
Shopify Staff
1685 179 490

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. 

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

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!

0 Likes

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

https://prosheffieldremovals.co.uk/
0 Likes
UmairA
Shopify Partner
586 65 103

Hi @moving ,

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

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Alluringbeauty
New Member
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
6 0 4

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

0 Likes
UmairA
Shopify Partner
586 65 103

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!

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
Resa25
Excursionist
17 3 2

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
586 65 103

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.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
Resa25
Excursionist
17 3 2

thank you very much your answer really helped me.

0 Likes