Hey guys, I’ve tried a few of the solutions here but they didn’t work. How do I change the color of the sale price and compare at sale price on sense 2.0 theme? I also would like to know how to make on or the other bold.
Topic summary
Goal: change the color of the sale price and the compare-at (original) price in the Shopify Sense 2.0 theme; also optionally make one of them bold.
Recent guidance:
- A member requested the store URL to tailor CSS based on the site’s references.
- Another provided a generic CSS approach: edit Online Store → Themes → Edit code → Assets → base.css and add rules targeting price classes. Example given set the regular/compare-at price and general price items to specific colors (using named colors or hex codes), with a before/after image attached.
Key details:
- Compare-at price = the original price shown (often crossed out) when a product is on sale.
- CSS selectors referenced: the sale state wrapper and the regular price item class, plus a general .price-item.
Status and gaps:
- One participant will try the CSS; no confirmation of success yet.
- Bold styling (making one price bold) wasn’t addressed in the provided code and remains an open request.
- Thread remains open; sharing the store URL may enable a more precise solution.
1 Like
Can you share us your website URL please? The community can provide you with the code by looking at how your CSS is referenced on the website.
Hi @BrianRuiz , thanks for posting here!
You can follow my instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/base.css->paste below code at the bottom of the file:
.price--on-sale .price-item--regular {
color: red !important;
}
.price-item {
color: blue !important;
}
Or replace #ff0000 with the hex code for your desired sale price color and #0000ff with the hex code for your desired compare at price color.
.price--on-sale .price-item--regular {
color: #ff0000 !important;
}
.price-item {
color: #0000ff !important;
}
After adding the custom CSS, click the “Save” button at the top-right corner of the code editor. This is the example of Storefront before and after applying the code I give you:
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
2 Likes
I have the same question with @BrianRuiz The solution from @WizzCommerce_Co seems promising. I’ll give it a try
1 Like