Article brought to you by Studio Klein for Working With Shopify
Check out the Full Tutorial here!
A couple months ago, I was working on a Shopify Theme and accidentally deleted the whole CSS file. Luckily for me there was a backup theme I was able to copy the CSS from but any changes or updates I made to the file was gone. This led to a painful afternoon of figuring out what CSS changes I made and a whole lot of time lost on this project. But what if I didn’t have that backup file? Then that's tens of thousands of lines of CSS I’ve lost. This is why we as developers use Git.
Git is one of the most important tools for a developer's workflow. Git helps us keep track of changes done to a file so we have records on what work has been done. In a world where I was using Git, I would’ve simply been able to recover that deleted file and save myself a whole afternoon of time and pain.
The new Shopify Online Store 2.0 updates introduced a simple GitHub integration with your Shopify Theme. Shopify has even widened the scope of the Shopify CLI to include themes.
I will be showing you how you can integrate GitHub into your Shopify theme development workflow using the new Github integration with Shopify Themes and the updated Shopify CLI.
Lets dive in:
1. Shopify Partners Account and Development Store
If you already have a Shopify Partners account and development store you can skip to step 2.
Head over to Shopify Partners and create a Partners Account.
Then click on Stores on the top left then Add store on the top right. Choose Development store as your store type and fill out the other information required and click Save. You'll then be redirected to your new store.
2. Shopify CLI Installation
You can head over to the Shopify CLI Installation page here and install the CLI based on your platform/preferred method.
Since I'm on a Mac, I'll use Homebrew and run the follow commands in the terminal
$ brew tap shopify/shopify
$ brew install shopify-cli
Then use $ shopify version to see what version of the CLI you're on and $ shopify help to see all the list of commands available.
2. Initializing a New Shopify Theme
We can now initialize a new theme by running the $ shopify theme init and you will the instructed to enter a name for this theme. I will be naming mine shopify-theme. The new Reference them 'Dawn' will then be cloned into your current directory. You can then $ cd into your new theme and run $ ls and you will see all of the Dawn theme folders inside.
3. Creating a Git Repository
Head over to your GitHub account and create a new repository. I would recommend naming the repo the same name you gave your theme. In my case I will call it shopify-theme.
4. Add Theme Files to Your Git Repository
Head back to the terminal and in the theme directory you just initialized and run $ git init to create a new repository in that directory. Then run $ git add . then $ git commit -m "First commit" to add and commit the theme folders to your new repository
Now before we push, we must add the GitHub repository as a remote repository with $ git remote add origin <REMOTE REPOSITORY URL> then we can push using $ git push -u origin main
You can get your remote repository url from your Repository from GitHub.
After you have pushed to GitHub, your GitHub repo will now have all your theme files.
5. Connecting Your Repository to Shopify
We can now head back to our Shopify Admin Dashboard and navigate to Online Story > Themes. From there, scroll down to Theme library and click Add theme > Connect from GitHub.
You will be prompted to login to GitHub and once logged in your account will be connected. From there select the repository you made on GitHub and click connect. The repository will now be added to your Theme Library.
This integration works 2 ways to sync data. We can push commits through GitHub, but also when we make a change on the theme through Shopify, Shopify will make a commit to our repository. We can see this by opening the code editor on Shopify by click Actions > Edit Code and open the theme.liquid file in the layout folder. Just above the opening main tag input <h1>Hello World</h1>. Click Preview to see if the change was made.
Now go back to your repository on GitHub, and you can see that Shopify made a commit to your repository.
6. Starting a Development theme through the Shopify CLI
It's great that we can sync data both ways, but if we made a change locally, we would have to commit and push those changes onto GitHub to see them on our Shopify theme. This is where the Shopify CLI comes in. We can create a temporary Development Theme that will allow us to preview changes we made locally to your Shopify Theme but not make any changes to the actual theme until you push your code on GitHub.
Since Shopify made a change to our repository, let first grab those changes by running $ git pull. Once those changes have been pulled run $ shopify login --store <DOMAIN> where <DOMAIN> would be your Shopify store URL. A Window will popup to login to your Shopify Partners account. Once logged, on your terminal it will now tell you what store your are logged into and which partner organization.
From here we can run $ shopify theme serve and this will create our Development theme. Open up the code in VSCode (or any text editor of your choice) and open the theme.liquid file and remove the <h1>Hello World</h1> code we added in the previous step, you can see the changes live on the localhost url.
Once you're happy with your changes, add and commit them to GitHub and they will apply to the theme on Shopify.
Congratulations! You now have all the tools needed to integrate GitHub into your Shopify theme development workflow!
There are a lot of other tools the Shopify CLI can do but for this article I just wanted to cover utilizing the development theme in a theme development workflow.
Other Shopify CLI tools:
- Theme Check - A linter for Liquid and JSON within your theme
- Publish themes from the command line
- Delete themes
- Pull and push changes from and to other themes
- Package themes into a ZIP file that can be uploaded to Shopify
Git Repo: https://github.com/JoshTag/shopify-2.0-dev-course
Live Demo: https://moo-vintage-thrift.myshopify.com/
Top comments (1)
Running shopify theme init initializes the dawn theme and downloads the theme. You can't then re-initialize the git with your repository because you can't initialize and already initialized git repo so this doesn't really make sense.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.