How do Themes work?

Themes are HTML pages that can include logic to display dynamic information.

They tell Spiffy Stores what your online store should look like and what information should be shown to the customer. In other words, in contrast to making separate pages for every individual product in your web store, a template lets you make one page which displays product data dynamically.

A Spiffy Stores theme be fully customised through HTML, CSS and JavaScript. They are basically a collection of files divided over four subfolders.

One of those sub-folders, named "templates", holds all the files that make up each of the different page layouts that make up your store.

Another important folder is the "layout" folder, which contains the "theme.liquid" file, which is the main layout for your store.

Another sub-folder, named "assets" holds all of the CSS, JavaScript, image and font files used in your theme.

Note that all of your templates have an extension of ".liquid", but they are still just basically HTML files, so if you want to edit them in your favourite HTML editor, just rename them with a ".html" extension to edit them, and then change them back to ".liquid" before uploading your theme.

If you use Dreamweaver to build sites, here are some instructions showing you how to modify Dreamweaver to edit ".liquid" files natively.

Applying themes

When you change themes, all of the theme pages and styles for your current theme are overwritten.

If you’ve done a bit of customisation already, you may want to back them up first, just in case you want to go back to them later. To back up your theme, use the "Download your theme" link in the "Assets" section of the Toolbox to get a zip file of all your current theme’s assets.

Reverting your theme

If you've changed your theme and want to revert back, simply upload your saved zip file and presto!

Creating your own theme

The default themes not cutting it for ya? No problem. If you want to have a go at building a new theme for your store, you can Download one of our themes to get you started, or you can create your own theme from scratch using any popular website building application.

When you’re finished creating & testing your new theme, zip it up using winzip and upload it through the "Assets" section again.

Additional images and assets

If your custom theme requires some additional files, you can upload them to your own server or 3rd-party file host and link to them in your store using their full URL.