Interspire Shopping Cart Developer Documentation 

Template Customization Guide 
 

Table of Contents 
Introduction .................................................................................................1 
Template Directory Structure ........................................................................2 
Template File Types ......................................................................................3 
Layout Files..........................................................................................................................3 
Panels ..................................................................................................................................3 
Snippets...............................................................................................................................3 
Page Structure..............................................................................................4 
Template Variables .......................................................................................7 
Global Variables ...................................................................................................................7 
Language Variables..............................................................................................................7 
Panel References ................................................................................................................ 8 
Snippet References ............................................................................................................. 8 
File Includes ........................................................................................................................ 8 
Creating a New Template ..............................................................................9 
Maintaining a Modified Template................................................................. 10 
More Information and Resources.................................................................. 11 
(X)HTML, Design and Web Standards ................................................................................ 11 
Development Tools............................................................................................................ 11 
Additional Resources ......................................................................................................... 11 
Appendix 1: Layout Files and Panels............................................................. 12 
Appendix 2: Sample Layout Files.................................................................. 22 
1 Column Layout File......................................................................................................... 22 
2 Column (Left + Content) Layout File............................................................................... 22 
2 Column (Right + Content) Layout File..............................................................................23 
3 Column Layout File..........................................................................................................23 
Appendix 3: Store Wide Global Variables ...................................................... 24 
 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1 
 
Interspire Shopping Cart Template Customization Guide 

Introduction 
Interspire Shopping Cart contains a powerful template system that can be used to 
completely customize the look and feel of your store to your needs to integrate it 
with an existing website design. 

Interspire Shopping Cart templates are entirely HTML based and make use of 
extensive CSS to style page designs. Due to the flexible design of the HTML 
templates in Interspire Shopping Cart, it’s possible to create brand new store 
designs only through customization of the stylesheets and little HTML modification. 

This guide serves as an introduction in to the Interspire Shopping Cart template 
system. 

 
 
The custom designs by some of our customers are the best looking stores we’ve 
seen. 
Template Directory Structure 
Interspire Shopping Cart templates exist within the “templates” directory that exists 
within the Interspire Shopping Cart Folder. Each folder in this directory refers to a 
different template selectable from the “Store Design” page of the Interspire 
Shopping Cart Control Panel. (For example, the default store design exists within 
the templates/default directory) 

Templates have the ability to have multiple color schemes based off the one set of 
HTML and stylesheet files. 

Each template contains several files and folders. The structure of the contents of 
this folder is outlined below: 

• Backup 
Contains backup copies of all of the files for this template. The purpose of 
the backup copies is to allow users to revert to these backups after 
customizing one or more template files. 
• config.php 
A configuration file containing various settings for this template. An 
overview of this file can be found below. 
• images 
Contains the images for this template. 
o [color] 
A directory for each of the color schemes in this template should be 
created. Any color specific images for this template should be placed 
in this directory. 
• Panels 
Contains the panel HTML files used for this template. An overview of panels 
can be found below. 
• Snippets 
Contains the snippet HTML files used for this template. An overview of 
snippets can be found below. 
• Previews 
Contains the preview images for this template. 
o [color].jpg 
For each of the color schemes available in this template, a JPG image 
should be provided that contains a preview. 
• Styles 
o styles.css 
Contains the primary layout stylesheet for this template. 
o ie.css 
Contains any Internet Explorer stylesheet overrides for this template. 
o [color].css 
For each of the color schemes available in this template, a CSS file 
should be included with the name of the color scheme. This file 
should contain all color information for the template. 
• Several HTML files (also called layout templates) also exist within the base 
directory for each template. Their purpose is outlined below. 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  3 
 
Template File Types 
Layout Files 
Layout files are the files you see in the root directory of a page. Each layout file 
corresponds with a page that’s shown in Interspire Shopping Cart. For example, 
product.html refers to the page that’s shown when a customer is viewing the details 
of a product in your store. 

The majority of layout files contain nothing more than references to individual 
panels to be shown on a page. These panels are contained in <div> tags that 
generally define either left, center, or right columns of the page. 

Having references to panels in the files is the functionality that allows the drag and 
drop design mode feature to reorganize the contents of the pages. 

A list of template layout files and their purpose can be found in Appendix 1: Layout 
Files. For sample layout files for different column combinations can be found in 
Appendix 2: Sample Layout Files. 

Panels 
Panels generally indicate a block or section on the page. Each panel file builds one 
of the separate blocks shown on pages shown in Interspire Shopping Cart. For 
example, the SideCategoryList panel builds a list of categories to be shown 
throughout the store. 

