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:

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.

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:

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.

Here is a list of the include files that are built-in to ShopSite:

Include File Description Dependencies VARs Set
Classic-MoreInfo.css Style sheet for Classic-MoreInfoPage template Product-MoreInfo.css none
Classic-MoreInfoPage Default More Info Page template MoreInfo-Head
Classic-MoreInfo.css
MoreInfo-Body
Product-AddToCartButton 		VAR.PageMargins
cr.css Style sheet for cr_default customer registration template none none
crFooter Common footer code used in many customer registration pages none none
crHeader Common header code used in many customer registration pages VAR.Title
cr.css 		none
MiniCart.js JavaScript scripts to produce the mini cart display on store pages VAR.Media
VAR.MiniCartColor 		none
MoreInfo-Body Common code for the tag for more info pages VAR.PageMargins VAR.MoreInfoPage
MoreInfo-Head Common code for the section of more info pages MiniCart.js (if Mini Cart is enabled) none
Page-2LineSearchForm Search form none none
Page-Body Common code for the tag in page templates= VAR.PageMargins none
Page-Head Common code for the section of page templates MiniCart.js (if Mini Cart is enabled) none
Page-Layout Converts merchant-selected alignment and borders to custom template VARs none VAR.align
VAR.border
Page-Link Common code to product page links, each one in a table cell. none VAR.link
Product-AddBeforeOptions Generates Add to Cart button (old version, replaced by Product-AddToCartButton) VAR.Form
VAR.Options
VAR.Quantity 		none
Product-AddToCartButton Generates Add to Cart button, including ordering options and quantity input box; must be used inside an HTML
none none
Product-Description Generates the product description none none
Product-Graphic Displays the product graphic, including table layout as necessary for image alignment VAR.TableLayout
VAR.Graphic
VAR.ImageAlign 		none
Product-GraphicAlign Converts product setting (text wrap, image alignment, graphic) to custom template VARSs none VAR.wrap
VAR.ImageAlign
VAR.Graphic
VAR.TableLayout
Product-GraphicRight Displays the product graphic, if image alignment=right VAR.TableLayout none
Product-MoreInfo Common code to produce the product information on a more info page Product-Sku
Product-Price
Product-AddToCartButton 		none
Product-MoreInfo.css Style sheet for product elements on a more info page; used by Classic-MoreInfo.css VAR.LinkColor
VAR.BackgroundColor 		none
Product-Name Common code to product the product name, including code for variable product name and hyperlink to more info page none none
Product-Price Common code to produce the product price, including code for sale pricing, alternate currency pricing, and variable pricing VAR.MoreInfoPage VAR.SaleOn
Product-Sku Common code to product the product SKU, including code for variable SKU none none
Product.css Style sheet for product information VAR.LinkColor
VAR.BackgroundColor 		none
Rounded-Colors Sets colors used by Rounded theme none VAR.BackgroundColor
VAR.TextColor
VAR.LinkColor
VAR.VisitedLinkColor
VAR.ActiveLinkColor
VAR.ulc
VAR.urc
VAR.llc
VAR.TopBarColor
VAR.SideBarColor
VAR.HoverColor
VAR.H1color
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.MiniCartColor
VAR.MiniCartTextColor
VAR.MiniCartHoverColor
Rounded-Images Sets images use for corners in Rounded theme (replaced by Rounded-Colors) none VAR.ulc
VAR.urc
VAR.llc
VAR.H1color
VAR.ViewCartColor
Rounded-MiniCart.css Style sheet for mini cart used in Rounded theme VAR.MiniCartTextColor
VAR.MiniCartHoverColor 		none
Rounded-MoreInfo.css Style sheet used for more info pages in the Rounded theme Product-MoreInfo.css
Rounded-MiniCart.css
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.ActiveLinkColor
VAR.H1color
VAR.AddButtonGraphic
VAR.LinkColor
VAR.HoverColor		 none
Rounded-MoreInfoPage Template for more info pages in the Rounded theme MoreInfo-Head
Rounded-MoreInfo.css
MoreInfo-Body
VAR.PageWidth
VAR.Media
VAR.PageGraphic
VAR.ulc
VAR.urc
VAR.llc
VAR.TopBarColor
VAR.SideBarColor 		VAR.PageMargins
VAR.MoreInfoPage
Rounded.css Style sheet for Rounded theme VAR.TextColor
VAR.BackgroundColor
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.ActiveLinkColor
VAR.LinkColor
VAR.VisitedLinkColor
VAR.HoverColor
VAR.H1color 		none
sc_cart.css Style sheet for the Shopping Cart Page in shopping cart template none none
sc_shipping.css Style sheet for the Shipping Page in shopping cart template none none
sc_thankyou.css Style sheet for the Confirmation and Thank You Page in shopping cart template none none
sc_thankyouemail.css Style sheet for the E-Mail Receipt in shopping cart template none none
Sidebar-Colors Sets colors used by Sidebar theme none
VAR.BackgroundColor
VAR.TextColor
VAR.LinkColor
VAR.VisitedLinkColor
VAR.ActiveLinkColor
VAR.SidebarColor
VAR.AccentColor1
VAR.AccentColor2
VAR.HoverColor
VAR.H1color
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.MiniCartColor
VAR.MiniCartTextColor
VAR.MiniCartHoverColor
Sidebar-MiniCart.css Style sheet for Mini Cart display in Sidebar theme VAR.MiniCartTextColor
VAR.MiniCartHoverColor		 none
Sidebar-MoreInfo.css Style sheet for more info pages in Sidebar theme Product-MoreInfo.css
Sidebar-MiniCart.css
VAR.TextColor
VAR.LinkColor
VAR.VisitedLinkColor
VAR.HoverColor
ActiveLinkColor
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.ActiveLinkColor
VAR.AddButtonGraphic 		none
Sidebar-MoreInfoPage More info page template used in the Sidebar theme MoreInfo-Head
Sidebar-MoreInfo.css
MoreInfo-Body
VAR.PageWidth
VAR.AccentColor1
VAR.Media
VAR.SidebarColor
VAR.AccentColor2
VAR.PageGraphic
VAR.SearchProductField
Page-2LineSearchForm 		VAR.MiniCartColor
VAR.PageMargins
Sidebar.css Style sheet for Sidebar theme VAR.TextColor
VAR.BackgroundColor
Sidebar-MiniCart.css
VAR.SidebarColor
VAR.PageLinkColor
VAR.PageLinkHoverColor
VAR.ActiveLinkColor
Product.css
VAR.LinkColor
VAR.VisitedLinkColor
VAR.HoverColor
VAR.ActiveLinkColor
VAR.AddButtonGraphic 		none
StainedGlass-MiniCart.css Style sheet for Mini Cart display in Stained Glass theme VAR.VisitedLinkColor
VAR.LinkColor		 none
StainedGlass-MoreInfo.css Style sheet for More Info pages in the Stained Glass theme Product-MoreInfo.css
StainedGlass-MiniCart.css
VAR.Media 		none
StainedGlass-MoreInfoPage Template for More Info pages in the Stained Glass theme MoreInfo-Head
StainedGlass-MoreInfo.css
MoreInfo-Body
Product-MoreInfo
VAR.Media 		VAR.PageMargins
StainedGlass.css Style sheet for Stained Glass theme StainedGlass-MiniCart.css
Product.css
VAR.LinkColor
VAR.VisitedLinkColor
VAR.ActiveLinkColor
VAR.Media 		none
Subproduct-AddToCartButton Code to produce Add to Cart button for subproducts VAR.MoreInfoTemplate none
Subproduct-Name Code to produce subproduct names none none
Subproduct-Price Code to produce subproduct prices, including sale prices and alternate currencies none none
TableOfAddresses.css Style sheet for billing and shipping addresses used in shopping cart template none none
TableOfComments.css Style sheet for customer comments box used in shopping cart template none none
TableOfErrorMessages.css Style sheet for error messages in shopping cart template none none
TableOfPayment.css Style sheet for payment information in shopping cart template none none
TableOfProducts.css Style sheet for product listing in shopping cart template none none
TableOfRegistration.css Style sheet for registration information in shopping cart template none none
TableOfTotals.css Style sheet for order totals in shopping cart template none none
Tabs-Colors Sets colors used by Tab theme none VAR.TabColor
VAR.HexColor
VAR.PageLinkColor
VAR.ThisPageFontColor
VAR.ViewCartColor
VAR.MiniCartColor
VAR.AddButtonGraphic
Tabs-MiniCart.css Style sheet for Mini Cart display in Tab theme VAR.ThisPageFontColor none
Tabs-MoreInfo.css Style sheet for More Info pages in Tab theme Product-MoreInfo.css
Tabs-MiniCart.css
VAR.ThisPageFontColor 		VAR.LinkColor
VAR.BackgroundColor
Tabs-MoreInfoPage More Info page template for Tab theme MoreInfo-Head
Tabs-MoreInfo.css
MoreInfo-Body
Product-MoreInfo
VAR.Media
VAR.PageWidth
Var.SearchProductField
VAR.HexColor 		VAR.PageMargins
VAR.MoreInfoPage
Tabs.css Style sheet for Tab theme Tabs-MiniCart.css
Product.css
VAR.PageLinkColor
VAR.ActiveLinkColor
VAR.ThisPageFontColor
VAR.ViewCartColor
VAR.Media 		none