Change color to "On Sale" Badge for Boost Theme

Solved
Highlighted
Excursionist
14 0 5

Hi,

I am trying to change the color of the "On Sale" badge and the "Sold Out" badge

from the black default to red on the Boost theme. 

Store URL https://www.lilithefirst.com/collections/spring-collection

Thank you, LiLi

 

 

1A.JPG

 
 

 

 

 

 

 

0 Likes
Highlighted
Astronaut
1082 178 213

Hey @LiLi-5 ,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<style>
.product-label--on-sale{
color: #ffffff !important;
background-color: #cccccc !important;
}

.product-label--sold-out{
color: #c5ffe5 !important;
background-color: #111111 !important;
}
</style>

 


you can change the values as you wish:

#ffffff = on sale text color
#cccccc = on sale background color

#c5ffe5 = sold out text color
#111111 = sold out background color

let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Staff
Shopify Staff
25 3 5

This is an accepted solution.

Hey, @LiLi-5 

Eunice here from the Social Care team at Shopify. Thanks for posting!

I'd be happy to show you how to change the color of the sale badge. I have a copy of the Boost theme on my test store, so, to make it easy I've taken screenshots of the steps to guide you:

 

1) From your Shopify admin head to Online Store > Themes and open up your theme customizer for Boost

 

2) Once you have the theme customizer open, click on Theme Settings and then Colors





3) The Colors setting gives you the option to change a lot of the colors on your theme. You'll notice an option for Sales prices and labels, this is the one you click on to change the color of the sale badge. Once you've selected your new color don't forget to hit Save.

 

The Boost theme is a third-party theme created and supported by Clean Canvas. I was able to answer your question today because I am familiar with the Shopify theme customizer and changing basic settings, however, if my instructions above are not effective, it may be an indicator that there is an underlying issue that would need to be looked at. In this case, I would advise contacting Clean Canvas directly.

I love your store by the way. The header with the sunshine emojis is super cute and eye-catching. Such a great way to let your customers know you have a summer sale. What I did notice is that you have an Instagram business page but you don't have your Insta feed on your storefront. Adding your feed to your site creates social proof, and can potentially increase your followers, engagement, and most importantly sales! I recommend checking out the Section Feed app on the Shopify app store. It's super easy to install, and it's free to use too - a bonus!

Looking to level up your Instagram page even further? Check out this awesome course available on Shopify Compass. Social Media changes all the time so it's a good idea to be on top of the game.

I hope this all helps! Feel free to sing out if you have any questions.

All the best,

Eunice | 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

1 Like
Highlighted
Excursionist
14 0 5

Dear Eunice, 

THANK YOU!!!

I am going to follow your two Instagram recommendations. 

Have a good weekend. 

1 Like
Highlighted
Excursionist
14 0 5

Thank you for taking the time to answer, it was actually easier than I expected using the custom option, but really appreciate it.

Best, LiLi 

 

1 Like