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.

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.

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.

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:

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.

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