Home > Shopify Tutorials > Shopify Slate toolkit

Shopify Slate Toolkit: Everything you need to know

Last updated: August 01, 2024
Written and researched by experts at AvadaLearn more about our methodology

By Sam Nguyen

CEO Avada Commerce

In order to start a Shopify business, you might have to find out different ways to develop your store themes. Excellent themes will be a factor in increasing the number of customers and in creating a good experience for them. With Shopify Slate Toolkit, your themes will be well developed to bring about the best benefits. Read our article about how to find the right theme on Shopify

This article About Shopify Slate Toolkit and Everything you need to know is highly recommended for merchants on Shopify. This feature will improve both your themes and workflow, which ensures a high-quality interface for users.

Now let’s get started!

About Shopify Slate toolkit

What is Shopify slate toolkit?

What is Shopify slate toolkit

Shopify Slate toolkit is a perfect command line tool for promoting Shopify Themes. It aims to offer a tested workflow and opinionated development toolkit, and also utilize high configuration to speed up the process of developing and testing themes to your store.

Features of Shopify Slate

  • Manage dependency through Wepack

  • Get assistance from ES6+ through Babel

  • Have local development asset server

  • Compiling local SASS

  • Create starter Themes

  • Deploy environment

  • Get a secure watch and deploy

  • Minimise asset

  • Configure via slate.config.js

What is included in Shopify Slate toolkit?

With no regard to theme’s design and performance, Shopify Slate provides tags, liquid logics and markups. Besides, it offers a code developer a simpler start.

Shopify’ s new Command Line Tool includes:

  • All the necessary required files, liquid templates and layouts.

  • Slate has a style page template which includes many elements such as type styles, paragraphs, headings, tables, lists, etc.

  • Shopify Slate owns a lot of sections which are crucial for themes’ design to improve workflow. There are three dynamic sections in Slate for end users to make changes to the content of the page.

  • There are also many beautiful style icons that can be used in Shopify Themes, for example payment icons, social icons, and general icons.

  • Tables and frames can be styled in Slate.

  • Slate includes numerous helper scripts to fasten the coding process, such as a11y.js, currency.js, rte.js, util.js, variants.js, etc. These scripts will decrease prospects of theme building like accessibility and section building.

  • If store owners would like to present desired languages to their shoppers, they just have to add translated .json files into local directory. Several translations such as English, Canadian, French, Spanish, German and Portuguese are currently available on Slate.

The reason why you should use Shopify Slate toolkit

  • To simplify the development process.

  • To avoid wasting time on eliminating classes and abundant markups.

  • To offer an easy start in the process of Shopify theme development regardless of theme design and performance.

  • To share the own workflow of Shopify in creating a theme.

How to use Shopify Slate toolkit?

How to use Shopify Slate toolkit

Installing Shopify Slate

It’s super easy to install Shopify Slate. Make sure that you have already had Node.js in your device. Then it goes to the running code process. Enter the following code to install Shopify Slate in the command line:

npm install -g @Shopify/slate

Using Shopify Slate

When the Slate is installed, you just allow it knows on what theme structure you want to work. Apply the following code:

Slate theme [name]

It means that you are allowing Slate to know on what structure you would like to build your Shopify Theme. A Scaffold theme will be created for you based on which you can begin the theme building.

Updating Shopify Slate to the latest version

If you would like to update @shopify/slate-tools, you should use either yarn upgrade or npm install:

yarn upgrade --latest @shopify/slate-tools

or

npm install @shopify/slate-tools@latest

This command will update both the version of @shopify/slate-tools in the package.json file and the dependency of the node_modules folder.

Latest information: Shopify Slate-the official end of support

Shopify has given Slate the official end of support after considering its present state.

Why?

Slate does not have the same vision with Shopify for themes moving forward, and it does not answer two large questions of theme builders:

  • Local development of a Shopify theme

  • Assistance for code versioning process with themes.

Being a theme developer using Slate, what can I do now?

Slate was designed upon Theme Kit to configure a Shopify theme build. Shopify will keep holding and aiding the development of Theme Kit via the open-space community.

Although Shopify will not be holding Slate anymore, you can still fork the repo to meet your needs.

Summary

Everything you should know about Shopify Slate Toolkit has been covered in this above writing. Hope that you find some information helpful and useful to run your store more successfully in the future. If you still find something unclear or too complicated, please leave your questions in the comment box.

Thank you for reading. Have a nice day!


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.