How can I reduce the product title size on Dawn theme?

Shopify Discussion

Topic summary

A user seeks guidance on reducing product title font size in Shopify’s Dawn theme.

Two CSS solutions provided:

  • Add code to base.css file: .product__title h1 { font-size: 20px; }
  • Insert code in theme customizer’s custom CSS section: .product__title { font-size: 30px; } (adjustable to preference)

Best practice recommendation:
For Dawn 2.0 themes, use the built-in Custom CSS field in the theme editor (accessible via gear icon in settings) rather than editing code files directly. This approach:

  • Preserves customizations during theme updates
  • Allows global styling or page/section-specific targeting
  • Provides a more maintainable solution

The discussion remains open with multiple viable approaches shared.

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

hi, i would like to know how to reduce the size of the product title

thanks for the support :slightly_smiling_face:

website URL: https://drip-graffiti.com/

Schermata 2023-09-20 alle 16.09.59.png
Schermata 2023-09-20 alle 16.09.59.png1394Ă—679 93.2 KB

2

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.product__title h1 {
    font-size: 20px;
}
2 Likes
3

go to your theme cutomizer and and this code in custom css section

.product__title{
font-size: 30px; // set the size as per your requirement

}

1 Like
4

Hey @stra10

The solutions provided by @Asad24 and @Guleria will help you change your product title sizes no problem. I wanted to let you know that if you are using a new 2.0 theme that you can actually add your CSS customizations using the theme editor. This will also make it so that your customizations are more likely to carry over if/when you choose to update your theme to a newer version. You can find the field for global CSS customizations by opening up the theme editor, clicking the gear icon and scrolling to the bottom of the settings to “Custom CSS”. You can see this in my screenshot below:

20-43-63132-79464
20-43-63132-79464684Ă—1290 67.5 KB

You will also find a custom CSS option on specific pages and sections if you want to limit it to certain areas of the store instead of the entire store. You can learn more about CSS and how to edit your theme with it in our Help Center: Shopify Help Center | Custom CSS.

1 Like