Right now we have two badges, free shipping and sale. I’d like to make the sale badge red, but keep the free shipping badge black. I’m using the pipeline theme. I’ve attached an image of the two badges.
Thank you!
Topic summary
A user wants to differentiate badge colors on their Shopify store—specifically making the “sale” badge red while keeping the “free shipping” badge black on the Pipeline theme.
Solutions provided:
- CSS approach: Navigate to Online Store > Themes > Assets folder, then open the main CSS file (main.css, base.css, style.css, or theme.css). Add the following code at the bottom:
.product__badge.badge--sale {
color: red;
}
- Alternative method: Insert custom CSS code in the theme.liquid file, placing it above the
</head>tag by going to Actions > Edit code.
Both solutions target the sale badge specifically using CSS class selectors. The user confirmed the issue was resolved.
1 Like
Hi @Mg71
Check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
.product__badge.product__badge--sale {
color: red;
}
- And save.
- Result:
Hi @Mg71
This is Theodore from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Theodore | PageFly
Thank you!