As mentioned above, panels are generally referenced directly from the layout files – 
they define which content should be shown on a particular page and handle the 
generation of that specific content. 

Some panels contain strictly static content (such as the store name) whilst others 
need to dynamically generate content. These dynamically generated panels (such 
as the panel that builds the list of products in a category or the list of categories on 
the store) make use of panel logic files located in the /includes/display/ directory of 
Interspire Shopping Cart. A panel that requires dynamic content to be generated 
will have a PHP file in this directory with the same name of the panel HTML file. 

A list of the panel files and their purpose can be found in Appendix 1: Layout Files. 
The panel files in this list are broken down to the page they’re on (some panels are 
only available on certain pages) in the default store template. 

Snippets 
Snippets are templates containing HTML that can be used multiple times on one 
page either by being used in different parts of the template or being part of a loop 
that for example builds a list of products on the page (each product in the list being 
a repeated version of the same snippet) 

Snippets (found in the Snippets directory) are generally repeated inside dynamic 
panel files (outlined above). For example, HomeFeaturedProductsItem will refer to 
an individual product in the HomeFeaturedProducts panel. 
Page Structure 
As outlined above, there are three types of template files within Interspire Shopping 
Cart. These three types of files are what’s used to build the layout of a page in the 
store. 

The image below shows a break down of how layout files, panels and snippets work 
together to build a page: 

Layout 
File 

Panel  Panel  Panel 

Snippet  Snippet  Snippet  Snippet 

A breakdown of the home page of a default installation of Interspire Shopping Cart 
in to the layout file, panels and snippets would look similar to the following: 

 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  5 
 
 

In the image above: 

• The layout file is the entire page. The layout file contains all of the snippets 
and panels on a page once it’s all put together. 
• Panels are represented by the orange sections. The panels contain the 
snippets (for example, each product in the new products list) 
• Each individual snippet is represented by the green sections. 

The entire layout of a page can be broken down in to separate blocks. Try visualizing 
the home page of the store. You’ll notice there are clearly defined sections. 

At the most basic level these are the header, left column, content (center) column, 
right column and the footer. 
 

 
 
If you break the layout down even more, you’ll notice that each of these sections 
contain separate sections – so for example on the left menu, the category list, 
popular products and the newsletter. Each of these items is considered a block. 
 

 
These blocks are used to create a modular system for content to be easily moved 
between different portions of the layout and have it restyled to fit that section 
automatically (such as when a product list is on the left side bar, it does not contain 
any product images as opposed to when it’s in the center of the page and does 
contain product images) 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  7 
 

Template Variables 
Each of the layout, panel and snippet files in Interspire Shopping Cart uses variables 
(also called place holders) to show external content, or content fetch from the 
database (such as the name of a product) 

Template variables are enclosed within %% tags. There are various types of 
variables, each with their own purpose that’s outlined below. 

Global Variables 
Global variables are generally used to swap content from the database in to a 
specific template file. For example, the name and description of a product are set as 
global variables and then referenced in the template files.  

Global variables are referenced in template files as follows: 
  %%GLOBAL_[placeholder name]%% 
For example: 
  %%GLOBAL_ProductName%% 
The availability of specific variables differs on the template file that’s being edited 
(for example, the variable for the description of a product is available on the product 
details page, but not on the category view/product listing page).  

There are also global variables available throughout the entire store (such as the 
store name or store URL). An overview of these can be found in Appendix 1: Store 
Wide Global Variables. 

Language Variables 
Language variables display text that’s located within the language files in the 
/language/[name of the language in use of the store]/front_language.ini file. All text 
content used on Interspire Shopping Cart can be found within these files for the 
purpose of making the application translatable in to other languages. 

Language variables are referenced in the template files as follows: 
  %%LNG_[variable name]%% 
For example: 
  %%LNG_AddToCart%% 
This language variable would refer to a string in the front_language.ini file by the 
name of AddToCart. 

Language variables can also be edited using the design mode functionality of 
Interspire Shopping Cart. 
Panel References 
Panels (as outlined above) are the different blocks used by Interspire Shopping Cart 
to build a page. Panels are referenced both inside layout files and inside other panel 
files. 

Panels are referenced in templates as follows: 
  %%Panel.[panel name]%% 
Where [panel name] is the name of a file in the template’s Panels directory. For 
example: 
  %%Panel.HomeFeaturedProducts%% 
