How to make bigger discount text

23 0 5

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.






Replies 3 (3)

Shopify Partner
8986 1116 1464

@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;}
To build shopify pages use pagefly
You are welcome to contact me - , My timezone is GMT+5:30.
Paranormal story video created using AI
23 0 5

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



Shopify Expert
3398 450 503

You need to use the font-size CSS property to adjust the text size. Doc:

You need to add the font-size attribute to your theme with the location as shown in the following image:

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development