How can I decrease the price size on Dawn theme?

Store Design
, , , ,

Topic summary

  • Goal: Reduce the product price text size in the Dawn theme to match the product title or be about 50% smaller.

  • Proposed solution: Add a CSS rule in base.css to change the price size globally.
    • Steps: Online Store → Theme → Edit code → open base.css → paste:
    span.price-item.price-item–regular { font-size: 30px !important; }

  • Result: The change also affected the price size on the product page, creating an undesirable look.

  • Current need: Adjust the CSS so the size change does not apply to the product page (likely limit it to collection pages or exclude product templates).

  • Status: No finalized fix yet. The requester asked for page-specific targeting; an updated selector/scope has not been provided.

  • Notes: CSS (Cascading Style Sheets) controls styling across pages; the current selector targets all regular price elements sitewide. A template- or page-specific selector is needed to scope the change appropriately.

Summarized with AI on January 27. AI used: gpt-5.
1

Id like to reduce the size of the $product price on dawn theme to be the same as the product title or at least reduced 50%.

2

Hi @Montique

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

span.price-item.price-item–regular {

font-size: 30px !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

1 Like
3

@PageFly-Richard I have found that this changes the size on the product page and this looks weird can we change the code to exclude the code on the product page?