Shopify themes, liquid, logos, and UX
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:
To this:
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;
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
Can we update password for a User or Customer that already exists in Shopify using the Shopify API? moving
Hi @moving ,
Yes, you can do it. Here is the link to the tutorial https://help.shopify.com/en/manual/customers/customer-accounts
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
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!
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
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.
thank you very much your answer really helped me.
I want to change badge shape to flag
I want in this format
please help me
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
Blue and waite
yeah love blue too
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
THANKYOU!!! Yours was the only one that worked for me. The theme separation definitely made a differance.
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.
Thank you!
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!
How can I do this for the free Shopify Dawn theme?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024