How to make bigger discount text

LeyDE
Excursionist
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.

 

Example:

preis123.png

 

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

Replies 3 (3)

suyash1
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 - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
LeyDE
Excursionist
23 0 5

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

 

LeyDE_0-1705895170460.jpeg
Thanks!

BSS-Commerce
Shopify Expert
3398 450 503

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.

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