Page Templates

Create an HTML page, then replace any page-specific content in your code with template tags.

First Things First

Start out by designing the look and feel for your store, including the header, navigation menus and footer. You can design and create your HTML page in any HTML or WYSIWYG Editor that you are comfortable working with.

Required Tags

Every page template has two required tags, the opening and closing tags that indicate to ShopSite that the template file is for a page. At the very top of your HTML, before the DOCTYPE tag add [-- DEFINE PAGE --], and at the every end of your HTML page, after </html> add [-- END_DEFINE PAGE --]. 

[-- DEFINE PAGE --]
[-- END_DEFINE PAGE --]

Suggested VARs

ShopSite allows you to setup your own custom variables (custom template tags) to use throughout your template. Below are some suggested VAR tags that many designers add to all their custom ShopSite page templates. Add these tags immediately after the [-- DEFINE PAGE --] tag, above your DOCTYPE.

[-- VAR.Secure "no" --]
[-- VAR.Type "page" --]
[-- IF PAGE.LinkColumns "One column" --][-- VAR.LinkWidth "full" --][-- VAR.MaxLink "1" --][-- ELSE_IF PAGE.LinkColumns "Two columns" --][-- VAR.LinkWidth "half" --][-- VAR.MaxLink "2" --][-- ELSE_IF PAGE.LinkColumns "Three columns" --][-- VAR.LinkWidth "third" --][-- VAR.MaxLink "3" --][-- ELSE_IF PAGE.LinkColumns "Four columns" --][-- VAR.LinkWidth "fourth" --][-- VAR.MaxLink "4" --][-- ELSE --][-- VAR.LinkWidth "fifth" --][-- VAR.MaxLink "5" --][-- END_IF --]
[-- IF PAGE.Columns "One column" --][-- VAR.ProductWidth "full" --][-- VAR.MaxProduct "1" --][-- ELSE_IF PAGE.Columns "Two columns" --][-- VAR.ProductWidth "half" --][-- VAR.MaxProduct "2" --][-- ELSE_IF PAGE.Columns "Three columns" --][-- VAR.ProductWidth "third" --][-- VAR.MaxProduct "3" --][-- ELSE_IF PAGE.Columns "Four columns" --][-- VAR.ProductWidth "fourth" --][-- VAR.MaxProduct "4" --][-- ELSE --][-- VAR.ProductWidth "fifth" --][-- VAR.MaxProduct "5" --][-- END_IF --]

Title & Meta Tags

For SEO purposes, all pages should have their own unique title and meta description tags within the <head></head> portion of a web page. These fields, as well as the less-used meta keywords field, are all fields that are part of the ShopSite page database. You can use template tags to check to see if there is a value in the database field for the title, meta description or meta keywords, and use that value if it exists. You can also add ELSE tags to use the page name or another page field if one of these fields is blank. Copy the code below and include it within the <head></head> section of your HTML page.

[-- IF PAGE.Title --]
  <title>[-- PAGE.Title --]</title>
[-- ELSE --]
  <title>[-- PAGE.Name REMOVE_HTML --]</title>
[-- END_IF --]

[-- IF PAGE.MetaKeywords --]
  <meta name="keywords" content="[-- PAGE.MetaKeywords --]">
[-- END_IF --]

[-- IF PAGE.MetaDescription --]
  <meta name="description" content="[-- PAGE.MetaDescription --]">
[-- END_IF --]

Stylesheets & Scripts

Within the <head> section of your templates you will want to link to your website CSS stylesheets and JavaScript files. You can do this by first uploading those files into the ShopSite Publish File section found under Merchandising > Custom Templates > Includes > Upload A Publish File. Then to link to those publish files, use the regular store URL, the /publish directory, then the name of the file.

  1. Add File To ShopSite. First you will want to go to Merchandising > Custom Templates > Includes, and upload your file into the second section, "Publish Files."
    Note: You will want to retain the ".css" ending on the file.

  2. Link To File Within Templates. You will need to link to this CSS file in all template types.
    • Pages: <link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/publish/name_of_css_file.css">
    • Secure Pages: <link rel="stylesheet" type="text/css" href="[-- STORE.SC_Secure_Image_URL --]/publish/name_of_css_file.css">

Note: These CSS and JavaScripts files work the same as regular CSS files with 2 exceptions, (1) they can use global ShopSite template tags such as [-- STORE.Color1 --] and [-- STORE.Font --] and (2) if a line starts with a pound sign "#" then the whole line is commented out. If you are setting CSS IDs you will want to put a space in front of the pound sign so that the pound sign is not the first thing on that row.

Header & Footer

[-- IF STORE.UseCompanyLogo --][-- STORE.CompanyLink --][-- END_IF --]

[-- IF STORE.HeaderImage --][-- STORE.HeaderLink --][-- END_IF --]

[-- IF PAGE.DisplayPageHeader --][-- HEADER --][-- END_IF --]

[-- IF PAGE.DisplayPageFooter --][-- FOOTER --][-- END_IF --]

Search Field

Below is the code to add to your custom page template in order to place the ShopSite search field on your ShopSite generated page.

