Setting up a Shopify development workflow in 2021

I’ve recently started tinkering with Shopify, mainly because of my girlfriend’s new business, and then out of curiosity. We bought a theme, set it up with all the bells and whistles. No coding required. Simples.

Then came the “oh but I don’t really want my images to zoom in when I hover over them”. And the “Can we only sell to people that are in a certain city?” And the tinkering began.

I used the built-in code editor in Shopify at first. Then my inner nerd started noticing things. Bad things. Why was this theme importing jQuery twice? Why is it using 3 different carousel plugins? And HOLY SHIT it ranks almost 0 on Google Page Speed.

I couldn’t let it go. Nor could I use the Shopify web editor any more. I needed to search across all files. I was messing things up constantly and it was going live for all the world to see. I needed my Visual Studio Code and some version control. I needed a staging environment. And I needed to be able to make changes quickly.

Shopify is Weird

I looked online for a solution. The first thing I found was Slate. It’s a tool set up by Shopify to do exactly what I need. Update theme files and sync with a shopify store. Great. Except for the 5 minute wait to upload the entire theme for each change. And the half working local dev server. Oh, and the big warning sign on the github repository: “End of Support (January 2020)”.

Shopify is weird. The theme files have to hit the Shopify servers before they get compiled into something useful for the browser. They also add in a bunch of hooks and scripts and magic. Kind of like a closed off Wordpress that only they have access to. So local development isn’t really possible I found out.

I also learnt that slate is based on Theme Kit, which is a command line tool for working with Shopify themes. This I found much simpler to work with. I also found a Github app called PluginGit which is about the time I jizzed my pants. It automatically syncs from a Github repository to a Shopify store. You push to master, and the changes get synced to your live theme on Shopify. Sweet. Version control, tick.

The Holy Grail: Theme Kit & Plugin Git

Here’s the workflow I put together:

1. Set up a development Shopify store
2. Create a Github repository and set up Plugin Git to sync your live store
3. Make changes locally, sync and preview to development store instantly
4. Commit & push to Github, live store updates automatically

It has made working with Shopify so easy and I highly, highly recommend it.

Here’s the step by step:

1. Set up a development Shopify store.

You can sign up to become a Shopify Partner, which lets you set up unlimited stores. You can log in and set up a new store like you would normally. Let’s call it dev-store.myshopify.com

You’ll also need to create a private app, that will let Theme Kit access its’ files. Go to Apps > Manage private apps > Create new private app. Give it a name and enter your email.

Click on Show inactive admin API permissions and select Read and Write access for the Theme section.

Give Read and write permissions to view and manage theme templates

Click Save.

You’ll now have an API key and a password. Save these for later.

2. Create a Github repository and set up Plugin Git to sync your live store

Create a repository on Github you want to download your theme files into.

Configure Plugin Git by clicking Configure and following the instructions. It will need access to your Github account and your Shopify store.

Once you’ve set that up, it should download your live Shopify theme into the master branch of your repository.

Bingo. You can now work with this locally

3. Make changes locally, sync and preview to development store instantly

Clone the repository to your local machine.

Install Theme Kit

Create new config.yml and package.json files similar to these:

The config.yml is your configuration file for Theme Kit. This syncs to your development store, so all settings here are for your development store, NOT your live store.

password: The password for your private app you created earlier for your development store. This is NOT your store password

theme_id: You can get this by going to Online Store > Customize and looking in the URL. The number part is your theme id.

theme id is 82570870837

store: The url of your development store

ignore: These are the files that won’t be synced by the watch or deploy commands. Initially, you’d want this blank so you can deploy everything at first, but I highly recommend ignoring the settings_data.json so that you don’t keep overwriting with settings from your live store.

In package.json, note the scripts. Given that all your settings are correct in config.yml, when younpm run deploy in a terminal, it will deploy all your theme files to your development server, overwriting the existing theme there. No biggie, it’s just the starter theme anyway.

npm run watch will watch your local files for changes and sync them to your development store. Get coding, refresh the browser, and you’ve now got as close a replica to a local development setup as possible with Shopify!

4. Commit & push to Github, live store updates automatically

After you’re done coding away that sexy new feature, you can commit your changes, push to Github and your live store will update automatically after a few minutes. Magic!

Now there’s 2 ways I recommend doing this:

1. Commit and push directly to master — for bug fixes, and quick updates, you can push directly to master.
2. Create pull requests — for larger chunks of work, I recommend you commit to a branch as many times as you need, then create a pull request in Github and merge it in when you’re ready to deploy live.

Now if you ever turn the whole site red by accident, you can just revert the changes in github and it will automatically sync to your live store.

There you have it. This has saved me SO much time and hassle and I am super grateful for the people behind Plugin Git for making such a great tool.

If you’ve got any tips or questions I’d love to hear from you.

Ciao for now.