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.
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
- 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
Each Custom Template file contains several definitions, which are made up of HTML and Custom Template Tags. Most definitions generate a full HTML page or e-mail message, although there are some definitions that only create segments of HTML that are included within other ShopSite created pages.
Templates contain multiple definitions, which are translated into HTML pages, or fragments of HTML to be included within a page. Hover over the image to see the relationships between sections of the Custom Template files and the output HTML
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.
Another significant factor in your template design is the type of products that will be sold, and how they need to be presented to the customer. Will your products have several sub-products that must be displayed? Do you have large groups of very similar products? Most of your answers to these and a number of other presentation-related questions are matters of marketing or preference, and discussion of the pros and cons of different solutions is outside the scope of this tutorial, but you do need to have answers to these questions before you get started on a custom template.
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. One of the best ways to do this is by using Cascading Style Sheets (CSS) to control the appearance of content, rather than relying on HTML attributes.
Custom Templates in an HTML editor
A full custom template does not follow the flow, design, or logic of HTML; it's far more complex. There is, however, some benefit to using an HTML editor during the design process. If you have an advanced HTML editor that will display the raw HTML code in a color-coded layout, you can even build your templates in the editor. You may also choose to create each page for a template in HTML, then insert the custom template tags where they belong, and finally copy the finished page into the appropriate portion of the template file. The best way to test a custom template is to view it's generated content in a ShopSite store. Useful debugging information can be obtained from the ShopSite publish screen, and by viewing the page source.
Start with a graphical representation of a page, then design the page using HTML. Replace the appropriate HTML segments with Custom Template Tags, and finally insert the finished content into a Template Definition. (Click on images for a larger version)
Next Topic: Product Design