How can I increase the size of discount text on my product page?

Store Design

Topic summary

A user working with the Focal theme wants to:

Primary Goals:

  • Increase the size of discount text on product pages
  • Swap the positions of sale price and original price

Progress & Solutions:

One community member provided CSS code to add to the base.css file:

span.price.price--highlight.price--large {order: 2; margin-right: 10px;}
.product-meta__label-list .label {font-size: 16px;}

However, this solution didn’t achieve the desired mobile view appearance shown in the user’s reference image.

Additional Guidance:

Another contributor recommended:

  • Using the font-size CSS property to adjust text size
  • Adding the !important attribute to force the size change (e.g., font-size: 14px !important;) to prevent other CSS properties from overriding it
  • Referenced W3Schools documentation and provided screenshots showing where to implement the changes

Status: The issue remains unresolved as the initial CSS solution didn’t produce the exact mobile layout the user requested.

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

Hello dear community, I’m using the focal theme and I want the discount text on the product page to be bigger. Also, I want to swap the sale price and before sale price. I have attached an image below of how I would like it.

Thanks in advance.

Example:

preis123.png
preis123.png427×128 5.66 KB

My URL: https://leyah.de/products/5-in-1-airstyler

2

@LeyDE - please add this css to the very end of your base.css file and check

span.price.price--highlight.price--large{order: 2; margin-right: 10px;}

.product-meta__label-list .label{font-size: 16px;}
3

This didnt work quite properly. I want it to look exactly like this on mobile view:

LeyDE_0-1705895170460.jpeg
LeyDE_0-1705895170460.jpeg1170×490 33.6 KB

Thanks!

4

You need to use the font-size CSS property to adjust the text size. Doc: https://www.w3schools.com/css/css_font_size.asp

You need to add the font-size attribute to your theme with the location as shown in the following image: https://www.awesomescreenshot.com/image/45545576?key=2e886cbac003ac6bdaf68bc88f26014c

You can add the !important attribute to hard set the text size without changing. Ex:

{

font-size: 14px !important

}

If you do not use !important, the text size can be changed by some other CSS properties as shown in the image above, the green border.