This panel reference will load in the content from the 
Panels/HomeFeaturedProducts.html panel file. 

Snippet References 
Snippets are templates containing HTML that can be used multiple times on one 
page either by being used in different parts of the template or being part of a loop 
that for example builds a list of products on the page (each product in the list being 
a repeated version of the same snippet) 

Snippets are referenced in templates as follows: 
%%SNIPPET_[snippet name]%% 
Where [snippet name] is the name of the snippet as referenced in the PHP code that 
generates it. In most cases, this will correspond with a similarly named file in the 
template’s Snippets directory. For example: 
%%SNIPPET_HomeFeaturedProducts%% 
This snippet reference will contain a repeated copy of 
Snippets/HomeFeaturedProductsItem.html, one for each featured product to be 
shown in the list. 

File Includes 
It’s also possible to include another file within a template. This can be accomplished 
using file include variables. This is extremely useful if external files such as banners, 
site‐network headers or other content need to be included. 

File includes can either be local (relative to the Interspire Shopping Cart base 
directory), contain absolute file system paths, or be remote includes by specifying 
the full URL to a file to be included. 

Includes are referenced in the template files as follows: 
  %%Include.[file path]%% 
For example: 
  %%Include.relative_file.html%% 
  %%Include./home/websites/absolute_file.html%% 
  %%Include.htp://www.example.com/remote_file.html%% 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  9 
 

Creating a New Template 
It’s a quick and easy process to start off creating a custom Interspire Shopping Cart 
template. There are a few methods that can be undertaken when creating a new 
template: 

• Basing the new template off an existing template and using the existing 
stylesheet as a base. This is particularly useful if minimal (and primarily 
stylesheet) modifications will be made to the template. 
• Copying the default template and entirely removing all stylesheets and 
images so you’re starting with a blank HTML canvas to work on. This method 
is useful if implementing an entirely new store design. 
• If it’s only stylesheet modifications to be made to a new template, it’s 
recommended you create a new color scheme for the existing template 
(begin with step 6 below) 

To create a new custom template: 

1. Begin by navigating to the store /templates directory. 
2. Copy the “default” folder and rename it to a more descriptive title for the 
template you’ll be creating. 
Important: Only the characters A‐Z, 0‐9 and underscores/hyphens should be 
used in template names. Spaces should not be used. 
3. Navigate in to the newly created template directory and open the 
config.php file in a text editor of your choice. 
4. Adjust the name of the template in the file and set the version number to 
1.0. 
5. Remove the following files/folders from the template: 
o Styles/blue.css 
o Previews/blue.jpg 
o Images/blue/ 
6. Create a new color scheme for the template. Create the following files: 
o Styles/[color name].css 
This file will hold all color information relating to the template. 
o Previews/[color name].jpg 
A preview image for this color scheme. 
o Images/[color name]/ 
A directory to hold all images that are color specific to this template. 
7. Login to the store control panel and from the “Store Design” page, select the 
newly created template/color scheme. 
8. Begin customization work. 
Maintaining a Modified Template 
Whenever a new version of Interspire Shopping Cart is released, custom templates 
may need to be updated to ensure new features are working correctly and existing 
features continue to work as expected. Template changes between different 
upgrades/releases of Interspire Shopping Cart should be expected. 

Before upgrading a live store to a newer version of Interspire Shopping Cart, it 
should be ensured that the customized template has been updated to work with 
the new version. For this reason, Interspire offers development keys allowing 
you to set up a custom development environment/store. 

For ease of maintenance between different versions of Interspire Shopping Cart, 
Interspire recommends that if possible, the majority of store design/template 
customizations be performed entirely with CSS. CSS is a powerful mechanism for 
applying presentational information to pages and all template files in Interspire 
Shopping Cart have been built from the ground up to allow limitless customization 
via CSS modifications. 

Each release of Interspire Shopping Cart includes a change log file (changelog.txt) 
that includes a list of new features/changes. This file also contains a list of modified 
template files (organized by template) for each version. Using the files listed in the 
change log, you can determine which files have changed between releases and 
update your template accordingly. 

There are a few recommended ways to modify and maintain a custom template: 

• Take note of template files modified and changes made as you make 
them. 
As a custom template is developed, if only a small amount of changes are to 
be made it may be worth keeping a separate document that contains a list of 
files that have been changed and what was changed in them. 
 
This means on newer releases, the custom template can be redeveloped off 
the new version of it and a simple list of instructions be followed to re‐apply 
any custom modifications. 
 
