How can I change the sale price color and font size on a collection page?

Store Design
,

Topic summary

A user wants to customize the sale price display on their collection page by making it red and larger than the strikethrough original price.

Solution provided:

  • Add custom CSS code to the theme.liquid file
  • The code targets the sale price element and applies red color

Follow-up request:

  • User asks how to also make the sale price bold and increase font size
  • Updated CSS code provided that includes:
    • Red color
    • Font weight: 700 (bold)
    • Font size: 18px

The discussion appears resolved with working CSS code that addresses all formatting requirements for the sale price display.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I would like to change the lower price to be red. I would like the font to be bigger than the strikethrough price too. How do I do this?

https://www.physioworldshop.co.uk/collections/treatment-couches

ChrisW3_0-1705487079821.png
ChrisW3_0-1705487079821.png1096×463 141 KB

2

Add this code to your theme.liquid file, after element
3

Hi Dan,

Thanks I added that and it made the sale price red, which is great - is there a way to make the sale price font bigger and bold?

Thanks again

4

code updated

.product-item--price > small[aria-hidden="false"] { color: red; font-weight: 700; font-size: 18px; }