How to modify compare at price size and color in Prestige theme?

Store Design
, ,

Topic summary

A user wants to reduce the size and change the color of the compare-at price (strikethrough/sale price) in the Prestige Shopify theme while keeping the regular price unchanged.

Solutions provided:

  • Navigate to Online Store > Themes > Actions > Edit code
  • Locate and open the theme.css file in the Assets folder
  • Find the CSS class .ProductMeta__Price.Price.Price--compareAt.Text--subdued (or similar)
  • Modify the color and font-size properties

Example CSS code:

span.ProductMeta__Price.Price.Price--compareAt.Text--subdued h4 {
  color: red !important;
  font-size: 15px !important;
}

Status: Resolved. The user confirmed the solution worked.

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

Hi

I’d like to reduce the size of the compare at price and change it’s color while maintaining the the regular price’s size.

IMG_0161.jpg
IMG_0161.jpg1284×657 36.4 KB

store link: https://www.angelicskinco.com/

2 Likes
2

Hi @jeje121 ,

Please follow the instructions below to change the color and size of the compare price.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Find the code .ProductMeta__Price.Price.Text–subdued, then change the color and the font-size (see image below)

made4Uo_0-1668818222215.png
made4Uo_0-1668818222215.png687×493 17.8 KB

3

Hi @jeje121 ,

I’m Richard Nguyen - CRO Expert at PageFly.

You can go to Online store => themes => actions => edit code and add this code on file theme.css

span.ProductMeta__Price.Price.Price--compareAt.Text--subdued.u-h4{
color: red !important;
font-size: 15px !important;
}

Hope this answer helps.

Best regards,
Richard | PageFly

4

THANK YOU

1 Like
5

You’re utmost welcome :blush: