studio.bio just got hired to update and customize a large client’s Shopify e-commerce stores and while we had some Shopify experience, we needed to step up our game and get a professional workflow working and fast. Coming from developing locally with WordPress, Shopify is quite a bit different as there is no local environment per se which meant we had to rethink what tools to use and in what order.
To have a working setup we could live with we had 3 initial requirements:
1. CodeKit. This was non-negotiable for us. We love CodeKit for precompiling our scss files — we use it for all of our WordPress projects and wanted to keep using it for Shopify. While all the kids love the Grunts and the Gulps, we always felt that they are unnecessarily time consuming to set up and grabbing all the dependencies is a bit of a pain. We wanted to be able to use modular scss and compile that down to one file in our Shopify theme yet still be able to include liquid in our stylesheets that Shopify would replace at runtime.
2. Theme watcher. We needed something that communicated with our Shopify stores, watched our files and was able to push/pull changes. There are a few tools out there like like Motifmate which was super buggy, and Quickshot which I really like but I couldn’t get the theme watch to work properly. In the end, we settled on ThemeKit as it was rock solid and easy to set up.
3. Browser refreshing. Since Shopify theme changes are pushed up to a remote development store, we needed to incorporate browser refreshing when files were modified. This is easy enough with a true local environment and probably something that actually is easier with Grunt or Gulp but it had to work so we weren’t spending half our day refreshing browsers.
Our Shopify Workflow Guide
This guide assumes you’ve already done the following:
– downloaded ThemeKit
– created Shopify Partners account
– set up a dev Shopify store
– uploaded your working theme to your store and made it the active theme
– created a private app in the Shopify admin
– downloaded the theme into your project folder
With that out of the way, here’s the steps to configure ThemeKit and CodeKit to work:
1. Install and configure ThemeKit globally and then run the install and configuration steps as explained here in your project directory: https://shopify.github.io/themekit/
You’ll want to scroll down and do the steps under: ‘Configure an existing theme’
2. Create a new directory called ‘styles’ in your project directory. Your folder structure should look like this:
assets/ config/ layout/ locales/ styles/ templates/ config.yml theme.lock
Just a reminder but Shopify will ignore anything in the styles folder so we can use this folder to hold all of our precompiled stylesheets.
3. In rename to ; move it into the styles/ folder
4. Add your project folder to CodeKit. In the files section in CodeKit, right click on all of the folders except /styles and select ‘Skip This Folder’.
5. Create a new file in the directory called . In that file add (or whatever other modular scss/css files you may have). The goal is to import all styles into a single compiled file.
6. In the CodeKit files section, click on the theme.scss file and on the right panel, make sure it is set to Compile when the file changes or builds. Set the output path and filename like this:
assets/theme.scss.liquid
This way, CodeKit will do any imports, convert the file to css but (for the future) leave any interpolated liquid and allow us to still use the Shopify compiler at runtime. This is why we are leaving it as and not .
7. In , replace this:
{{- 'styles.css' | asset_url | stylesheet_tag -}}
with this:
{{- 'theme.scss' | asset_url | stylesheet_tag -}}
8. For browser refreshing, in CodeKit click on the gear/settings then Browser Refreshing. Set the Refresh Delay to 2.0 seconds (or longer) depending on your connection speed as this allows CodeKit to process your files and ThemeKit to upload it to your dev store before refreshing.
Below that, under External Server Options put ‘External Server Required’ to ‘ON’, then enter the url to your Shopify dev shop in ‘External Server Address’, e.g.: with no port numbers.
Then, it will *just work*. **CodeKit is the bomb**.
9. In Terminal in your project folder, run so that ThemeKit is tracking all of your files. Once any file is updated/changed, it will upload to your dev store and CodeKit will handle the browser refreshing.
Give it a try by changing some scss and saving.
Boom! You’re developing with Liquid and modular scss!