• Use a differences program such as WinMerge or BeyondCompare to 
merge changes. (Changes on Mac OS X) 
Using a differences program, the contents between the new version and 
customized versions of template files can be analyzed and in most cases 
merged across. 
 
• Keep modifications as CSS/stylesheet modifications as much as possible. 
Add custom CSS rules to the bottom of the existing stylesheets or create a 
new color scheme (which does not just contain color information – contains 
actual CSS overrides for the template) of an existing template. 
 
On a new release, the custom color scheme or additional CSS rules can 
simply be moved across to the new version of the template. 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1
1 
 

More Information and Resources 
(X)HTML, Design and Web Standards 
• W3 XHTML Working Group 
http://www.w3.org/MarkUp/ 
• W3Schools XHTML Tutorial 
http://www.w3schools.com/xhtml/ 
• Developing with Web Standards 
http://www.456bereastreet.com/lab/developing_with_web_standards/ 
• Web‐Developers Handbook 
http://www.alvit.de/handbook/ 
• SitePoint 
http://www.sitepoint.com/ 
• FiftyFourEleven – Web Development Resources 
http://www.fiftyfoureleven.com/resources/ 
• Smashing Magazine 
http://www.smashingmagazine.com/ 

Development Tools 
• EditPlus (Text Editor, Windows) 
http://www.editplus.com/ 
• TextMate (Text Editor, Mac OS X) 
http://www.macromates.com/ 
• Mozilla Firefox and the Firebug & Web Developer Toolbar Extensions 
Addons for Mozilla Firefox provide powerful tools for web developers to 
explore the DOM for generated web pages. 
Mozilla Firefox ‐ http://www.mozilla.com/ 
Firebug ‐ http://www.getfirebug.com/ 
Web Developer Toolbar ‐ http://www.chrispederick.com/work/web‐
developer/ 

Additional Resources 
• Interspire Community Forums 
http://www.interspire.com/forum/ 
• Interspire Shopping Cart Custom Design Service 
http://www.interspire.com/shoppingcart/custom_design.php 
Appendix 1: Layout Files and Panels 
A list of current layout files in the Interspire Shopping Cart 3.5 release, and when 
they’re used is outlined below. For each of the layout files, the default panels (those 
that show content) are also listed. 

• General Panels 
Panels used throughout entire parts of the store and available for use on any 
page. 
o HTMLHead 
Content shown between the <head> tags of each page. This includes 
code for visitor tracking, RSS feeds etc. 
o Header 
The header for each page in the store (includes the TopMenu, 
HeaderSearch panels) 
o Footer 
The footer for each page in the store. 
o SideCategoryList 
A list of categories shown in the store to the configured category 
depth in the control panel. 
o SideNewProducts 
A list of products recently added to the store. 
o SideNewsletterBox 
The newsletter subscription form. 
o SideShopByBrand 
A list of popular brands (based on the number of products in each 
brand) on the store. 
o SideProductRecentlyViewed 
A list of the products recently viewed by the customer on the store. 
o SideTopSellers 
A list of top selling products (based purely on the number of times 
the product has been sold) on the store. 
o SidePopularProducts 
A list of popular products (by average rating) on the store. 
o SideLiveChatServices 
Any live chat service code that’s been integrated in to the store. 
o SideCurrencySelector 
The store currency selection box containing the list of configured 
currencies on the store. 
o SideCartContents 
A list of items in currently in the customers cart. 
o TopMenu 
The top navigational menu (Home, My Account, Sign in or create 
account etc) 
o PagesMenu 
A list of parent level pages configured on the store. 
o HeaderSearch 
The search box included at the top of each page of the store. 
• 403.html 
Shown when a customer does not have the permissions necessary to view a 
particular category, product or web page. 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1
3 
 
