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:
Note:
If you’re using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren’t supported.
If you’re using a paid theme, then your theme was made by a third-party developer and Shopify’s Support team can’t help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren’t supported because of limitations associated with the theme or Shopify admin.
The following tutorials are tested on themes published on Sept 2020
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.
Please Note:
This tutorial only works on newer versions of Debut. The newer version of Debut’s sale badge looks like this whereas the older version of Debut’s sale badge looks like this. If you are using an older version of Debut, please contact support directly to help with this.
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.
