Theme Basics
Building a theme will require knowledge of HTML, CSS, JavaScript, and a solid understanding of the Liquid syntax including filters, variables, and tags.
- Variables are used to render dynamic content into a template
- Tags are the logic in your template code that is used to control what is displayed
- Filters are simple methods to format or manipulate output (e.g. capitalizing words, currency formatting)
Getting started
To create a new theme from scratch, you can use the Boilerplate theme. Head over to Installed Themes and click "Add theme". If you don't have a zip file containing a theme, we'll create a "Boilerplate" theme for you which is essentially the bare bones to get you started.
You will have some extra options in the menu for a custom theme:
- Download will allow you to download a zip file of your theme for backup purposes
- Edit HTML/CSS will open the theme in the theme editor
To view the theme while you're editing it, you can either Preview or Publish your new theme. You'll need to save any files you're working on to see the result in both modes.
Structure
Layouts
Layouts allow you to create a consistent look and behavior for all the pages (or group of pages) in a Selz store and are used by templates. Most themes will only need one but you can create multiple if you need to. Every theme must contain at least one layout, named theme.liquid.
Required Templates
Templates are used for specific areas or pages of a Selz store. By default, you need at least the following:| Name | URL | Description |
|---|---|---|
| index.liquid | / |
Homepage |
| categories.liquid | /categories |
Categories list |
| category.liquid | /categories/example |
Category |
| item.liquid | /item/544de674… |
A product page |
| search.liquid | /search |
Search results or empty search |
| 404.liquid | /missingpage |
Any 404 or other errors |
| blog.liquid | /blog |
List of blog articles |
| article.liquid | /search |
A blog article |
| tag.liquid | /tag/example |
A list of tagged articles |
Custom Templates
You can create custom templates that users can use to create custom pages. They will appear in the pages menu when a user creates a new page. We suggest at least the following:| Name | Description |
|---|---|
| contact.liquid | A contact us form |
| content.liquid | A generic content page that can be used for something like an "About us" page. |
Any custom pages created by users will use the URL format /pages/slug where 'slug' is decided by the user. These pages should have editable regions for users to add and edit content.
Check the Simple theme above for examples of these pages or click the template name to view them on GitHub.
Snippets
Snippets are modules that might be shared across multiple templates. Some examples might be:
- Navigation Menus
- Headers & Footers
- Social Links & Buttons
Assets
You can upload assets to be used within a theme such as LESS, SASS, web fonts, JavaScript and images. You can upload or create assets within the editor.
Related documentation: Theme JavaScript Theme LESS & SCSS
Settings
Currently, there is only one settings file, settings.json. This file is used to render a theme settings form for users of your theme, allowing them to customize your theme without any knowledge of HTML/CSS.
Related documentation: Theme Settings