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.
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.
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 firstname.lastname@example.org:Shopify/dawn.git
Mirror-push to the newly created repository (or multiple repositories):
git push --mirror email@example.com:markustripp/dawn-project-1.git
git push --mirror firstname.lastname@example.org:markustripp/dawn-project-2.git
git push --mirror email@example.com:markustripp/dawn-project-3.git
Now you can remove the temporary bare cloned repository:
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.
To pull back changes made in this theme editor just execute:
shopify theme pull -i <theme-id>
Now, when you commit the changes to Github, all changes made in the development theme editor are stored as well.