Text Sizing

Store Design

Topic summary

A user needed to increase the font size of a “Save $X.XX” discount label and fix strikethrough alignment on product prices in their Shopify store theme. Their theme lacked standard files like base.css or theme.liquid that typical solutions reference.

Problem:

  • Successfully resized other prices using custom CSS for .formatted-price
  • Could not apply same approach to the savings amount display

Solution provided:
Two respondents suggested identical CSS code to add to components.css file:

[data-on-sale] .block-price__save {
    font-size: 1.3rem;
}

Implementation steps:

  1. Navigate to Online Store > Themes > Edit Code
  2. Open components.css in Assets folder
  3. Add code at the bottom of the file

Outcome:
The user confirmed the solution worked successfully. The discussion is resolved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I need help with a few things. I want to increase the size of the Save $1.97 and fix the strikethrough for the discounted price so it accurately goes through the price. My theme doesn’t have the base.css, theme.liquid, or any of the ones the internet or ChatGPT suggests. I was able to use the code below to fix the size of the other prices on the line in the Custom CSS editing section.

.formatted-price {
font-size: 1.3rem;
margin-left: 0.8rem;
}

What text can I add to the CSS to fix that sizing?

Screenshot 2025-06-13 at 4.58.57 PM.jpeg
Screenshot 2025-06-13 at 4.58.57 PM.jpeg1512×761 64.2 KB

1 Like
2

@marc-everlast Can you please provide the URL of your store and if it is password protected please share the password too. Thanks

3

www.dryitcenter.com

4

@marc-everlast You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of components.css file.

[data-on-sale] .block-price__save {
    font-size: 1.3rem;
}
1 Like
5

Hello @marc-everlast

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open components.css and add your CSS code at the end
[data-on-sale] .block-price__save {
    font-size: 1.3rem;
}

devcoders_0-1749869940972.png
devcoders_0-1749869940972.png1325×637 248 KB

2 Likes
6

Thank you so much! This worked!