Sitemap

Use Shopify Dawn Theme for Multiple Projects via GitHub Connect

4 min readAug 19, 2021

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.

Press enter or click to view image in full size

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.)

Press enter or click to view image in full size

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.

Press enter or click to view image in full size

Clone Newly Created Project Theme

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

Press enter or click to view image in full size

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
Press enter or click to view image in full size

Pull in the latest Dawn changes into your repository:

git fetch upstream
git pull upstream main
Press enter or click to view image in full size

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.

Press enter or click to view image in full size

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
Press enter or click to view image in full size

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.

Press enter or click to view image in full size
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
Press enter or click to view image in full size
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.

--

--

Markus Tripp
Markus Tripp

Written by Markus Tripp

I ❤️ Shopify, Laravel, Next.js.

Responses (1)