• 404.html 
Shown when a customer accesses an invalid URL (such as an old removed 
product) or there is a typo in the URL they’re viewing. 
• account.html 
The “My Account” welcome page with an explanation on each of the 
sections available for the customer. 
o SideAccountMenu 
The list of links/options available in the “My Account” section of the 
store. 
o SideAccountStoreCredit 
If the customer has any store credit, the amount of store credit their 
account contains. 
• account_addressbook.html 
A list of shipping addresses (found under the My Account > Address Book 
menu) that the customer currently has as well as edit/remove links. 
o ChooseShippingAddress 
A list of shipping addresses for the customer to choose from. 
• account_downloaditem.html 
o AccountDownloadItemsBreadcrumb 
The breadcrumb navigation shown when downloading digital items 
from an order. 
o AccountDownloadItems 
The list of downloadable items in a digital order. 
• account_inbox.html 
The list of order messages the customer has associated with any of their past 
orders and the “new order message” form for submitting a new order 
message. 
o AccountInbox 
A list of order messages in the customer’s account. Also includes the 
form to send a message relating to a past order placed on the store. 
• account_new_return.html 
The new return request/submission page. 
o AccountNewReturnBreadcrumb 
The breadcrumb navigation menu. 
o AccountNewReturnProducts 
A table of products in the particular order including choices to select 
the quantity of each item to return. 
o AccountNewReturnInfo 
Form for entering details about the new return request such as the 
reason, action and comments. 
• account_order.html 
Shown when a customer is viewing the details of a past order they’ve placed 
on the store. 
o AccountOrder 
The details of the order (billing and shipping address as well as the 
products purchased) 
o AccountOrderLinks 
Links shown on the right to submit a return request for this order or 
print a copy of the invoice for this order. 
• account_orders.html 
A list of previously completed orders placed on the store by the customer. 
o AccountOrders 
The list of previously placed orders on the store by the customer. 
• account_orderstatus.html 
A list of currently pending and completed orders placed on the store by the 
customer. 
o AccountOrderStatus 
The list of pending orders placed on the store by the customer. 
• account_recentitems.html 
A list of products recently viewed on the store by the customer. 
o AccountRecentItems 
The list of items that the customer has recently viewed on the store. 
• account_returns.html 
A list of previously submitted returns requests by the customer. 
o AccountReturns 
The list of submitted returns requests. 
• account_saved_return.html 
Shown after a customer successfully submits a new returns request on the 
store. 
• authorizenet.html 
The Authorize.net payment module form. This form is included on both the 
multi‐step and express checkout pages. 
• bottom.html 
The bottom portion of the store layout when Interspire Shopping Cart is 
integrated with Interspire Knowledge Manager. 
• brands.html 
A list of products in a particular brand, or if no brand is specified, a list of 
brands configured in the store. 
o BrandBreadcrumb 
The breadcrumb navigation menu. 
o BrandContent 
The contents of the brands page. Either the products in a particular 
brand or a list of brands in the store. 
o SideBrandTagCloud 
A tag cloud showing the popularity/density of brand names on the 
store. 
o SideShopByBrandFull 
A complete list of brand names on the store ordered alphabetically. 
• cart.html 
The “View Cart” page showing the contents of the current customers cart. 
o CartBreadcrumb 
The breadcrumb navigation menu. 
o CartHeader 
The header of the cart contents page with the title and the top 
“Proceed to Checkout” button. 
o CartErrorMessage 
If an error message is to be shown, the error message. 
o CartStatusMessage 
If an alternate status message is to be shown, the status message. 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1
5 
 
