- Role
- Frontend Engineer
- Timeline
- 2020 – 2023
- Impact
- 3M+ merchants
- Stack
- LiquidHTMLCSSJavaScript
When I joined the Flaghsip Themes team at Shopify in 2019, our catalogue was very different from today's.
Our nine first-party theme codebases were each built by a different group of developers, each leaning on a different mix of third-party libraries, each with its own approach (or non-approach) to accessibility. Debut, the default, was the best of the lot, and still nowhere near where we wanted it to be.
These were the main five problems we had:
- Limited: Sections only worked on the homepage. The long-promised "Sections Everywhere" project — announced years earlier at Shopify Unite — wasn't ready. Partners were patiently waiting for it, so were us.
- Inconsistency: Nine codebases, nine sets of conventions. Shipping a cross-cutting feature like adding 3D models and videos on product pages — which I worked on as an intern — meant nine separate implementations of the same idea. It took way too long.
- Non-native: Carousels, scroll effects, animations all reached for external JS libraries. Our 1P themes dependend heavily on other people's code that we often had no context about.
- Heavy: Performance on Debut was okay. Our CEO, Tobi, challenged our team with an ambitious goal: the next default theme should ship no more than 64 kilobytes. We took it as a north star.
- Rigid: 1P themes were known for limited customizeability, while paid themes from our partners shipped dozens of merchant-facing settings.
Dawn was our answer to all five at once.
With Dawn we we changed what a Theme is, rather than just building a new one.
Dawn's principles
As we started outlining the plan, we wrote the constraints down: the theme code principles — web-native, server-rendered, no jQuery, no framework, no build step, progressively enhanced, accessible by default.
This became the contract every PR was reviewed against, including community ones. They're still the contract today.
To enforce the web-native approach and ensure we made the best possible use of the latest web browsers functionality, we started building the Theme with NO JAVASCRIPT. Yes, the first phase of the project was purely HTML/CSS/Liquid with no custom scripts.
On the Second Phase, we enhanced the baseline by adding the minimal amount of JavaScript to get that functionality there. In code reviews, we were encouraged to challenge the need for custom JS solutions and question every single line of code we were adding.
Ultimately, Dawn's principles held the line on our performance budget and helped us keep review velocity high across a (soon to be) public repo.
A design system flexible enough to be other themes
The next phase of the project was extending customizeability and adding some polish to it.
This turned out to be one of the most interesting design problems on this project.
When Merchants create their Shopify store, they want their brand to shine, not ours. We built Dawn around a very flexible design system rather than a fixed look.
Every key visual choice is configurable: radius, spacing, color, type, motion, shadow, and positioning all adapt to the merchant’s brand instead of forcing a fixed aesthetic.
I personally spent a lot of time pairing with designers on this — turning their decisions into configs that wouldn't collapse under the vast amount of merchant choice. Every combination had to still look intentional and polished, no matter which dials a merchant moved.
Then we realized something: if our design system is so flexible, we can carefully craft some default presets to cover a wide range of industries.
The Dawn family
The next step was turning these default presets into a family of themes. Using Dawn as the baseline. Each one keeping its underlying code structure but layering in a distinct visual language using the customization options we had just built.
In 2022, we shipped 10+ new themes based off Dawn: Crave, Colorblock, Taste, Ride, Origin, Sense, Refresh, Studio and Craft.
All of them share the same codebase. We just wire up some different presets and the theme is ready.
For us, this allows us to offer a broad catalogue of themes without the constraints of maintaining multiple codebases we had before Online Store 2.0.
For merchants, because they share the same codebase, they can easily switch between any of our themes and keep their configuration; only the visual layer changes. A merchant moving from Sense to Studio keeps their hero, their featured collection, their FAQ accordion.
How I contributed
I've speant almost three years working on Dawn and made some relevant contributions to it:
- Product page, featured product, and quick buy. I led the dev of the product page section and the featured product section end-to-end, and built the quick buy feature that lets customers add to cart without ever leaving the product listing page.
- Design system: I helped the design team build the configurable system — turning design intent into the settings, tokens, and defaults merchants actually see in the editor.
- Animation: I was heavily involved in the project that brought motion to Dawn — reveal-on-scroll, hover states, parallax. All on the same web-native, no-library budget.
- Accessibility: I've worked closely with Scott Vinkle, our accessibility specialist, on a long list of accessibility fixes: focus management, ARIA correctness, reduced-motion paths, high-contrast mode optimizations and the list goes on...
- Community. Triaged issues and reviewed PRs on the public repo, week after week. I remain one of the top contributors to Shopify/dawn despite stepping away from the project in early 2023.
What Dawn became
Dawn shipped not only as the default theme for any Shopify merchant, but it also became the reference theme for Online Store 2.0 — the architecture overhaul that finally landed sections everywhere, along with JSON templates, app blocks, and section groups across the whole ecosystem.
Dawn became the architectural baseline that hundreds of third-party theme developers used as a foundation for their own work, and it redefined the baseline for what a great theme looks and feels like.
Over 3 millions of Shopify merchants run Dawn or a Dawn-derived theme today, and the principles we wrote down in 2020 are still the contract for every PR that lands. The open-source code lives at Shopify/dawn.