Slate

Theme scaffold

Templates and configuration

All configuration files, layouts, and liquid templates required for Theme Store submissions are included. See the full guidelines for submission here.

config/
  - settings_data.json
  - settings_schema.json
layout/
  - gift_card
  - password
  - theme
templates/
  - 404
  - article
  - blog
  - cart
  - collection
  - gift_card
  - index
  - page.contact
  - page
  - password
  - product
  - search
  customers/
    - account
    - activate_account
    - addresses
    - login
    - order
    - register
    - reset_password

Also included is a Styles template (page.styles.liquid). This is available to help you visualize your site’s layout and styles with dummy content that is common across themes. This is only intended to be used during development. Remove this template before shipping your theme.

Sections

Sections are a way of letting merchants control their own layout and appearance in their themes. Read more about their introduction here and the full docs here. Slate includes two types of sections.

Static sections

Statically-included sections allow for in-context settings when that section is visible in the theme editor.

For example, the product section is included with {% section 'product' %} in templates/product.liquid. Any settings defined in the product section will be visible when a merchant visits the product page.

sections/
  - header
  - footer
  - product

Dynamic sections

Dynamic sections allow merchants to add, edit, and reorder content on their home page. It is highly recommended to read the sections development documentation to understand how limitless the possibilities are. Slate provides three common dynamic sections to act as a starting reference.

sections/
  - collection-list
  - featured-collection
  - featured-product

Sass helpers

Slate does not compile Sass to CSS. Slate uploads .scss files to your theme's /assets directory and compilation is done by Shopify. Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive.

Slate is not a CSS framework. Instead it sets you up to start styling your way quickly with a reset and some helper scaffolding. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the import statement in theme.scss to @import url('new-folder/style.scss').

styles/
  global/
  modules/
  settings
  tools/
  vendor/

Normalize and reset

A blank starting point is included with Normalize.css and other helper styles that Shopify’s internal themes team has consistently relied on.

  • Prevent zooming when inputs are focused on mobile (min 16px font size)
  • Prevent unexpected styles on focused elements
  • IE <select> and <option> style fixes
  • Improve text rendering on some WebKit form fields
  • Use touch-action: manipulation to enable fast tapping
  • Responsive tables and video iframes added by a rich text editor (by adding wrapping classes in JS)

Scaffolding

Starting a fresh project should not include reinventing the wheel. Slate offers some starting structure to your project that you can choose to use or not.

  • Map shop settings to Sass variables
  • CSS grid. Example
    • There are no grid classes in the templates so you can easily switch to your preferred grid
  • SVG icon style helpers. Example
  • Responsive tables. Example
  • .btn class with smart defaults. Source
  • Form elements with default, disabled, error, and focus states ready to be styled. Source
  • Blank state SVG styles Example

Sass mixins

A few helpful Sass mixins are included in Slate to make responsive, cross-browser, and accessibility development easier.

  • Media query mixin for consistent breakpoint styles. Example
  • Responsive helpers to show/hide content and align text based on breakpoint names. Example
  • Prefixes. Example
  • Visually hide or show content for screen reader accessibility. Example

JavaScript helpers

Slate provides a number of helper scripts and vendor scripts. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the require statement in theme.js to // =require new-folder/script.js.

scripts/
  sections/
  slate/
  templates/
  vendor/
More information about the require directive can be found in the NPM documentation for gulp-include.

Slate scripts

Slate provides helper scripts to promote accessibility and make working with theme images, currencies, and product variants easier. See JS examples for more details on how to use these scripts.

  • Accessibility helpers. Example. Source.
  • Force tables and videos to be responsive. Example
  • Easy handling of theme editor events. Example
  • Format currency in JS the same as Liquid allows. Example
  • Helpers for handling images in JS, including getting size based on URL and preloading sets of images. Examples
  • Listen for product variant option changes and setup scaffolding for handling result. Example
  • Detect browser support for cookies. Example

Vendor scripts

Slate projects include a vendor folder where theme developers are encouraged to place third-party libraries. Versions of jQuery and Modernizr are included in a new project, but you are welcome to change these as you see fit. Be sure to update the require statement in vendor.js as you add and remove libraries.

Translation keys

Slate ships with eight languages — English, French (Canadian), Spanish, German, Dutch, Danish, and two dialects of Portuguese (Brazilian and European). Translation keys for these languages can be found in the locales folder. In your theme files, translated strings can be retrieved with the Liquid translation filter t.

{{ 'products.product.add_to_cart' | t }}

You can learn more about using translation keys and strings in our theme development documentation.

These translation keys allow merchants to control their store’s language settings from the admin. Merchants can set the language of their storefront as well as change the value of individual translation keys. You can learn more about translating your storefront in our theme documentation .