Level-Up Your Theme Development with the Next Release of Slate

A little over a year ago we announced the first release of Slate; an open-source toolkit to help improve the theme developer experience. Slate was something brand new for us, and we were excited to see the overwhelmingly positive response from the Shopify theme community.

Since then, it’s been made clear that you want more!

The next release of our developer toolkit, Slate v1, is Shopify’s response to the theme community’s demand for modern tooling and a better developer experience. It’s been rebuilt from the ground up to facilitate tons of exciting, new features. Today, we’ll walk you through some of these features which will enable you to produce higher quality themes and be more productive.

Create Slate Theme

In a single command, Create Slate Theme bootstraps a new Slate project customized to your team’s needs. It replaces what was previously the ‘slate theme’ command, and adds a few new features.

Getting started with a new Slate project is as easy as typing the following command into your terminal:

yarn create slate-theme my-new-theme

By default, your new project is scaffolded using the Shopify Starter Theme; an opinionated boilerplate that reflects the Shopify Themes Team’s preferred starting point for a new project.

However, we understand that your team is not the Shopify Themes Team, and that your preferences might differ from ours. With Slate v1, you can start a new project with your own, custom starter theme.

Your custom Shopify Starter Theme can be loaded from either a folder on your local machine, or from a Github repository. To use it in a new project, you can add a reference to it as an additional argument to our previous command:

yarn create slate-theme my-new-theme shopify/skeleton-theme

This command will generate a new Slate project using Shopify Skeleton Theme; a barebones theme with the minimum content needed to work with Slate and the Shopify theme platform.

Custom starter themes allow you to start a new theme project with the content that best suits your team’s needs. And because starter themes can be hosted on Github, you’ll be able to share your unique solutions with the rest of the theme community. We’ve even created a special place in the Slate documentation where developers can post their starter themes, making them easily discoverable by others.

You might also like: How to Use Alternate Templates in Shopify Theme Development.

Shopify Starter Theme

Next, let’s take a closer look at the Shopify Starter Theme, the Shopify Themes Team’s opinionated starting point for a new Slate project.

The Shopify Starter Theme includes up-to-date best practices and code that the themes team uses for the majority of projects. Expect the starter theme to be updated with any new features released on the themes platform, modifications to what’s possible with Liquid, as well as any requirements for themes deploying to the Shopify Themes Store.

The Shopify Starter Theme is also a great way to learn about Slate themes, and how they’re structured. If you’re familiar with our previous default Slate theme, you may notice a few changes to the files in the root folder. These include:

• The new .env file replaces the old config.yml file used in previous versions of Slate. Similar to config.yml, its helps connect your local machine to Shopify servers and sync files with your store.
• The .eslintrc, .stylelintrc, and .babelrc files are used to configure ESLint, Stylelint, and Babel respectively. Slate now comes with these tools built in! 😱
• The slate.config.js file is Slate’s very own configuration file! Using this file, developers have granular control over their theme build configuration.
• The assets directory now separates different asset types into their own folders to help you stay organized. This includes styles and scripts, but also images, SVGs, and a place for static files you wish to be included in the dist/assets folder on build.

You may also notice we now have template and layout JavaScript files whose filenames mirror those of the Liquid template and layout files. The file structure is the result of another new feature in Slate v1; template and layout specific JavaScript bundles.

Template and layout specific JavaScript bundles allow you to control exactly what JavaScript gets loaded onto each page of your theme.

In the screenshot above, you can see that there is a JavaScript file unique to the product page template. When the Slate project is compiled, it detects that you have both product.liquid and product.js files, and then automatically inserts the following code into your theme:

{%- if template.name == 'product' -%}

<script type="text/javascript" src="{{ product.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

The end result is that when you load the product page, only the JavaScript that’s used on the product page is downloaded and executed. This reduces the amount of upfront bandwidth and computing power needed to load your page’s JavaScript, which can translate to big performance improvements, especially on mobile devices.

The example I provide above has been simplified—for a more detailed explanation of what’s going on, check out the Webpack’s new Split Chunks Plugin.

You might also like: A Beginner's Git Guide with Shopify.

Slate Tools

Slate Tools provides users with a sophisticated development toolkit to build top-notch Shopify themes. Slate v1 introduces a drastically improved theme development build pipeline that helps reduce coding errors and improve developer experience.

The first change you might notice is that Slate v1 commands are no longer available through a global CLI, and instead are exposed and used via NPM scripts. This provides developers with more flexibility to use Slate Tools in combination with another script.

Previewing changes while developing has become speedier thanks to a fancy new local asset server. This local server handles all non-Liquid assets, meaning these assets no longer need to be uploaded to Shopify’s servers to view changes.

How does this benefit developers? Super fast editing! Instead of waiting for files to upload to Shopify servers, we can now view the changes instantly from our localhost server. 

Another update that improves change speed is Slate’s new local SASS compilation, allowing developers to use the latest version of SASS installed on their local machine. Even cooler, you can include references to Liquid variables and still compile locally. This is a must for any theme that uses the Theme Editor to specify editable styles, like theme colors and fonts.

To include Liquid variables in our SASS, we harness the power of CSS Custom Properties. In our theme.liquid file, we declare our CSS custom properties and use Liquid to set their values:

<style>
 :root {
 --color-primary: {{ settings.color_accent }};
 --color-main-background: {{ settings.color_main_bg }};
 }
</style>

Then, we can reference our new CSS custom properties in our SASS:

body {
 color: var(--color-primary);
 background-color: var(--color-main-background);
}

The end result is valid SASS syntax, which can be compiled locally! However, a downside is that CSS custom properties don’t play well with SASS functions and mixins—but we’re hoping to improve that soon!

Help us make Slate even better

Slate v1 is available to the public on GitHub and currently is in beta. Ultimately, you the community, play a huge role in helping us choose what features we should focus on next for theme development.

Give Slate a try using Create Slate Theme, and help us make Slate even better by providing feedback on the official GitHub repository.

Together, we can make Shopify theme development easier to learn, quicker to code, and overall, a delightful experience.