I'm confused: Slate of ThemeKit?

Highlighted
Shopify Partner
11 0 3

I just want to work on my own theme (using an existing theme as a base).

I also want to, obviously, compile my own .scss files.

Whereever I search online for how-tos and tutorials I see conflicting information. Some say Slate is the new things, other tutorials use ThemeKit.

What's the correct way to move forward?

2 Likes
Highlighted
Shopify Partner
1840 177 711

Hi,

I can understand it is all a little confusing right now as both Slate and Theme Kit are under heavy development moving towards a 1.0 release upon which I am certain Shopify will do their best to provide a lot of tutorials and guidance.

Slate is an all in one, opinionaed theme development framework for Shopify. If you are in any way familiar with React, Slate is to Shopify themes what Create React App is to React apps. It comes loaded with Webpack + dev server, Babel for ES6 transpilation, a nunch of loaders like for example SASS so you don't need to worry setting that up with Webpack and most interestingly with regards to your question here: it comes with deploy environment.

Deploy environments let you specify your live Shopify environment so that Slate can then publish your theme via CLI. Under the hood, Slate does that using Theme Kit which is a CLI tool for publishing and keeping in sync theme assets with your themes on any of your Shopify stores.

So Theme Kit does the actual up / download stuff of assets, the deployment step once you're happy with an iterration on your local machine.

Slate itself uses Theme Kit for the deploy task, but also comes with a bunch of other goodies for development as noted above. You'd definetely want to use Slate as a theme developer. You'd want to use Theme Kit stand alone if you want to develop themes your way using an entirely different set of tools (say, Parcel, Typescript, or different kind of theme such as a PWA or simply because you want to).

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
4 Likes
Highlighted
New Member
1 0 5

Use Theme Kit, and do not waste your time with Slate.  Theme Kit doesn't do as much but it works, has proper documentation, and it is actively maintained.

 

Slate was an attempt to make Shopify Theme development suck less, but it has been abandoned by Shopify and left in an unfinished state. Look through the issues on github and you'll see lots of people dealing with very basic issues, SSL doesn't work, SASS compilation doesn't work as advertised. It's a hot mess!

5 Likes
Highlighted
New Member
1 0 0

Agreed. took me a long time to learn the hard way. Themekit 100% (so far)

0 Likes
Highlighted
Shopify Partner
3 0 6

I've been using ThemeKit to customise a paid theme (Venue), but I'm not sure how to go about minifying the JS as it contains Liquid. I started installing Slate today because it boasts asset minification and I was hoping it could handle it.

 

How do you minify your JS if it's mixed up with some Liquid code?

0 Likes
Highlighted
Shopify Partner
2 0 0
Hi,

I'm new here and in the process of learning about Shopify development. Do you still use ThemeKit? I have read on other threads that this has been discontinued...

Can someone please point me in the right direction for developing a theme from scratch? Every time I think I'm on the right path there appears to be an obstacle!!
0 Likes
Highlighted
Shopify Partner
3 0 1

I wouldn't recommend Slate because the project has low maintenance. Also, the local development feature has caused me a lot of problems since it's not true local development anyway. 

Keep it simple, use ThemeKit. Then bundle javascript with Webpack or your favorite bundler. I use NPM and Webpack.
I have an src folder where I have all my Javascript source files written in ES6/ES7 and then I use Babel & Webpack to create a theme.compiled.js in the assets folder.

I don't compile SASS, since it's going to be compiled by Shopify anyway.


To run everything in sync you can use concurrently to run webpack --watch and theme-watch at the same time.


My scripts in package.json

"watch": "concurrently -k \"npm:webpack-watch\" \"npm:theme-watch\"",
"webpack-watch": "webpack --watch",
"theme-watch": "theme watch",

If you need liquid variables in your javascript, create a separate asset and create global javascript variables there.

I hope it helps! :) 

/C-J


 

1 Like
Highlighted
Shopify Partner
2 0 0
Thank you for sharing your recommendations C-J, much appreciated :-)

I'm used to working with Magento / Wordpress files, so this is all very alien to me at the moment!
0 Likes
Highlighted
Shopify Partner
3 0 0

Hey so I kind of agree re: Slate.  I was using the Slate v0 for a while, which used Gulp and wasn't perfect but was actually workable.  I found Slate v1 to be terrible.

 

If you don't use Slate, basically what you need to do is use ThemeKit in combination with Webpack (or something like it).   I am using the npm module "concurrently" for theme development.  Here is an example of my dev script: 

 

"scripts": {
"dev": "./node_modules/.bin/concurrently \"webpack-cli --watch\" \"theme watch --env=development\"",
},

 

This runs themekit and webpack at the same time.  

 

You'll need to set up Webpack, which is its own process... 


With this, with my limited experience, I would just get rid of all liquid inside SCSS and JS files.  I am sure there is a way to get liquid to play nicely with Webpack, and if you google "themekit webpack" there are a couple github repos out there that have set up something.  But I had a hard time with it.  I also found syntax highlighting and linting much worse when including liquid in these files.

 

The basic idea of how I have it set up is to have Webpack compile everything to a theme.js file in the assets folder.  Once webpack is done compiling, themekit (in watch mode) notices a change and pushes that to the site.  I have a separate "store" for development.  

 

Open to other ideas.  Hope that helps!

0 Likes