- 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)
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.
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.
Templates are used for specific areas or pages of a Selz store. By default, you need at least the following:
||A product page|
||Search results or empty search|
||Any 404 or other errors|
||List of blog articles|
||A blog article|
||A list of tagged articles|
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:
|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 are modules that might be shared across multiple templates. Some examples might be:
- Navigation Menus
- Headers & Footers
- Social Links & Buttons
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 customise your theme without any knowledge of HTML/CSS.