How to Create Your Own Slate Starter Theme

Two weeks ago at Unite 2018, we announced the newest release of Slate, Shopify’s open-source toolkit to help improve the theme developer experience. For those who haven’t heard of Slate, it’s a command line tool for developing Shopify Themes, created by the Shopify Themes Team. It is designed to assist your development workflow and speed up developing, testing, and deploying themes to Shopify.

It’s common for developers to reference Shopify’s free themes when building their own projects. However, we understand that not everyone has the same taste in libraries and solutions as the Shopify Themes Team. For cases like this, Slate lets you specify your own starter theme.

Introduced in Slate v1, starter themes are structured to be used as a starting point whenever creating a new Slate project. With our sophisticated development toolkit, Slate Tools, you’ll benefit with fast local development, testing, and theme deployment to Shopify.

Starter themes can help you craft a solution unique to your needs. Below, we look at the steps to creating one.

1. Getting started

The easiest way to create your very own starter theme is by customizing an existing one. You can find a list of community made starter themes in the Slate wiki, or you can use one of Shopify’s starter themes:

• @shopify/starter-theme
• @shopify/skeleton-theme

Each of Shopify’s starter themes has its own strengths. Below, we break down those strengths, so you can decide which is best for you.

Shopify Starter Theme

The @shopify/starter-theme can help you build a theme using best practices and solutions the Shopify Themes Team established. We apply these solutions to any new theme project we start.

Shopify Starter Theme comes with a range of useful features, including:

• Templates with minimal structure
• CSS predefined styles and helper classes
• UI interaction with our theme scripts
• Internationalization-ready for multiple languages
• Responsive images that are performant and optimized for any device
• Social meta tags ready to boost your search engine rankings
• Standard Shopify sections that are required in order to submit a theme to the Shopify Theme Store

Shopify Skeleton Theme

While the Shopify Starter Theme has loads of features to make development easy, it may not be what you’re looking for. If you’re someone who likes to develop a theme from scratch, you might find our @shopify/skeleton-theme repository more helpful.

Skeleton Theme is a barebones theme that gives you the freedom to start a new Slate project with nothing in your way, and to customize it however you see fit.

You might also like: Level-Up Your Theme Development with the Next Release of Slate.

2. Create Slate Theme

Whichever starter theme you choose, you can use Create Slate Theme to generate a new Slate project:

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

Where shopify/starter-theme is the name of the repository you wish to start tweaking into your own custom starter theme.

3. Set up a repository

After creating your theme, you can create a repository using Git version control. The Shopify Themes Team works a lot with GitHub and we find it extremely convenient for addressing issues, creating releases, and collaborating with one another.

You might also like: How Web Fonts Can Enhance Your Client’s Custom Ecommerce Store.

4. Connect to your store and start developing

To preview any customizations you make to your starter theme, you need to connect to your store. Once you’ve completed this step, you can start developing!

Required files and folders

In order to successfully compile your theme with Slate and upload it to Shopify, you need to ensure the list of mandatory files and folders are in your theme. We encourage you to take a look at Shopify’s required files and folder to view the complete list of required files and folders.

Create a GitHub repository

After developing and testing your theme, you are ready to set up your project on GitHub and share it with everyone.

5. Start a new project with your new starter theme

Now that your project is hosted on GitHub, anyone can use it to start a Slate project. To do so, type the following into your terminal:

yarn create slate-theme my-new-theme-project tobi/custom-starter-theme

Where tobi/custom-starter-theme would reference as {username}/{repository}.

You might also like: Choosing Themes on Shopify and When to Build From Scratch.

6. Contributing to the community

Don’t forget to add your new starter theme to the list of community themes on the Starter Themes page of the Slate wiki!

Creating your own starter theme not only helps you personalize your theme and use our latest Slate Tools—it’s also a great way for you to contribute to our community and help establish theming best-practices.

Slate v1 exists because of the valuable feedback we received from our community, and we strive to improve every single day. We still have a lot of requests, suggestions, and improvements to make to Slate, so your feedback is really important to us. You can also provide feedback on our issues page.