-
Notifications
You must be signed in to change notification settings - Fork 365
Slate themes
Slate themes follow a predetermined file structure. Several of the files listed are optional and can be omitted from your project. However, Starter Theme, the default starting point when generating a new theme with Slate, will include all files.
A Slate project consists of the following file structure:
├── .babelrc [1]
├── .env [2]
├── .eslintrc [3]
├── .gitignore
├── .stylelintrc [4]
├── package.json [5]
├── slate.config.js [6]
├── yarn.lock [7]
└── src
├── assets [8]
├── config [9]
├── layout [9]
├── locales [9]
├── scripts [10]
├── sections [9]
├── snippets [9]
├── styles [11]
└── templates [9]
.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 do not wish to take advantage of ES6+ transpilation for legacy browser support
.env
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. These environment files are ignored by default in .gitignore.
.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 do not wish to 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 do not wish to 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, author and description.
The package.json includes NPM/Yarn scripts for you to be able to use Slate Tools commands easily (e.g. yarn start).
slate.config.js
The Slate config file enables users to customize Slate to their specific needs. 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 works with NPM as well. Simply delete the yarn.lock file and run npm install to install the list of dependencies.
src/assets/
Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the assets directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify.
Files can be referenced in your theme by their file name, such as:
<img src="{{ my-image.jpg | asset_url }}" />You can organize your files within folders inside the assets directory, and still reference them by file name. For example, the following image would still be referenced the exact same as the example above:
└── assets
└── images
└── my-image.jpg
⚠ Slate flattens the folders found in the assets directory on build. If you decide to use folders inside your assets directory, avoid duplicate file names because only one file with that file name can exist when the Slate theme is built. The example below shows two images with the same name my-image.jpg resulting in only one of the images being included in the compiled theme
└── src
└── assets
├── image-collection-a
│ └── my-image.jpg
└── image-collection-b
└── my-image.jpg
Compiles to:
└── dist
└── assets
└── my-image.jpg
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.
src/scripts
This folder constains all your JS modules. See the Template and Layout Bundles page for more details on the contents of src/scripts.
You can use ES6/ES2015's standard, which 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/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. For example:
import '../styles/theme.scss';Liquid variables are accessible in .css, .scss, and .sass files via CSS custom properties that are declared in the layout/theme.liquid. For more information, visit the Slate docs.