Use Shopify Dawn Theme for Multiple Projects via GitHub Connect

With Online Store 2.0, Shopify introduced an awesome GitHub integration. We at Checkout Agency use the new Dawn theme as a basis for many of our latest projects. Here I quickly outline our development setup.

Update 1/4/2022: Appended section: Pull back changes made on the development theme editor.

First, please verify that you installed and configured git/GitHub and Shopify CLI.

If you want to contribute to the Dawn theme (e.g., bug fixes, documentation, etc.), you must fork the Shopify/dawn repository. But in most cases, you just want to get updates from the Dawn repository and don’t contribute back. In those cases I recommend to duplicate (or mirror) Shopify/dawn.

Duplicate Shopify/dawn

On GitHub create a new repository (e.g., dawn-project-1, dawn-project-2, etc.)

Then open your terminal and create a bare clone of Shopify/dawn:

git clone --bare git@github.com:Shopify/dawn.git

Mirror-push to the newly created repository (or multiple repositories):

cd dawn.git
git push --mirror git@github.com:markustripp/dawn-project-1.git
...
git push --mirror git@github.com:markustripp/dawn-project-2.git
git push --mirror git@github.com:markustripp/dawn-project-3.git
...

Now you can remove the temporary bare cloned repository:

cd ..
rm -rf dawn.git

See the screenshot below for a complete example of the duplication process.

Clone Newly Created Project Theme

Next, clone your newly created project repository (e.g., your-username/dawn-project-1), for instance using GitHub Desktop.

Staying up to date with Dawn changes

To pull in the latest changes from the Shopify/dawn repository, you can add a remote upstream pointing to this repository.

Verify the list of remotes and validate that you have both an origin and upstream:

git remote -v

If you don’t see an upstream, you can add one that points to Shopify’s Dawn repository:

git remote add upstream https://github.com/Shopify/dawn.git

Pull in the latest Dawn changes into your repository:

git fetch upstream
git pull upstream main

Connect Shopify Store with GitHub Repository

In the theme section of your Shopify admin you can connect to a GitHub repository via “Add theme” button.

If you signed in via your partner dashboard, you must create a separate user in that Shopify store with admin rights and sign in with this new user.

In your terminal switch to the cloned dawn-project-1 directory, and use the Shopify CLI to login to your store and launch the development server.

shopify theme serve

That’s it. Now you can code and preview your changes locally and push the changes to your GitHub repository. As soon as you push your changes, they are updated on the Shopify theme connected to the GitHub branch.

Pull back changes made on the development theme editor

When you open the link to the theme editor from the terminal output, a branch version of the theme editor opens.

Branch version (Development 287d1a-10) of the theme editor

To pull back changes made in this theme editor just execute (updated 3/2/2022):

shopify theme pull -d

Pulling the changes from the theme editor

Now, when you commit the changes to Github, all changes made in the development theme editor are stored as well.