o CartFreeShipping 
A message explaining that the cart either qualifies for free shipping or 
$X more needs to be sent before free shipping is available. 
o CartContent 
The contents of the customers shopping cart and the bottom 
“Proceed to Checkout” button. 
o SideCouponCodeBox 
The coupon code entry box shown on the side of the cart page. 
o SideGiftCertificateCodeBox 
The gift certificate code entry box shown on the side of the cart page. 
• category.html 
A list of products or sub categories that exist within a particular category. 
o SideCategoryNewProducts 
A list of new products in the category currently being viewed. 
o CategoryBreadcrumb 
The breadcrumb navigation menu. 
o CategoryHeading 
The heading (category name) as well as the “sort” box for a particular 
category view. 
o CategoryPagingTop 
If any paging (to browse between the pages of products in a 
particular category) is shown, the list of paging links at the top of the 
page. 
o CategoryContent 
The list of products in the category being viewed on the store. 
o CategoryPagingBottom 
If any paging (to browse between the pages of products in a 
particular category) is shown, the list of paging links at the bottom of 
the page. 
o SideCategoryTopSellers 
The list of top selling products (based on the number sold) for a 
particular category. 
o SideCategoryPopularProducts 
List of the popular products (based on the ratings/reviews) for a 
particular category. 
o SideCategoryShopByPrice 
The price point options for browsing items between different price 
ranges in the current category. 
• ccmanual.html 
The credit card (manual) payment method credit card details form. 
• checkout.html 
The first page of the standard multi‐page checkout shown for guests asking 
them to either login, create an account or checkout as a guest. 
• checkout_address.html 
The billing/shipping address form shown as the second step of the checkout 
process. 
o ChooseShippingAddress 
If the customer is logged in, this panel is shown containing the list of 
shipping addresses in their address book. 
o CheckoutNewAddressForm 
If the customer is not logged in and checking out as a guest this panel 
is shown containing the fields to enter their billing/shipping address. 
• checkout_confirm.html 
The order confirmation page (last page of the multi‐page checkout) showing 
a summary of the order. 
o ConfirmOrder 
The order confirmation and payment method selection form. 
• checkout_express.html 
The express single‐page checkout. 
• checkout_payment.html 
The payment details collection form shown in the multi‐page checkout. This 
page will be shown if the selected payment method has an additional form 
(such as one for requesting credit card details) 
• checkout_shipper.html 
The shipping provider selection page shown for the multi‐page checkout. 
o ChooseShippingProvider 
A list of shipping providers allowing the customer to choose which 
shipping provider the order will be shipped by. 
• compare.html 
Shown when a customer chooses to compare one or more products with 
each other. 
o CompareBreadcrumb 
The breadcrumb navigation menu. 
o CompareContent 
The table showing the products being compared. 
• createaccount.html 
The account creation/signup form where customers can create an account 
on the store. 
o CreateAccountBreadcrumb 
The breadcrumb navigation menu. 
o CreateAccountForm 
A form containing the fields necessary to create a customer account 
on the store. 
• createaccount_thanks.html 
A thank you page shown after the customer has successfully registered an 
account on the store. 
• default.html 
The default index page of the store. 
o HomeFeaturedProducts 
A list of store‐wide featured products (products marked as featured 
in the control panel) 
o HomeNewProducts 
A list of store‐wide new products (based on the date they were added 
to the store) 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1
7 
 
o HomeRecentBlogs 
A list of recent blogs/news items posted on the store (based on the 
date they were posted) 
o HomeSaleProducts 
A list of products that are on sale (those that have a sale price 
configured that’s less than the normal price of the product) 
• editaccount.html 
Shown in the “My Account” section of the store when a customer chooses to 
edit their account. 
o EditAccountBreadcrumb 
The breadcrumb navigation menu. 
o EditAccountForm 
Form shown allowing the customer to change the details (email 
address, password, name etc) of their registered account. 
• error.html 
A generic page that can be shown whenever there is an error message on the 
store and no additional content on the page needs to be shown. 
• eselectplusdp.html 
The payment details collection form for the eSelect DirectPost payment 
module. 
• eway.html 
Shown when a customer chooses to pay via eWay when making a purchase 
on the store. 
• forgotpassword.html 
The page shown when a customer clicks the “Forgot your password?” link on 
the login page. Used to reset their account password. 
o ForgotPasswordBreadcrumb 
The breadcrumb navigation menu. 
o ForgotPasswordForm 
The form shown for the customer to enter their email address to have 
their password reset. 
• giftcertificates.html 
Shown when a customer clicks the “Gift Certificates” link on the top menu of 
the store. Displays how to purchase/use a gift certificate. 
o PurchaseGiftCertificate 
Displays the form used to make the purchase of a gift certificate from 
the store. 
• giftcertificates_balance.html 
Allows customers to check the remaining balance (and shows the remaining 
balance) of a gift certificate. 
o GiftCertificateBalanceRemaining 
Shown after a customer enters their gift certificate code and displays 
the remaining balance and expiry date. 
o CheckGiftCertificateBalance 
Displays the form asking for the gift certificate code to check the 
balance of. 
• giftcertificates_redeem.html 
The page shown containing instructions on how to redeem a gift certificate 
during the checkout process. 
 o RedeemGiftCertificate 
