Hi guys, I would like to change the color of the number that is displayed when a product has a discount.
First product → Price 35.90€ in (red) normal price 45.90€ in (black)
Thank you!
Julius
Topic summary
Goal: Style only the current sale price (discounted price) in red while keeping regular prices black; also adjust the price number size without affecting other text.
Key steps and attempts:
- Preview link shared, expired; live site provided (king-shakerz.com) for accurate selectors.
- CSS added suggestions:
• .grid-product__price–current { color: red !important; } → colored all prices, not just discounted.
• span.grid-product__price–original span { color: red; } → targeted the original (struck-through) price, not the sale price.
• span.grid-product__price–from { color: red; } → still not limited to sale items. - A code snippet was suggested for theme.liquid, but the actual code content wasn’t provided in the thread.
Current status:
- Issue remains unresolved; correct CSS selector for “current sale price only” is still needed, likely dependent on the theme’s specific markup/classes (helpers requested access due to differing live theme structure).
- Additional open request: code to change only the price number size without affecting other text.
Notes:
- Screenshots illustrate the desired outcome (current discount price in red, original price unchanged). Discussion is ongoing.
1 Like
Can you share your website so we can provide a code appropriate for you?
This is Noah 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,
Noah | PageFly
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
.grid-product__price–current {color: red !important;}
Regards,
San
Please share with me your preview link URL again,
the old one has expired and i can’t access to check the structures.
Thank you
Please share the link again. This is already expired
Thank you. Here you go.
- From your Admin page, go to Online store > Themes > click the three dots > Edit code
- Find the Asset folder, and open the base.css file
- Add the code below at the very end of the file
span.grid-product__price--original span {
color: red;
}
1 Like
Sorry for the late reply. Hope you still can help me!
This worked kinda. I need the black number from the products that are on sale red. Not the previous price.
Not like this:
But like this:
Thank you!
Can you also please tell me the code for the price number size. Without changing the size of all the text? Thank you!!
Looks like you have a code different on your live website. Anyway, you can try the code instead
span.grid-product__price--from {
color: red;
}
Looks like you have a different code in your live theme. Anyway, you can try the code instead
span.grid-product__price--from {
color: red;
}
Its still not just the price of the sales products. Can you tell me whats the code for the numbers, that are sale-products?