Change size of price + discount % on product page

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user seeks to increase the font size of product prices and discount percentages by 15% on mobile devices only for their Shopify store using the Dawn theme.

Initial Solution:

  • Add CSS code to base.css/style.css/theme.css targeting price elements with a media query for screens under 749px width
  • Adjust font sizes using rem units (2rem for prices, 1.5rem for discount badges)

Issue Encountered:
The initial CSS affected prices across the entire site (collection pages, product grids, etc.), not just the product page as intended.

Refined Solution:
Replace the original code with a more specific selector targeting only the main product section (section#MainProduct-template--[ID]__main) to limit changes to the product page exclusively.

Status: Resolved. The user confirmed the updated CSS worked correctly and referenced three additional design questions in separate threads for further assistance.

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

Good morning,

I would like to increase by 15% the size of only the two things that I circled in blue in the screenshot below. ONLY FOR THE MOBILE VERSION PLEASE

JADIS_0-1696343033005.png
JADIS_0-1696343033005.png503Ă—825 113 KB

Do you know how to do it please?

Theme: Dawn
Website: jadis-shop.com
password:rj

1 Like
2

Hi @JADIS

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • 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:
@media only screen and (max-width: 749px){
span.price-item.price-item--sale.price-item--last {
    font-size: 2rem;
}
span.badge.price__badge-sale.color-background-2 {
    font-size: 1.5rem;
}
}
3

thanks a lot

1 Like
4

bro i have a problem, It also changed the size of the price in all other places on the site (collection, product grip, etc.), how can I make the price the way you do it for me but only on the product page please?

5

Please, replace on this code. Thanks!

Same Instruction.

@media only screen and (max-width: 749px){
section#MainProduct-template--19833656574281__main span.price-item.price-item--sale.price-item--last {
    font-size: 2rem;
}
section#MainProduct-template--19833656574281__main span.badge.price__badge-sale.color-background-2 {
    font-size: 1.5rem;
}
}

And Save.

6

thanks a lot brother !!

if you can help me on this, you will be the boss thanks :

https://community.shopify.com/c/shopify-design/multicolumn-design-on-computer/m-p/2251835#M595587

https://community.shopify.com/c/shopify-design/multicolumn-design-on-phone-only/m-p/2252575#M595804

https://community.shopify.com/c/shopify-design/change-design-when-sold-out/m-p/2252578#M595805