Displays instructions on how to redeem a gift certificate during the 
checkout process. 
• invoice_print.html 
A printable invoice for an order that a customer can print from the front end 
of the store. 
• login.html 
o LoginBreadcrumb 
The breadcrumb navigation menu. 
o LoginForm 
The “Create an Account” and “Sign in to Your Account” options 
shown on the login page. 
• message.html 
Shown when a page simply needs to show a particular message to the user. 
• news.html 
The page that shows an individual news item on the store. 
o NewsBreadcrumb 
The breadcrumb navigation menu. 
o NewsContent 
Used to display an individual news item on the news page. 
• newsletter_subscribe.html 
The thank you page shown after a visitor subscribes to the store newsletter. 
o NewsletterBreadcrumb 
The breadcrumb navigation menu. 
o NewsletterContent 
Shows a confirmation message after the customer has subscribed to 
the store newsletter. 
• order.html 
The “Thank you for your order” page shown after an order is successfully 
placed on the store. 
• page.html 
The layout file shown when viewing a web page created on the store. 
o PageBreadcrumb 
The breadcrumb navigation menu. 
o PageContent 
Displays the title and the content of the web page currently being 
viewed. 
o SideSubPageList 
A list of pages that exist under (sub‐pages) the page currently being 
viewed. Shown on the left column by default. 
• page_contact_form.html 
The form shown when a web page is configured as a “Contact Form” 
allowing users to submit a question/message to the store owner. 
• payflowpro.html 
The payment details (credit card entry) form shown when a customer 
chooses to pay via PayPal PayFlow Pro. 
• price.html 
Displays a list of products in a particular category between a specified price 
range. 
o SideCategoryShopByPrice 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  1
9 
 
o The price point options for browsing items between different price 
ranges in the current category. 
o PriceBreadcrumb 
The breadcrumb navigation menu. 
o PriceContent 
Displays the products in the current category in between the 
specified price range. 
• product.html 
o ProductBreadcrumb 
The breadcrumb navigation menu. 
o ProductDetails 
Contains the details (price, brand, shipping information, product 
image and product name) to be shown on the product view page. 
o ProductDescription 
Contains the description of the product currently being viewed. 
o ProductWarranty 
If the product has any warranty text/information set, it will be shown 
in this panel. 
o ProductOtherDetails 
Displays the custom fields configured for the product being shown. 
o ProductByCategory 
Shows a list of categories related to the product currently being 
viewed. 
o ProductReviews 
A list of product reviews for this particular product as well as the form 
for posting a new review for this product. 
o SideProductAddToCart 
The button to add this product to the customer’s cart. If the product 
has variations, the select boxes to choose the variation combination 
will also be shown. 
o SideProductAddToWishList 
The button to add this product to the customer’s wishlist. 
o SideProductRelated 
A list of products related to this product (either automatically fetched 
or manually configured) 
o SideProductAlsoBought 
Shows a list of products that customers have purchased who have 
also purchased the product being shown. 
• productimage.html 
The popup window used to display product images. 
o ProductImagePopup 
Shows an individual product image in the product image popup and 
the buttons to navigate between the product images. 
• search.html 
The page that either shows the form to search for products or product search 
results if a search is currently being performed. 
o SearchPageHeader 
The header containing the search form and breadcrumb navigation 
menu. 
o SearchPagingTop 
If showing search results that span more than one page, the page list 
shown at the top of the page. 
o SearchPage 
If a search is being performed, this panel will be shown containing 
any results matching the search terms. 
o SearchPagingBottom 
If showing search results that span more than one page, the page list 
shown at the bottom of the page. 
• search_tips.html 
The page that shows tips and tricks for using the product search. 
o SearchTips 
Displays a list of tips and tricks for using the product search. 
• shippingaddressform.html 
Shown when a customer wishes to edit a shipping/billing address in their 
address book from the “My Account” section. 
o AccountBreadcrumb 
The breadcrumb navigation menu. 
o ShippingAddressForm 
The form containing the fields for either editing or adding a 
shipping/billing address to the customer address book. 
• suggestive_cart.html 
Shown instead of the normal “View Cart” page when there are one or more 
product recommendations to be shown (shown immediately after a product 
is added to the cart) 
o SuggestiveCartBreadcrumb 
The breadcrumb navigation menu. 
o SuggestiveCartHeader 
The header for the cart suggestions page. 
o CartFreeShipping 
A message explaining that the cart either qualifies for free shipping or 
$X more needs to be sent before free shipping is available.  
o SuggestiveCartContent 
Displays recommended products after a product was added to the 
cart. This includes products that customers who purchased this 
product have also purchased, related products and popular products. 
o SideCartMiniCart 
A small condensed version of the customers cart showing which 
product they’ve just added and any other products also in their 
shopping cart. 
• top.html 
The top portion of the store layout when Interspire Shopping Cart is 
integrated with Interspire Knowledge Manager. 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  2
1 
 
