How it works

Developer view

When the Selz Theme Kit development environment starts up, the working theme directory is scanned for Liquid templates in the templates, blocks and snippets folders to initialise the file browser. Selecting a file from the browser will render out its template and preview it in the right-hand side of the view.

Any changes made to the theme template markup, styling, JavaScript and other assets are immediately reprocessed and hot-reloaded into the view.

Stylesheet compilation

Selz themes support LESS language extensions for CSS styling.

In order to compile styles that feature Liquid syntax (*.less.liquid), Selz Theme Kit first resolves the Liquid and creates a less subdirectory under a .stk directory. These styles are then bundled later in the build process for injection into the development environment root.

Stylesheets should always be stored in the /assets subdirectory of a theme and include a _store.less.liquid, which acts as the main import file for all less stylesheets. For more information about Selz theme development in general, a great place to start is the Theme Basics.

Data mocking

Selz Theme Kit's data mocking utilities are designed to help simulate real-world data as it would appear in a Selz store, ensuring that theme development remains 'content-first'. Although design mockups typically illustrate a particular layout, there is no substitute for being able to easily replicate a range of store data configurations in both a modular and reproducible manner across themes, which helps emulate how templates will behave in a live context.

Selz Theme Kit offers an internal sample configuration for creating representative store data to hydrate the views, but the developer is also free to supply their own sample data. In the absence of optional custom configuration files during generation of the mock data, data will instead be generated using Selz Theme Kit's defaults, which aim to offer a sensible approximation to the type and range of data used in a typical store.

When the mock generator is run, it first creates individual files for different store data components (.stk/mocks/) before merging these into mock.json. Once a store data mock has been generated, it will be stored as .stk/data/data.json. This data file is essentially a combination of store data (items, categories, etc... - .stk/data/mock.json) and the theme settings data (found in /settings/settings.json - .stk/data/settings.json). The Themes Liquid Cheatsheet provides a summary of data created, and is otherwise a good reference for the drops available for outputting data in store page templates.

Furthermore, Selz Theme Kit allows the developer to programmatically emulate the Store Builder's block system whereby arbitrary combinations of blocks can be injected into template editable regions.

For more details and examples, please see the data mocking section of the Configuration Reference.

Asset building and provisioning

Selz Theme Kit makes all assets under the /assets theme folder available for use in theme files, and performs some additional building and provisioning for other assets, mimicking hosted theme behaviour.

Styles

In addition to the process described in Stylesheet compilation CSS assets are compiled, bundled and minified as styles.min.css via the build process, which also creates sourcemaps for debugging purposes.

JavaScript

Theme JavaScript assets are build and bundled directly from a /assets/*.js.liquid file and made available as /assets/*.js.

Other assets

Selz Theme Kit makes other non-modifiable assets bundles, such as the purchase form ({{ purchase_form }}), contact form ({{ contact_form }}) and the menu cart ({{ mini_cart }}), available for inclusion into Liquid templates.

Live editing of block properties

When a Liquid template corresponding to a block from the blocks folder is being previewed, its properties can be tweaked via the right-hand side properties editor panel, with changes reflected immediately.