Dawn theme - change header and product font sizes

Store Design

Topic summary

Goal: adjust Dawn 8.0 typography—enlarge only the store name in the header and shrink product titles.

Solutions implemented:

  • In Assets > base.css, set product titles smaller and header name larger:
    .product__title > h1 { font-size: 24px !important; }
    .header__heading-link .h2 { font-size: 32px !important; }
    The requester confirmed this worked.

Further adjustments:

  • Change header text color in base.css:
    .header__heading-link .h2 { color: #FFF !important; }
  • Reduce collection page title size (e.g., “Baby Boys”) for desktop:
    @media (min-width:768px) { .collection-hero__title { font-size: 30px !important; } }
    These were also confirmed as working.

Additional notes:

  • One reply suggested placing code before in theme.liquid with screenshots; code edits and CSS selectors are central to the thread.

Current status/outstanding issue:

  • Another participant reports the size change applies on the home page but not on product pages when navigating into a collection, and asks how to apply the same reduction there. No answer yet; discussion remains open.
Summarized with AI on December 16. AI used: gpt-5.
1

Hello! I’m on Dawn theme 8.0 and I can’t figure out a way to increase the font size in the Header only for my business name at the top of the page. Also, to decrease the font size of the product titles on the product pages. Would love to basically switch the sizes of these two. Any help is appreciated, thank you! Www.bundleofjoybaskets.com

2

@Michelle_Griff1 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.product__title > h1 {
    font-size: 24px !important;
}
.header__heading-link .h2 {
    font-size: 32px !important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Hi @Michelle_Griff1 ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

  1. Go to Edit code on Online Store:

GemPages_0-1677548397005.png
GemPages_0-1677548397005.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Eg:

GemPages_1-1677548478026.png
GemPages_1-1677548478026.png1024×884 17.8 KB

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

4

That worked! Thank you!! Can you also tell me how to make the collection title page header smaller? For example, Baby Boys. And maybe how to change the color of the Bundle of Joy Baskets header at the top?

5

@Michelle_Griff1

For change header title color follow this steps :

  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:

.header__heading-link .h2{
  color: #FFF  !important;   
}

And for make collection title page header smaller do this :

  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:
@media only screen and (min-width:768px){
 .collection-hero__title{
  font-size:30px !important
  }
 }

This works well.

Best Regards !

1 Like
6

Thank you!!

7

This worked for me! Thank you!

8

Can you you please tell me how to do the same for the product pages? It’s made it smaller on the home page but it’s still big when I click into the collection. Thank you!