Skip to content
Shopify theme development toolkit.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Shopify theme development toolkit.

npm i @slater/cli --save-dev


Place your entire theme within the /src directory, including a Shopify-standard config.yml.

JS/CSS is compiled using rollup and postcss. This library expects a single entrypoint at /src/scripts/index.js, so just import your modules and stylesheets there and you should be good to go.

Example structure:

- package.json
- src/
  |- config.yml # standard issue Shopify
  |- scripts/
    |- index.js
  |- styles/
    |- main.css
  |- layout/
  |- templates/
  |- sections/
  |- snippets/
  |- locales/
  |- config/
  |- assets/


slater watch


Build JavaScript and CSS, copy theme to /build directory.

slater build


Build JavaScript and CSS, copy theme to /build directory, push to Shopify.

slater deploy

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 following the instructions for adding an exception. If it works, you should see this in your browser window:

@slater/cli successfully connected



Specify a theme from config.yml. Defaults to development.

slater deploy --env=production

Config File

slater also supports a slater.config.js as well, which supports all the same options as @friendsof/spaghetti.

// slater.config.js
module.exports = {
  jsx: 'preact.h',
  map: 'inline-cheap-source-map',
  alias: {
    foo: './bar'


MIT License (c) 2018 The Couch, LLC

You can’t perform that action at this time.