A better @shopify/slate-sections-plugin

1. Prepends data.liquid at the begining of the outputted section file
2. Add support for variable section template names: (Based on the sections parent directory) [https://github.com/Shopify/slate/issues/1043]. (Fork)[https://github.com/justinmetros/slate/blob/jm/slate-sections-plugin/packages/slate-sections-plugin/index.js]
3. Adds schema.js files support to enable dynamic schemas creation with schema modules imports (i.e Implementing reusable schemas, todo: configurable section schemas on project start)
4. TODO: Ensure locales supports for schema.js

New recommended structure:

./sections/my-section
├── schema.js || schema.json
├── data.liquid ('Prepended to resulting my-section.liquid')
├── my-section.scss (Not included as {% stylesheet %})
├── my-section.js ('Not included as {% javascript %}')
└── my-section.liquid

@shopify/slate-sections-plugin

The plugin allows developers to create Shopify theme sections from a variety of files contained in a folder, and combines these files into a single Liquid section file for use on Shopify servers.

Getting Started

First install the plugin

npm install @shopify/slate-sections-plugin --save-dev

or

yarn add @shopify/slate-sections-plugin --dev

Then add it to your webpack config, an example below.

const SlateSectionsPlugin = require('@shopify/slate-sections-plugin');

const slateSectionsOptions = {
  from: '/absolute/path/to/sections/source',
  to: '/absolute/path/to/sections/output',
};

module.exports = {
  plugins: [new SlateSectionsPlugin({slateSectionsOptions})],
};

Options

| Option | Required? | Type | Default | Description | | ------------------- | --------- | ------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | from | Yes | String | undefined | The absolute path to the folder containing your sections, typically ./src/sections | | to | Yes | String | undefined | The absolute path to the folder where your sections will be outputted to, typically ./dist/sections | | genericTemplateName | No | String | 'template.liquid' | If you're using the 'Sections as Folders' structure, your template names by default need to be 'template.liquid'. You may change this value if you would like to. |

Sections as Liquid Files

You may structure your sections folder by creating separate Liquid files for each section:

./sections
├── blog-posts.liquid
├── collection-list.liquid
├── featured-collection.liquid
├── featured-product.liquid
├── footer.liquid
├── header.liquid
├── image-with-text.liquid
├── newsletter.liquid
├── product.liquid
└── rich-text.liquid

This structure simply tells the plugin to copy the Liquid files into the ./dist sections folder

Sections as Folders

You can separate a schema from your Liquid template by creating a folder for each section. This increases maintainability and provides syntax highlighting for your JSON schema objects.

In order to have separate schema files, you must create a folder for the section and within that folder create a template.liquid file which will take the same name as the directory it will live in. You may optionally create a schema.json file containing the section's settings, which will be appended to the Liquid template inside of {% schema %} tags.

Example

./sections/article-template
├── schema.json
└── template.liquid

This will create an article-template.liquid with the contents of the template.liquid file and with JSON wrapped in {% schema %} tags, which will be copied over to the ./dist sections folder.

Translations

This plugin uses the @shopify/slate-translations package which enables you to separate translations into individual locale files allowing for easier maintainability for your theme's merchant-facing translations.

To learn more about structuring your translation files for your section's schema, read the documentation.