ShopSite® is the easiest-to-use shopping cart software for small to medium-sized businesses.

Welcome to the ShopSite template CookBook. ShopSite Custom Templates are a powerful tool, designed to give merchants and designers complete control over the appearance of a ShopSite store. This tutorial explains what Custom Templates do, how they are used, and provides a few examples of ways to design Custom Templates for ShopSite stores.

Introduction to Custom Templates

ShopSite uses Custom Templates to control the way customer-facing content appears. Any content a customer might see, whether an HTML page or an e-mail message, can be controlled by Custom Templates. Each Custom Template combines standard HTML tags with ShopSite's Custom Template Tags. When the final content is generated by ShopSite, the Custom Template Tags are replaced with HTML containing information from the ShopSite database. To put it simply, ShopSite 'fills in the blanks/tags.'

A ShopSite Custom Template is a file stored in a special location within the ShopSite store. The following is a list of the different types of templates that can be created:

• Product - Controls how products are displayed throughout the store.
• Page - Controls the appearance of store pages
• Search - Controls the appearance of search results pages
• Shopping Cart - Controls the appearance of the various screens used during the checkout process and customer receipts
• Tell A Friend - Controls the appearance of the Tell A Friend pop-up window and the e-mail message friends will receive
• Customer Registration (Pro) - Controls the appearance of the various Customer Registration screens and e-mail messages
• Gift Certificate (Pro) - Controls the appearance of the Gift Certificate order form and the e-mail or printed gift certificate

Template Design Considerations

One of the most important things to consider before you dive in and start making custom templates is what the template will be used for. For example, are you making a highly customized template that will only be used for a single store, or are you making a more generic template that can be applied to a number of different stores? Another question to ask is how much back-office control should the merchant have? The way you answer these questions will have a dramatic effect on the complexity of the templates, and the ratio of HTML and custom template tags you will use.

The easiest custom templates to make are usually store-specific and leave very little control in the back office. This technique allows you to rely a lot more on your HTML editor to design the presentation, and only use custom template tags to include specific ShopSite database information. If you are just starting with custom templates, it's a good idea to start with a template like this.

It will save you a lot of time if, before you start messing with HTML or Custom Template Tags, you have a mock-up of the result you're hoping to end up with. It wouldn't even hurt to go as far as designing an entire mock-up screen with your HTML editor, before you start trying to make a template for that screen. One distinct advantage of an HTML mock-up is that you can often just cut and paste segments of code from your mock-up into the custom template.

Finally, it is important to be aware that most Custom Template Tags will be replaced with HTML code, not just raw data. In addition, many of the back-office fields merchants can use allow HTML content to be included within them. A good template needs to be able to handle this information and present it in a manner consistent with the rest of the Web site's appearance.

Helpful Resources To Know About Before Getting Started

There are a few different resources for custom template information that you may want to be aware of before gettings started. These resources include:

• Custom Template CookBook
• Custom Template Tag Reference
• Custom Template Tag Cheatsheet
• ShopSite Forums - many designers check there so if you have questions about functionality, or possibilies, you can post those questions in the forum.
• Existing ShopSite Templates - often a good idea to make a copy of a ShopSite template and use it as an example.

  Begin Tutorial: Page Templates >>