Getting started | Staying up to date with Dawn changes | Developer tools | License
Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme development. It's Shopify's first source available theme with performance, flexibility, and Online Store 2.0 features built-in and acts as a reference for building Shopify themes.
You can find a more detailed version of our theme code principles in the contribution guide.
We recommend using Dawn as a starting point for theme development. Learn more on Shopify.dev.
If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be substantively different from Dawn so that it provides added value for merchants. Learn about the ways that you can use Dawn.
Please note that the main branch may include code for features not yet released. The "stable" version of Dawn is available in the theme store.
Say you're building a new theme off Dawn but you still want to be able to pull in the latest changes, you can add a remote upstream
pointing to this Dawn repository.
origin
and upstream
:
git remote -v
upstream
, you can add one that points to Shopify's Dawn repository:
git remote add upstream https://github.com/Shopify/dawn.git
git fetch upstream
git pull upstream main
There are a number of really useful tools that the Shopify Themes team uses during development. Dawn is already set up to work with these tools.
Compiled from Elm and added as javascript node at id exhibition-date
.
cd elm
before using dev and compile commands.
elm-live src/ExhibitionDate.elm --hot -- --output=exhibition-date.js
elm make src/ExhibitionDate.elm --output=../assets/exhibition-date.js
elm make src/ExhibitionDate.elm --optimize --output=../assets/exhibition-date.js
Run with store flag first time shopify theme dev --store {store-name}
The store that you specify is used for future commands until you pass the --store flag with a new value. To check which store you're connected to, run shopify theme info
Shopify CLI helps you build Shopify themes faster and is used to automate and enhance your local development workflow. It comes bundled with a suite of commands for developing Shopify themes—everything from working with themes on a Shopify store (e.g. creating, publishing, deleting themes) or launching a development server for local theme development.
You can follow this quick start guide for theme developers to get started.
We recommend using Theme Check as a way to validate and lint your Shopify themes.
We've added Theme Check to Dawn's list of VS Code extensions so if you're using Visual Studio Code as your code editor of choice, you'll be prompted to install the Theme Check VS Code extension upon opening VS Code after you've forked and cloned Dawn.
You can also run it from a terminal with the following Shopify CLI command:
shopify theme check
Dawn uses GitHub Actions to maintain the quality of the theme. This is a starting point and what we suggest to use in order to ensure you're building better themes. Feel free to build off of it!
We love fast websites! Which is why we created Shopify/lighthouse-ci-action. This runs a series of Google Lighthouse audits for the home, product and collections pages on a store to ensure code that gets added doesn't degrade storefront performance over time.
Dawn runs Theme Check on every commit via Shopify/theme-check-action.
Copyright (c) 2021-present Shopify Inc. See LICENSE for further details.