A Shopify development toolkit.
This project is an active work in progress! The CLI is stable, but the theme itself is not.
Want to help? We'd love to have you. Ideas, feedback, critiques 👉 shoot us an Issue.
npm i slater -g
- asset pipeline via Webpack, Babel, PostCSS/SASS
- built-in deployment tool
- live reloading
- simple config
- easy integration into existing themes
- starter theme (WIP)
Table of Contents
- Quick Start
- Command Line
- Live Reloading
- Guides and Tutorials
- Slater in the Wild
The easist way to get started with Slater is
init outputs a
default folder structure into the directory of your choice.
slater init <root>
Don't forget to install the dependencies.
You'll need to define one or more themes in the provided
to deploy to, similar to a standard Shopify
moduleexports =themes:development:id: '12345...'password: 'abcde...'store: 'store-name.myshopify.com'ignore:'settings_data.json'
Then, from the project root:
And that's it! Slater will watch your local theme for changes and sync them to your remote site when they update 🎉.
Slater makes some assumptions out of the box, but it can be easily customized to fit most existing projects.
Slater projects require themes to be defined in the
By default it looks for a theme called
moduleexports =themes:development: ...
You can call it whatever you want though.
moduleexports =themes:dev: ...
Just be sure to specify your theme name on the CLI:
slater build --theme dev
You can also define as many themes as you like. Use these for a production theme, staging, or whatever you like.
moduleexports =themes:dev: ...test: ...live: ...
All theme files should be located within a single source directory. By default,
Slater looks for a
/src directory in your project root.
To adjust this, specify an
in prop on your config:
moduleexports =in: '/source'
Files within this directory will be built and copied to
your project root, and then synced to your remote theme.
To adjust your local build directory, specify an
out prop on your config:
moduleexports =out: '/dist'
default, it looks for
You can specify a different entry point using the
assets object on your
moduleexports =assets:in: '/source/scripts/index.js'
Slater uses PostCSS by default. It's configured to allow SASS-like nesting, in addition to all modern CSS goodies.
// rest of your project scripts
You can also use SASS. Simple specify the
sass preset in your assets config:
Alias & Env
moduleexports =alias:components: './src/scripts/components'env:API_KEY: 'abcde...'
const fetcher =
For convenience, there's also a built-in alias
@ that points to the directory
Keep in mind, these environment variables are public, so don't use them for any secret keys, passwords, or any value that you need to keep private!
Watches for file changes and syncs updates to your specified theme.
Compiles assets and copies all files from the
config.in directory to the
Sync local files or directories to your remote theme. A direct interface to
@slater/cli uses internally.
slater sync build/snippets/hero.liquid # fileslater sync build/snippets # directoryslater sync # defaults to config.out
Any of the core commands can be combined with the following options:
--config <path>- specify the path to your config file
--theme <name>- specify a named theme from your config file
To deploy a theme, combine the above commands as needed:
slater build && slater sync --theme production
Live-reloading & HTTPS
slater uses an local SSL certification to correspond with Shopify's HTTPS
hosted themes. To take advantage of live-reloading, you need to create a
security exception for the
slater cert (this is safe). To do this, load
https://localhost:3000 in your browser, and follow
the instructions for adding an exception. If it works, you should see this in
your browser window:
In the Wild
The following sites were built using some version of Slater. Send us a PR to add to this list!
MIT License © The Couch