Difference between revisions of "The Spiffy Theme Guide"

From Spiffy Stores Knowledge Base

m
Line 1: Line 1:
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 & CSS for the layout, and can be opened in any program designed for editing or creating web pages.
+
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 & 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 [[Using WebDAV to edit your theme|use your favourite editor and connect using WebDAV]] to edit your theme.
 
A "Theme" is simply all of these HTML & 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 [[Using WebDAV to edit your theme|use your favourite editor and connect using WebDAV]] to edit your theme.

Revision as of 12:06, 12 March 2016

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 & 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
  • "Blog.liquid" controls the layout of your blog pages
  • "Cart.liquid" controls the look of your shopping cart page
  • "Product.liquid" controls the layout of your product pages
  • "Page.liquid" controls the layout of all "pages" that aren't controlled by other templates