How to Create Your Own Slate Starter Theme

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.

Slate v1 is currently in beta and still a work in progress. Expect there to be changes to functionality and documentation as new features are introduced and bugs are addressed. We believe that giving the theme development community early access to the latest version of Slate will help us best address the community’s actual needs. You can contribute to making the final release of Slate v1 even better by opening an issue for any problems you encounter.

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:

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 sections that are required in order to submit a theme to the Shopify Theme Store
shopify starter theme: boilerplate
Shopify Starter Theme features boilerplate templates with helper snippets to speed up your development process.

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!

shopify starter theme: build
Source: Sarah Pflug on Burst

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.

Have you worked with starter themes? Share your experience in the comments below!

About the Author

Thomas is a front end developer on Shopify's Themes Team. Also known as "Toma", he enjoys photography, learning Korean, and looking for hidden coffee shops.

Topics:

Grow your business with the Shopify Partner Program

Learn more