Custom templates allow you to change the look of your store to whatever you like! You can use HTML & CSS code to completely customise how your store looks, to make it fit in further with your server's aesthetics. Here's how it works:

Accessing the editor

Click Stores from the left sidebar, then select the store you'd like to edit. Now press Customise Webstore and finally click the Go to template editor button.
Alternatively, you can click here.

Selecting a template

When editing a template, in order to see it on your store you'll need to make sure it's selected to ensure your store is using it! To do this click Stores from the left sidebar, then select the store you'd like to edit. Now press Customise Webstore and finally select your template in the dropdown menu, then press save. Don't forget to refresh your store page after you do this!

Settings.json

You can define certain settings for your templates, for example in our Neon theme, you'll be able to define "flickering" to be "on" or "off". This will control the flickering of the logo across your store's website. You'll also find quick enabling / disabling of settings on the Customise Webstore page depending on the template you're using. You can add custom settings to this file.

The settings.json editor on the customise webstore page

An example settings.json file itself

When making your own template settings, you can define them as either Booleans (true/false) or Strings.

Updating favicons, social links & your server's URL

You can do this in the portal! Simply go to the Customise Webstore page for the store you'd like to edit and you'll see these options there. To get there click Stores from the left sidebar, then select the store you'd like to edit. Now press Customise Webstore

Creating a new template

Ready to delve into a new custom template? Brilliant! You can create a new template in the template editor, just fill out the template name and fill in a short description and hit the create button. If you'd like to view some example templates, read on!



Example template downloads

We all like an example don't we? We've provided 2 example templates, light theme and dark theme. Choose whichever mood you're feeling and go forth and edit away! Feel free to copy and paste the code into the editor and mess with it!

Additional template editor documentation

This guide specifically was created as a bit of an introduction and FAQ into the template editing system we have. Further technical documentation can be found below:

Understanding the folder tree

Understanding Nunjucks

Understanding TailwindCSS

Variables & Helper Functions
Was this article helpful?
Cancel
Thank you!