Change Heading Font Size in Shopify: Settings & CSS (2026)

Key takeaways

Global heading sizes are set in Theme Editor > Theme settings > Typography.

Most themes offer a heading scale slider that adjusts all heading sizes proportionally.

For per-heading control (H1 vs H2 vs H3 at different sizes), you need CSS in your theme’s assets folder.

CSS changes require editing assets/base.css or similar - duplicate your theme first.

Fudge can write and apply the CSS for you from a plain English description.

Shopify’s Theme Editor gives you control over heading fonts and a general size scale. For precise per-heading sizes, you’ll need to add CSS. Here’s how to do both.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.

Method 1 - Change heading size in the Theme Editor

This changes the global heading scale across your whole store.

Method 2 - Change individual heading sizes with CSS

If you need H1 at one size, H2 at a different size, and H3 at another - the Theme Editor alone won’t give you that. You need to add CSS overrides.

Step 1. Duplicate your theme first. Go to Online Store > Themes > Actions > Duplicate. This is your safety net.

Step 2. On your active theme, go to Actions > Edit code.

Step 3. In the file browser, open the Assets folder. Look for base.css, theme.css, or a similarly named main stylesheet.

Step 4. Scroll to the bottom of the file and add your heading size rules:

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

Step 5. Click Save.

Using responsive sizes

For a storefront that looks good on mobile, use a media query to set smaller sizes for small screens:

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

Finding the right CSS file

The file name varies by theme:

Theme	Main CSS file
Dawn	`base.css`
Debut	`theme.css`
Brooklyn	`application.css.liquid`
Custom themes	Look in Assets for the largest `.css` file

If you’re unsure which file to edit, search the codebase for an existing h1 or h2 rule to find where heading styles are already defined.

Want precise heading sizes without writing CSS yourself?

Try Fudge for Free

What units to use for font sizes

rem is the recommended unit for font sizes. It’s relative to the browser’s base font size (usually 16px), which means:

1rem = 16px
1.5rem = 24px
2rem = 32px
2.5rem = 40px

Avoid px for headings - it doesn’t scale with browser accessibility settings. Rem does.

Using Fudge for heading size changes

If you’re not comfortable editing CSS files directly, Fudge can handle it. Describe what you want:

“Make H1 headings 2.5rem on desktop and 1.8rem on mobile. Make H2 headings 2rem.”

Fudge identifies the right file, writes the CSS, and shows you a draft to review before anything goes live. No risk of breaking your existing styles.

Quick reference

Goal	Method
Adjust all heading sizes together	Theme Editor > Theme settings > Typography > Heading scale
Set specific size for H1, H2, H3 separately	CSS in assets/base.css
Responsive heading sizes for mobile	CSS with media queries

FAQ

Why doesn't the heading scale slider change my H1?

Some themes apply the heading-size scale only to specific theme-defined heading classes (e.g., .h0, .h1-display), not the raw <h1> HTML element. If your H1 isn't responding to the slider, inspect the element in DevTools to see which class controls its size, then either update that class via CSS or have Fudge target it.

What heading size should H1 be on a Shopify product page?

A common range is 1.75rem–2.5rem on desktop and 1.4rem–1.8rem on mobile. Larger H1s look design-forward but rarely improve conversion — what matters more is hierarchy and readability. Stay legible at 16-inch and 5-inch viewports both.

Can I have different heading sizes on different page types?

Yes. Shopify adds template-specific classes to the <body> tag (e.g., template-product, template-collection). Scope your CSS like body.template-product h1 { font-size: 2rem; } to apply sizes per template without affecting other pages.

Should headings be the same size on mobile and desktop?

No. A heading sized for desktop typically feels oversized on mobile — reduce by roughly 30–50% with a media query. Without responsive sizing, large desktop headings push content below the fold on phones and harm mobile conversion.

Will changing heading size affect SEO?

No. SEO depends on heading hierarchy (one H1 per page, logical H2/H3 nesting) and the keywords inside headings — not visual size. You can change font sizes freely without impacting rankings, as long as the underlying tag structure stays intact.