The Spiffy Theme Guide

Spiffy Stores use a templating system that incorporates special "liquid" tags that make the dynamic content appear in the templates. All templates use standard HTML and CSS for the layout, and can be opened in any program designed for editing or creating web pages.

A "Theme" is simply all of these HTML and CSS templates along with their images all zipped up in a zip file. All of the theme files can also be edited in the "Design & assets -> Theme Editor" section of your store's Toolbox, or you can also use your favourite editor and connect using WebDAV to edit your theme.

To create your own theme, it's a LOT easier to choose a theme from the theme gallery that's closest to the design you want to achieve, apply it to your site, then download it.

Themes are made up of the following templates:

• "Theme.liquid" template file that controls the layout & look of your entire site.
• "Index.liquid" template controls the look and content on your home page
• "Collection.liquid" template controls the layout of your collection pages
• "List-collections.liquid" controls the layout of the page that lists all the collections in the store
• "Blog.liquid" controls the layout of your blog pages
• "Article.liquid" controls the layout of blog articles
• "Cart.liquid" controls the look of your shopping cart page
• "Product.liquid" controls the layout of your product pages
• "Search.liquid" controls the layout of search results
• "404.liquid" controls the layout of the page that is displayed when a page cannot be found
• "Page.liquid" controls the layout of all "pages" that aren't controlled by other templates

Alternative Templates

For the Product, Collection, Blog, Article and Page templates, it's possible to create an alternative template that can be used to present your data in a different manner.

An alternative template uses adds a view name into the standard file name for the template. For example, to add the view grid to a collection.liquid template, use the following file name.

collection.grid.liquid

Similarly, the view name long could be added to a product.liquid template, resulting in the following template name.

product.long.liquid

Any alternative templates are in addition to the standard templates, and they do not replace the standard template.