What are Templates?
- Template overview
- Changing the Template
- Example Template structure - HTML
- Example Template structure - CSS
- Template Override Areas
- Template Widgets
- Template CSS
Template Overview
Templates are the backbone structure (skeleton) of a Theme. A template is the full HTML document and pulls the pieces together to make your theme. All Templates used by Spark Pay online stores themes use HTML5 and CSS based layouts.
The Spark Pay online store Theme System allows unlimited templates but typically our themes will come with 5 preloaded templates.
- Left and Right Column Template
- Left Column Only Template
- Right Column Only Template
- Content Only Template
- Blank Template
Changing the Template
You can select a certain template to be the default for the theme. You can also have certain page types use an alternative template.
You can set the default template for the theme on the Global Theme Settings page.
If you want the default template to have 3 columns (left, right and main). Then on all product pages you don't want any side column navigation. You can set the default template to the Left and Right Column Template, and on the Product Details page set the Layout to use the Content Only Template.
You can change a certain Page Type's template by going to the Basic Settings for that page.
Simply click the desired template and save the settings page.
Remember that the template applies to this particular Layout. Therefore if you have separate layouts for a certain page type they can each be tied to a different template.
All the templates (except for the Blank template) include the Header, Left/Right Columns, Main Content Area, Footer and Head Tags.
The Blank template only includes the Main Content area and Head Tags.
To reference these areas in the template we use the merge codes:
The purpose of the Shared Section Merges is to create these sections once and used across all templates.
pulls the content of whatever page you are currently viewing. This happens whether it is a content page, product page, category page, homepage, etc.
Templates also define things such as the DOCTYPE, html tag, head and body sections.
All our new themes will be using the html5 doctype by default.This can be changed if you like.
Each template has a class specified on the body tag. This allows the template layouts to be controlled via the same stylesheet (style.css)
Example Template Structure - HTML
A very basic Left Column only template looks like this:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/Shared/Themes/Blank/Templates/LeftColumnOnly.css" type="text/css">
</head>
<body class="LeftColumn">
<div class="Layout">
<header class="LayoutTop">
<ac:widgetarea id="HeaderWidgets"></ac:widgetarea>
<ac:templateoverridearea id="HeaderAddonArea"></ac:templateoverridearea>
</header>
<section class="LayoutMiddle">
<aside class="LayoutLeftColumn">
</aside>
<section class="LayoutContent">
</section>
<div style="clear:both"></div>
</section>
<footer class="LayoutBottom">
<ac:widgetarea id="FooterWidgets"></ac:widgetarea>
</footer>
</div>
</body>
</html>
Example Template Structure - CSS
The CSS to make this template work is fairly simple:
.Layout {width:1000px; margin:0 auto;}
.LeftColumn .LayoutLeftColumn {width:200px;float:left;}
.LeftColumn .LayoutContent {margin-left:200px;}
.Layout - This is the wrapper element of the page. This controls the overall width of the content and contains all the other layout elements.
.LayoutTop - This is the class for the Header section.
.LayoutMiddle - This is a wrapper around the middle section of the page. This includes Left Column, Page Content, and Right Column
.LayoutLeftColumn - This is the class for the Left Column section
.LayoutContent - This is the class for the main content area where the page's content will display.
.LayoutRightColumn - This is the class for the Right Column section
.LayoutBottom - This is the class for the Footer section.
Template Override Areas
A template override area is a special Spark Pay online stores tag that looks like this in the template:
<ac:templateoverridearea id="HeaderAddonArea"></ac:templateoverridearea>
This is used so that on a specific page content can be added outside of the main content area.
A common use case for this is for the homepage to put a full width graphic or rotator at the bottom of the Header section.
To take advantage of the template override area, put an identical tag onto the page layout that you want the content to be on.
<ac:templateoverridearea id="HeaderAddonArea">
My Special Content (outside of the main content!)
</ac:templateoverridearea>
<ac:pagelayout id="HomePage">
Home Page Content
</ac:pagelayout>
Other use cases for this are:
- Putting widgets in the left or right column for a product or category page
- Having a completely different left or right column on a certain page type.
- Putting rich SEO text in the header of the homepage or Product pages.
- Putting unique content in the footer on certain pages.
Template override areas must be placed outside of the <ac:pagelayout></ac:pagelayout> tag on a page.
They support directly inputted HTML or <ac:widgetarea></ac:widgetarea> tags where widgets can be inserted.
Template Widgets
By Default, Templates include <ac:widgetarea></ac:widgetarea> tags in the Header and Footer. This allows widgets to apply only to specific templates.
Template CSS
Templates by default include a static reference to a template CSS stylesheet. By Default, these stylesheets are not used as all the CSS consolidates into the style.css stylesheet.
However these stylesheets are still included and can be edited via the CSS editor for the template or in the /templates/ directory in your theme.
The CSS file for the template is given the same name as the template's HTML file and is stored in the same folder.
So if your template's html file is LeftAndRightColumns.html, the template css file will be named LeftAndRightColumns.css and will be stored in the same directory.