How can I make the sale price on my website appear in red? Right now, it’s the same color as the previous price. I want the sale price to be red and the previous price to stay black. I am using the Shapes Theme.
Topic summary
A user seeks to change the sale/discount price color to red on their Shopify store using the Shapes theme, while keeping the original price black. Currently both prices display in the same color.
Solutions Provided:
Two community members offered CSS-based fixes:
- For collection pages: Add CSS code to the theme.liquid file before the
</body>tag targeting discount price elements - For product pages: Additional CSS snippet targeting
[data-product-price]elements to apply red color
Both solutions involve editing theme files (theme.liquid and base.bundle.css) and inserting custom CSS rules. Screenshots were shared showing the desired outcome and code placement.
Status: The user confirmed needing the color change on both collection and product pages. Multiple working solutions were provided with code examples and visual references.
1 Like
Hi @BrookeGentile , can you share your store url?
@BrookeGentile , Go to theme.liquid file and add the following code at the end of it before the :
Result:
@BrookeGentile , Add the following code to the previous one :
[data-product-price]{
color:red;
}
Hello @BrookeGentile
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.bundle.css and paste this at the bottom of the file:
.product-block [ data-product-price ] {
color: red;
}
span[x-html="formatMoney(current_price)"] {
color: red;
}
