Setup Shopify Theme Development Environment (2020 Guide)

As of Jan 2020, Shopify announced to deprecate Slate, the infamous Shopify theme development kit. Instead, it is going to be replaced by Shopify Theme Kit. You can follow the official guide or my article to setup Shopify Theme development environment.

Setup Shopify Theme Development Environment

1. Install Theme Kit

Theme Kit is the future of Shopify theme development, so we need to use it to replace Slate. It is pretty much easy to get started with Theme Kit, don’t worry.

For Mac, we will need Homebrew for the task:

$ brew tap shopify/shopify
$ brew install themekit

For Windows, use Chocolatey to install:

$ choco install themekit

For Linux, installation is done via script:

$ curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

2. Generate API key

To connect theme kit with Shopify store, you need to create a new private app in your development store, and retrieve its API key information. This is what theme kit needs to know how to connect with your store and themes.

3. Create new theme

Make sure to copy the password of the corresponding API key of the app you just created on admin.

We can start to test new theme by creating one from command line as below:

$ theme new --password=***REDACTED*** --store=awesome-store.myshopify.com --name="Dev Theme"
An update for Themekit is available. To update please run `theme update`
[awesome-store.myshopify.com] theme created
[awesome-store.myshopify.com] config created
Created templates.
	Created templates/product.liquid.
	Created templates/search.liquid.
	Created templates/404.liquid.
	Created templates/blog.liquid.
	Created templates/collection.liquid.
	Created templates/page.liquid.
	Created templates/index.liquid.
	Created templates/list-collections.liquid.
	Created templates/page.contact.liquid.
	Created templates/article.liquid.
	Created templates/cart.liquid.
	Created templates/collection.list.liquid.
	Created templates/gift_card.liquid.
Created templates/customers.
	Created templates/customers/addresses.liquid.
	Created templates/customers/login.liquid.
	Created templates/customers/order.liquid.
	Created templates/customers/register.liquid.
	Created templates/customers/reset_password.liquid.
	Created templates/customers/account.liquid.
	Created templates/customers/activate_account.liquid.
Created assets.
	Created assets/application.js.
	Created assets/application.scss.
Created config.
	Created config/settings_schema.json.
	Created config/settings_data.json.
Created layout.
	Created layout/theme.liquid.
Created locales.
	Created locales/en.default.json.
[awesome-store.myshopify.com] uploading new files to shopify
[development] 26|26 [==============================================================================]  100 %

Theme Kit will generate a new theme with that directory structure, and upload it to your Shopify store. Here it is inside Theme section.

Conclusion

That’s it, no more work needs to be done. It is very easy to setup Shopify Theme Development environment with theme kit comparing to its parent, Slate. However, theme kit is still relatively new and it is going to take a while until Slate really becomes deprecated. You still have the option to keep working on with Slate and start moving theme development to theme kit until it becomes more mature.

You might also want to take a look at Theme Kit home page for more information.