⚠️ Shopify Starter Theme and Slate v1.0 are currently an Alpha release, meaning you should expect breaking changes between updates and more bugs than a finalized release. We believe that by getting Slate in the hands of developer communtiy as soon as possible, we can gather critical feedback to make it an even bigger success. Slate v1.0 has not yet been tested on Windows.
The Starter Theme represents the Shopify Themes Team opinionated starting point for new a Slate theme project. It strives to include up-to-date best-practices and solutions that we have deemed needed for the majority of themes we build. It is a reflection of what’s possible when building a theme.
To get started with Shopify Starter Theme, run the following command in your terminal:
$ yarn create slate-theme my-new-theme
For more information on connecting your new project with a Shopify store, see the Slate docs.
Once Slate has created the scaffolding of your project, it will have the following structure:
├── .babelrc [1]
├── .env [2]
├── .eslintrc [3]
├── .gitignore
├── .stylelintrc [4]
├── package.json [5]
├── slate.config.js [6]
├── yarn.lock [7]
└── src
├── assets
│ ├── fonts
│ ├── images
│ ├── scripts [8]
│ └── styles [9]
│ └── svg [10]
│ └── vendors [11]
├── config [12]
├── layout [12]
├── locales [12]
├── sections [12]
├── snippets [12]
└── templates [12]
.babelrc (optional)
Starter Theme comes with Babel preconfigured with shopify/babel-preset-shopify. You can modify this config file based on your project requirements, or remove it completely if you wish to not take advantage of ES6+ transpilation for legacy browser support.
.env (optional)
Slate will use the environment variables declared in this file to connect to deploy files to your Shopify store. For more information, visit the @shopify/slate-env docs.
This file, along with any other .env.[environment] files, contain sensitive information and should not be commited to Github.
.eslintrc (optional)
Starter Theme comes with ESLint preconfigured with shopify/eslint-plugin-shopify. You can modify this config file based on your project requirements, or remove it completely if you wish to not have JavaScript linting in your project.
.stylelintrc (optional)
Starter Theme comes with Stylelint preconfigured with shopify/stylelint-config-shopify. You can modify this config file based on your project requirements, or remove it completely if you wish to not have style linting in your project.
package.json
A copy of the theme package.json will be included in your new project. It's a good idea to update its contents to match your new project, such as updating the name, version, repository, and description.
The package.json includes npm/yarn scripts for you to be able to use Slate's CLI easily from the terminal (e.g. yarn serve).
slate.config.js
The Slate Config file allows you to custimize Slate to the specific needs of your project. For more information, visit the @shopify/slate-config docs.
yarn.lock
The Shopify Themes Team uses Yarn while developing themes because of its speed. However, Starter Theme should work just fine with NPM -- just delete the yarn.lock file if you wish to do so.
src/assets/scripts
This folder will contain all your JS modules. An theme.js must be present, as it will act as the entry point for your JS application.
You can use ES6/ES2015's standard, which incidently allows you to require your modules with the import syntax:
import { contains } from 'lodash'
import Foo from './modules/foo'
// const Bar = require('./modules/bar') is also available if that's your jam!
src/assets/styles
Slate fully supports .css, .scss and .sass files and their syntax, including @import.
You must include your style index file at the top of your theme.js file for Webpack to be able to load your styles into its build process, as such:
import '../sass/index.scss';
Liquid variables are accesible in .css, .scss, and .sass files via CSS Custom Properties that are declared in the snippets/css-variables.liquid. For more information, visit the Slate Docs.
src/assets/svg
On build, Slate moves all SVGs in this folder to the snippets/ folder and renames them to .liquid files. To use an SVG in your theme, include it like any other snippet:
{% include 'icon-shopify' %}
src/assets/vendors
Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the vendors directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify. To reference them in your .liquid files, you'll want to ensure Webpack doesn't parse your liquid filters when referencing those files.
This special directory can be useful for files added by plugins you've installed, or for when you need to construct an image URL in Liquid.
src/config, src/layout/theme.liquid, src/locales, src/sections, src/snippets, src/templates/*.liquid
The aforementioned files and folders are required by Shopify for any given theme.
For help on setting up the repo locally, building, testing, and contributing please see CONTRIBUTING.md.
All developers who wish to contribute through code or issues, take a look at the Code of Conduct.
MIT, see LICENSE for details.