• wishlist.html 
The page shown when any action related to wishlists (adding items, 
managing wishlists etc) is shown. 
o WishListItems 
Used when displaying the contents of a particular wishlist. 
o WishLists 
Shown whenever a list of wishlists the customer has is to be 
displayed. 
o WishListAddForm 
The form that allows creation of a wishlist. 
Appendix 2: Sample Layout Files 
1 Column Layout File 
The HTML to generate a 1 column (content column) page would be as follows: 
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
%%Panel.HTMLHead%% 
<body> 
  <div id="Container"> 
  %%Panel.Header%% 
  <div id="Wrapper"> 
    <div class="Content Widest" id="LayoutColumn1"> 
      [Content] 
    </div> 
  </div> 
  %%Panel.Footer%% 
</div> 
</body> 
</html> 

2 Column (Left + Content) Layout File 
The HTML to generate a 2 column page with a left side bar and a content column 
would be as follows: 
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
%%Panel.HTMLHead%% 
<body> 
  <div id="Container"> 
  %%Panel.Header%% 
  <div id="Wrapper"> 
      <div class="Left" id="LayoutColumn1"> 
        [Left Content] 
      </div> 
      <div class="Content Wide WideWithLeft" 
id="LayoutColumn2"> 
        [Content] 
      </div> 
    </div> 
  %%Panel.Footer%% 
</div> 
</body> 
</html> 
 INTERSPIRE SHOPPING CART – TEMPLATE CUSTOMIZATION GUIDE  2
3 
 
2 Column (Right + Content) Layout File 
The code to generate a 2 column page with a content column and a right side bar 
would be as follows: 
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
%%Panel.HTMLHead%% 
<body> 
  <div id="Container"> 
    %%Panel.Header%% 
  <div id="Wrapper"> 
      <div class="Content Wide" id="LayoutColumn1"> 
        [Content] 
      </div> 
    <div class="Right" id="LayoutColumn2"> 
        [Right Content] 
      </div> 
    </div> 
    %%Panel.Footer%% 
</div> 
</body> 
</html> 

3 Column Layout File 
The code to generate a 3 column page with both left and right side bars as well as a 
content column would be as follows: 
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
%%Panel.HTMLHead%% 
<body> 
  <div id="Container"> 
  %%Panel.Header%% 
  <div id="Wrapper"> 
      <div class="Left" id="LayoutColumn1"> 
        [Left Content] 
      </div> 
      <div class="Content Wide" id="LayoutColumn2"> 
        [Content] 
      </div> 
      <div class="Right" id="LayoutColumn3"> 
        [Right Content] 
      </div> 
    </div> 
    %%Panel.Footer%% 
</div> 
</body> 
</html> 
Appendix 3: Store Wide Global Variables 
• %%GLOBAL_StoreName%% ‐ The name of the store. 
• %%GLOBAL_ShopPath%% ‐ The full URL to the store without a trailing 
slash. If on an SSL based page, this will be the HTTPS version of the store 
path. 
• %%GLOBAL_AppPath%% ‐ The path to the store (full URL without the 
domain) including a trailing slash. 
• %%GLOBAL_ShopPathNormal%% ‐ The normal (non SSL) version of the 
store URL. 
• %%GLOBAL_ShopPathSSL%% ‐ The SSL version of the store URL. 
• %%GLOBAL_StoreAddress%% ‐ The address of the store (as configured on  
the store settings page) 
• %%GLOBAL_AdminEmail%% ‐ The email address of the store 
administrator. 
• %%GLOBAL_CurrentCustomerFirstName%% ‐ The first name of the 
currently logged in customer. For guests, this is set to “Guest”. 
• %%GLOBAL_CurrentCustomerLastName%% ‐ The last name of the 
currently logged in customer. 
• %%GLOBAL_CurrentCustomerEmail%% ‐ The email address of the 
currently logged in customer. 
• %%GLOBAL_SiteColor%% ‐ The current template’s active color scheme. 
• %%GLOBAL_template%% ‐ The current template name. 
• %%GLOBAL_StoreLogo%% ‐ The store logo (image or <h1> text logo) 
• %%GLOBAL_DownloadDirectory%% ‐ The name of the product downloads 
directory. 
• %%GLOBAL_ImageDirectory%% ‐ The name of the product images 
directory. 
• %%GLOBAL_ThousandsToken%% ‐ The thousands separator currently 
active on the store. 
• %%GLOBAL_DecimalToken%% ‐ The decimal token currently active on the 
store. 
• %%GLOBAL_DimensionsDecimalToken%% ‐ The dimensions (length & 
weight) decimal token. 
• %%GLOBAL_DimensionsThousandsToken%% ‐ The dimensions (length & 
width) thousands separator. 
• %%GLOBAL_CartItems%% ‐ A textual string representing the number of 
items in the cart (1 item, 2 items etc)