Auto-Refresh for Shopify Development using Browser-Sync

Update: Shopify Online Store 2.0 is now available for newly created dev stores. Stores using Online Store 2.0 can leverage the Shopify-CLI command line utility that features browser refresh when dev files are saved and is recommended by myself and Shopify over the methods discussed in this article.

If you’re new to Shopify development like myself, you might be surprised to find that there aren’t as many development tools out there as you might expect. If you’ve found this article you’ve most certainly come across both Theme Kit and Slate, both are tools provided by Shopify.

While Slate is a robust tool for creating a project from scratch with lots of boilerplate code and browser-sync for live reloading (think create-react-app if you’re familiar with React) — Theme Kit is more-or-less a CLI watcher that watches for changes and uploads automatically.

After testing these two tools my immediate question was the following: What if I want live reloading with an existing project or a much slimmer starter theme?

Upon googling I found that most ways of migrating an existing theme to work with Slate are very “manual” and not very ideal.

So I set out to create a simple environment using both browser-sync for live reloading and Theme Kit to sync my theme files on the backend.

If you don’t have Browser-sync installed globally yet, you can install it using NPM:

npm install -g browser-sync

Next, you need Theme Kit for syncing your project with Shopify.

If you’re on macOS you can install via brew:

brew tap shopify/shopify
brew install themekit

On Windows you can install via Chocolatey package manager:

choco install themekit

Now let’s create a test directory somewhere and open it up in your terminal of choice.

If you don’t already have a Shopify store you’re working with go create one now.

Once you have a store and have created a private app that provides you with your API key and password — and have allowed Read/Write access on your theme files — let’s run a Theme Kit command to create a barebones project scaffolding and sync it to our store:

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

Your directory should now look something like this:

New Theme Kit Project Files

We can now run a Theme Kit command to watch and sync our directory:

theme watch

Open a new terminal tab or window because this setup requires that you have a browser-sync command running as well. Navigate to your project directory in the new terminal window.

Next we’re going to launch browser-sync with a few parameters, one of which will be the address of your store that we’re going to proxy so have that ready.

In your new terminal opened to your project directory, run this command replacing <mystore> with your store’s name:

browser-sync start --proxy "https://<mystore>.myshopify.com/" --files "*/*.*" --reload-delay 1000

Currently, we’re watching all files in our directory. This may not be what you want, so feel free to play with that. At the end of the command we’re telling browser-sync to wait 1 second after a change to refresh the window.

We’re doing this because we need to allow time for Theme Kit to upload our changes. Depending on your changes and your connection you may need to adjust this.

This command should open a new browser tab on a local web server proxying your Shopify store. If your browser is complaining about the site not being secure, you can either click advanced and proceed or go the extra distance of creating a self-signed certificate.

Once you proceed you should see a few links making up the landing page of your barebones theme:

Theme Kit Barebones Landing Page.

Open up your favorite editor and make a change and your browser should auto-refresh with the change visible (after 1 second of course).

You’re done! Get to work!