<form action="[-- SHOPPING_CART_URL BASE --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post">
<input type=hidden name="storeid" value="[-- STORE.ID --]">
<input type="text" name="search_field" size="13" value="[-- STORE.Search --]" onFocus="value=''">
<input type="submit" value="[-- STORE.Go --]">
</form>

Text & Graphics

For every page in ShopSite, merchants can choose to display the page name, add a banner graphic, and use up to 3 main text fields. Add the code shown below in place of "content goes here" in your HTML.

[-- IF PAGE.DisplayGraphic --]
 [-- IF PAGE.Graphic --]
   <div id="page-graphic">[-- PAGE.Graphic ONLY_ALT_TAG --]</div>
 [-- END_IF --]
[-- END_IF --]

[-- IF PAGE.DisplayName --]
  <h1>[-- PAGE.Name --]</h1>
[-- END_IF --]

[-- IF PAGE.Text1 --]
  <div class="text" id="text1">[-- PAGE.Text1 --]</div>
[-- END_IF --]

[-- IF PAGE.Text2 --]
  <div class="text" id="text2">[-- PAGE.Text2 --]</div>
[-- END_IF --]

[-- IF PAGE.Text3 --]
  <div class="text" id="text3">[-- PAGE.Text3 --]</div>
[-- END_IF --]

Most websites have top and side navigation menus that are the same on all pages. In the main content, a page may have sub pages or sub categories to help shoppers drill down to what they are interested in. For example, if you click on "shoes", you will come to a shoes page which may list "sandals" "high heels" and "sneakers" as sub pages.

Add the code below where you would like the sub pages to appear. Most often designers will put this code between the text fields 1 and 2 so that merchants can add text above the sub pages in text 1 and text below the sub page in text 2.

[-- IF PAGE.NumLinks GT "0" --][-- VAR.CountLinks "0" --]
<div id="page-links">
  [-- LOOP LINKS --][-- VAR.CountLinks INC --]
    <div class="link [-- VAR.LinkWidth --]">[-- LINK --]</div>
    [-- IF VAR.CountLinks EQ VAR.MaxLink --]<div class="clear"></div>[-- VAR.CountLinks "0" --][-- END_IF --]
  [-- END_LOOP LINKS --]
</div>
[-- END_IF --]

In addition to adding the loop tags to loop through any assigned page links, you also need to define how you want your links to be laid out within the loop. Add the code shown below immediately AFTER the [-- END_DEFINE PAGE --] tag at the bottom of your template. This makes it so your page template now has two DEFINEs, one DEFINE for the page itself, and the second DEFINE for this page's link when listed on other pages. The 'loop' code shown above will loop through the DEFINE LINK_TO_PAGE code shown below, for all page links assigned to a page.

[-- DEFINE LINK_TO_PAGE --][-- VAR.CreateLink "yes" --]
[-- IF PAGE.LinkGraphic --]
  <a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">[-- PAGE.LinkGraphic ONLY_ALT_TAG --]</a>
  [-- VAR.CreateLink "no" --]
[-- END_IF --]

[-- IF PAGE.LinkName --]
  <a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">[-- PAGE.LinkName --]</a>
  [-- VAR.CreateLink "no" --]
[-- END_IF --]

[-- IF VAR.CreateLink "yes" --]
  <a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">[-- PAGE.Name REMOVE_HTML --]</a>
[-- END_IF --]

[-- IF PAGE.LinkText --]
  <span>[-- PAGE.LinkText --]</span>
[-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]

Loop Products

Now for the money maker section, the products. Most designers will add the tags to display the products between text fields 2 and 3 so that merchants can again add text above and below the products listed on a page.

[-- IF PAGE.NumProducts GT "0" --][-- VAR.CountProducts "0" --]
<div id="product-links">
  [-- LOOP PRODUCTS --][-- VAR.CountProducts INC --]
    <div class="product [-- VAR.ProductWidth --]">[-- PRODUCT --]</div>
    [-- IF VAR.CountProducts EQ VAR.MaxProduct --]<div class="clear"></div>[-- VAR.CountProducts "0" --][-- END_IF --]
  [-- END_LOOP LINKS --]
</div>
[-- END_IF --]

Page CSS

If you've been paying attention to the code you've been copying and pasting, you would have noticed that many of the DIVs have classes or IDs assigned. This is largely so that you can style the look and layout with CSS, but these classes and IDs also help with the structure of the page. It is suggested that you add the CSS below to the stylesheet for your page.

div#page-graphic {margin: 0px; padding: 0px 0px 20px 0px; text-align: center;}
div#page-graphic img {max-width: 100%;}
div.text, div#page-links, div#product-links {margin: 0px; padding: 20px 0px 0px 0px; text-align: left;}
div.text:after, div#page-links:after, div#product-links:after {content: ''; display: block; max-height: 1px; width: 100%; clear: both;}
div.link a, div.link span {display: block;}
div.link, div.product {display: inline-block; zoom: 1; *display: inline;}
div.full {width: 100%; clear: both;}
div.half {width: 50%;}
div.third {width: 33.3%;}
div.fourth {width: 25%;}
div.fifth {width: 20%;}
div.clear {clear: both;}

Up Next: Create your product template.

Product Templates