Skip to content
Shopify Starter theme based on slate
Branch: master
Clone or download
Latest commit d2cce8b Feb 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Merge branch 'master' into slaterdates Oct 21, 2018
.babelrc build in gitignore Oct 13, 2018
.codeclimate.yml code climate config route Mar 5, 2018
.gitignore update to git ignore Oct 21, 2018
README.md
package-lock.json
package.json Merge branch 'master' into slaterdates Oct 21, 2018
postcss.config.js YOLO Sep 4, 2017
slater.png Remove locks, rename image WHYYY Sep 4, 2017
theme.lock Swap to themekit, clean up header and footer Sep 4, 2017
webpack.config.js build in gitignore Oct 13, 2018
yarn.lock remove the duplicated -p from the build Apr 15, 2018

README.md

slater theme is deprected and now maintained in slater

Note, the slater-theme is now bundled with Slater-CLI

slater

This theme is no longer maintained here


SLATER

Slater than Slate. Minimaler than minimal.

Up and Running

Clone the repo to your local environment

git clone git@github.com:the-couch/slater-theme.git theme

cd theme

npm install or yarn install


Initial build

We need to upload our initial build of the theme, we can do this by running npm run build to compile the theme one time, from there we can zip the src archive and upload it to our Shopify environment.


Development

Duplicate the config-sample.yml and grab the creds from your shopify theme.

In two separate windows run the watch command (this is to allow us to use our own build process on top of Shopify Slate).

npm run watch:assets - watches js and css

npm run start - manages theme refresh/upload

Custom Routing

We're using operator to extend pjax style routing throughout the theme. This can be used to fetch/cache/handle transitions between routes. This can also help us init/code split specific javascript to specific routes (for example a flickity slideshow).

The code for handling this is found in lib/router

We use the afterRender and beforeRender methods for handling page transitions

To block a custom route add the no-ajax class to the url element.

Why

I think slate is awesome, but I don't like that it's a closed box, I love the flexibility of things like react-create-app because it let's you actually eject the project and extend it. So this is a bit of a hack but I think y'all enjoy it. If you don't like it though, you don't have to use it ;)

Why why

Slate is a really big step forward to Shopify theme development. However, we generally prefer Webpack to Gulp, vanilla js to jQuery, CSS to SCSS, functional to object-oriented, etc. We've removed the boilerplate in favor of nothing, and will be releasing packages to replace the functionality of Slate in the near future.

You can’t perform that action at this time.