Change price size Dawn Theme ... nothing I do works

Store Design
1

I am simply trying to make it so my main price is bigger and the sale price remains the same on product page only.

I have tied 2 way below but neitherhave had any effect (so i dleteed the code)

1. component-price.css page

i added

.price–on-sale .price__sale {
font-weight: bold;
font-size: 24px;
}

.product__info-container .price–on-sale .price-item–regular {
font-size: 20px;
}

didnt work so i tried this…

2. on base.css page

.price.price–large.price–show-badge .price-item.price-item–last {
font-size: 36px;
}
.price.price–large.price–show-badge .price-item.price-item–regular {
font-size: 36px;
}

where am i going wrong. these are answers i found online that seem to work for others but not me

2

Hey @Henrybags

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1745421248574.png
Moeed_0-1745421248574.png1266×921 132 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @Henrybags

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container .price--on-sale .price-item--regular {
    font-size: 20px;
}
.price.price--on-sale .price__sale {
    align-items: baseline;
}

devcoders_0-1745422090767.png
devcoders_0-1745422090767.png1285×363 99.6 KB

4

Hi @Henrybags

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product__info-wrapper .price__sale span.price-item {
    font-size: 25px !important;
    align-self: center; 
}

.product__info-wrapper .price__sale span {
    align-self: center !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hey Henry,

I didn’t find a clean solution directly in the edit code section either, but I tried something through the theme settings > custom CSS section (the one that applies store-wide), and it seems to do exactly what you’re looking for.

Try adding this:

.price–large {
font-size: 4rem; (change the size)
}

This increases the main product price on the product page, without affecting the compare-at price (the sale price), and doesn’t mess with any prices elsewhere in the store — like on collection pages or in the cart.

I tested it and it worked nicely — give it a try and let me know if it does the trick on your end. If I come across a more precise way to do it directly in the code, I’ll share that too.

Also — had a look at your site and YouTube channel. Really well done, man. Looks super clean and professional :flexed_biceps:t2:

Screenshot 2025-04-23 at 18.00.24.png
Screenshot 2025-04-23 at 18.00.24.png3018×1672 447 KB

6

Thank you so so much. Simple , quick and actually worked exactly how i wanted it. Cantthank you enough. 8 hours of my life that I will never get back hahaha

Thank you for yourfeedback, Im a one man band, my fisrt site and its done me proud for 5 years, im just being really fusy now and putting everything underthe microscope. If there is anything you didnt like on the site just shout, im too close to it to know if i could do anything better

Jonny