Themes control how the website is built and are written in HTML, CSS, javascript and Liquid as templating language.
Changing theme
It is possible to have multiple themes at the same time, but only one can be published. Themes can be duplicated, exported, imported and deleted.
There are several premade themes that are customisable with theme settings and theme code. Checkout our github for themes and components.
Theme export
All themes can be exported from the Themes page in a zip-file.
Add themes
Themes can be added by upload or with an URL.
Theme structure
A theme consists of six folders: layout, templates, snippets, components, assets and config. All files ending with .liquid can contain code evaluated server-side.
Layouts
The layout folder will contain the main structure file for a website. Commonly two files are present here:
theme.liquid: default file when site is open.restricted.liquid: default file when the site is closed.
Using alternative layout
If a template has a specification {% layout 'alternative' %} for an alternative layout, in this case referring to a layout file named alternative.liquid.
Render witout layout
It is possible to render a template without the surrounding template.
{% layout 'none' %}
{{ product | json }}
Templates
The templates folder contains all the template files for the different context in the system and for a web site: index, page, blog, blogs list, article, 404 and search.
It is common to use several templates for the same type of object, for example themes usually contain a page.contact.liquid template that adds a contact form on the pages where the contact template is chosen.
For eCommerce the templates folder includes templates for
collections,productsas well as for customer accounts and checkout process.
Snippets
Snippets is a folder where code snippets can be stored. Snippets would be used for breaking out parts of the code for reoccurring parts or to make a main layout or template file easier to read.
A typical reoccurring code snippet would be a article card that would be used for a blog section both on the index page and on the blog page. Whereas breaking out code for the header and footer would give an example of what would be broken out for decreasing the complexity of the main layout file theme.liquid.
Components
The components folder holds the code for web components and is similar to snippets but intended to be rendered client side.
Assets
Assets is the place to add images, css- and js-files.
Config
Themes comes with theme settings, where options for the theme is built in. These options can handle colors settings, uploading of logos and other website content and the structure of the site.
In the config folder the theme settings configuration file will determine the options in the settings and the data inserted is stored here as well.
The file settings.json will render the theme settings view which is customisable.