Shopify Dawn Theme: Complete 2026 Customisation Guide

Dawn is Shopify's free flagship theme and the right choice for most new stores. It is fast, accessible, and built on Online Store 2.0 sections. The bad news: out of the box it looks like every other Dawn store. Here is how to customise Dawn properly without breaking the speed advantages that make it worth using.

The custom CSS approach (do not edit base.css)

Never edit base.css directly. Every Shopify update overwrites it. Instead, create assets/custom.css with your overrides and load it in theme.liquid. This is the pattern every serious Shopify partner uses.

All your brand colors, spacing tweaks, button styles, and typography changes go in this single file. When you want to swap brands or update later, you change one file.

Brand colors via CSS variables

Dawn uses CSS variables internally. Override them in your custom.css under :root. Brand primary, brand hover, accent, background, surface, text, muted — six tokens cover most stores.

Use CSS variables in your custom sections too. This means changing brand color in Shopify settings updates the entire theme.

Custom sections — the right way to add new layouts

When Dawn does not have the section you need, do not edit Dawn's existing sections. Create new files in /sections/ with the prefix sn- (or your brand prefix). Each section gets its own .liquid file with schema for theme editor controls.

Custom sections drop in cleanly alongside Dawn's defaults and are not affected by Dawn updates. This is how we keep stores updateable across years of Dawn version bumps.

Fonts: stay system or pick from Shopify's font library

Dawn ships with a font picker in Theme settings. Pick fonts from Shopify's library (already self-hosted, fast). Avoid loading Google Fonts directly — every external request slows your site.

If you absolutely need a font not in Shopify's library, self-host it as a theme asset and use @font-face. Loading it from fonts.googleapis.com is the slowest option.

Mobile-first fixes

Dawn's defaults are mobile-friendly but not perfect. Common fixes: header logo too large on small phones, drawer menu animation jankiness, product page image gallery taking up too much vertical space.

Test on real devices, not just Chrome DevTools mobile mode. iPhone 14 mini, Galaxy A15, and an old iPhone SE will reveal problems Chrome's emulation hides.