Custom Template Include Files

Custom template include files are an easy and convenient way to modularize your custom template code. You simply save a piece of code -- from one line to as much as you want -- as a separate file, then use an [-- INCLUDE filename --] tag where you want to place that code in your template. You can use include files for several purposes:

Create a section of code that you can include in several templates, such as a Cascading Style Sheet.
Put parts of a template in separate files to make it easier to work on, such as putting the subproduct and more info sections of a product template in separate files.
Save time when creating your own templates by using the built-in ShopSite include files, or modify them to suit your needs.

Example CSS Include File

This simple CSS style sheet could be saved as an include file, and then used in page templates, more info page templates, and shopping cart templates.

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}

/***********************/
/***  Hyperlinks     ***/
/***********************/
a:link { 
  color: #[-- STORE.SC_LinkColor --];
}
a:visited { 
  color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover { 
  color: #[-- STORE.SC_LinkColor --];
}
a:active { 
  color: #[-- STORE.SC_ActiveLinkColor --];
}
</style>

You could include the style sheet with an [-- INCLUDE filename --] tag. Because the code in the include file contains custom template tags, you must use the PROCESS attribute to have ShopSite parse those tags. Here is an example at the top of a custom page template:

[-- DEFINE PAGE --]
<html>
<head>
<title>[-- PAGE.Name Remove_HTML --]</title>

[-- INCLUDE stylesheet PROCESS --]

</head>

<body>
...
</body>
</html>
[-- END_DEFINE PAGE --]

Built-In ShopSite Include Files

ShopSite comes with many include files that are used by the templates for the built-in themes, such as the Tabbed Navigation theme. You can use these same include files in your own templates. You can use them as-is, or copy them and customize them to meet your needs. (You should copy any include file that you are considering using and study the code to make sure it will work for you.)

Include files can contain [-- INCLUDE --] tags for other include files. In other words, include files can be nested. Some of the built-in include files include other files, and they are listed under "Dependencies" in the table below.

Some of the include files assume that one or more variables are already defined before they are invoked by a template. These are indicated with "VAR" under "Dependencies" in the table below. If you want to use one of those include files, you can either define the variables in your template, or edit your copy of the include file and define the variables near the top of the file.

Return to the Custom Template Cookbook

Custom Template Include Files

Example CSS Include File

Built-In ShopSite Include Files

Check These Out

Top Template Tips

Update Your Templates