How to Change Heading Font Size in Shopify (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.

To change heading font size in Shopify, go to Online Store > Themes > Customize > Theme settings > Typography and drag the heading scale slider. For precise per-heading sizes, add CSS.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge, the AI operator for Shopify stores, with a 4.9 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.

Step 1. Go to Online Store > Themes > Customize.

Step 2. In the left sidebar, scroll down and click Theme settings.

Step 3. Open the Typography section.

Step 4. Find the heading font settings. Most themes include a Heading size or Heading scale slider. Drag it to increase or decrease the size of all headings proportionally.

Step 5. Click Save.

What this controls: This adjusts the base heading scale used by your theme’s CSS. It’s a multiplier - a larger value makes all headings bigger relative to your body text.

What it doesn’t control: The ratio between H1, H2, and H3 sizes. For that, you need CSS.

To change the heading typeface itself, see how to update fonts in Shopify.

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, click the three-dot menu (…) next to your theme, then Duplicate. This is your safety net.

Step 2. On the duplicate, click the three-dot menu (…), then 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:

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.

For tighter layouts on phones, see how to improve mobile spacing in Shopify.

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.

If the type system itself is the problem rather than one heading, our free AI Shopify store builder proposes a typography pairing and scale alongside a colour palette and homepage design.

Using Fudge for heading size changes

If you’re not comfortable editing CSS files directly, Fudge, the AI operator for Shopify stores, can handle it in its store editor. 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. Your live store stays as it is until you publish.

Quick reference

FAQ