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 customise your theme without any knowledge of HTML/CSS.

Related documentation:
Theme Settings

Was this helpful?

8 3