Things at Shopify are always developing quickly and one of the latest developments is a command line tool to help theme developers develop quickly as well (😉), Slate.
Slate comes with a ton of new and wonderful features, namely a sort of scaffolded Shopify theme. The Slate theme is considerably paired down compared to the Shopify theme development framework Timber. This unopinionated starter pack is a great jumping off point for theme development
In this post, however, we are going to set up an existing theme using Themekit for development to use Slate. The result will be a slightly different file setup and the great addition of Browsersync for live reload.
🛑✋ - Before continuing make a copy of your theme (or make sure your most recent changes are commited to whatever you are using for version control). Transfering your theme to use slate will alter the file structure and you want to make sure you have a working version of your theme saved before you go changing things 🙃
Install Slate
The first step to using slate is actually installing it. We are going to use npm so make sure you have that installed first and then run:
$ npm install -g @shopify/slate
This will install Slate globally. To check that you have Slate properly installed run:
$ slate -v
The result should be the version number of Slate installed - if you see this you are good to go.
Check Your Config
If you are coming from Themekit, you should have a config.yml file in the root of your theme. This should be good to use with Slate as Slate is making use of Themekit to do the file uploading and watching.
Just to make sure double check that your config file looks something like this:
development:
password: [password-from-private-app]
theme_id: [your-theme-id]
store: [your-store-name].myshopify.com
ignore_files:
Build, Deploy, Watch
It's now time to build your theme from the files in the src folder, redeploy the files to the server, and start watching for changes. Slate has one command that will do all three, run slate start to build, deploy, and start watching. This will also open up a browser with Browsersync running, likely on http://localhost:3000.
If you store is still password protected, you will be directed to the password page for the store. You can access the store and theme by entering in the password found in the Admin panel under online store > preferences.
Now you are ready to start developing with Slate 🙌
