Creating a Custom Product Template

Screen: ShopSite > Merchandising > Custom Templates

Creating a Custom Product Template

A product template defines the elements and layout of a product listing that appears on store pages. Like a page template, a product template contains standard HTML tags to specify the layout, and ShopSite custom template tags to specify the product information from the ShopSite database that is to appear in the product listing. Here is a one-line example that would display the product name as an h1 HTML element:

<h1>[-- PRODUCT.Name --]</h1>

When ShopSite publishes a page that uses custom templates, it reads the product information from the product database and formats it according to the product template. ShopSite then creates the rest of the page, which probably includes more products, each of which is formatted according to the product template that is uses.

You can use the same product template for all products in your store, or choose different templates for different products. You can even specify different product templates from within page templates, so that a product uses one template on one page and another template on a different page.

See the Custom Template Tutorial for more detailed information about creating ShopSite Custom Templates.

To Create a Product Template:

A product template tells ShopSite which product fields you want displayed in the store (using custom template tags), and how you want those fields arranged (using HTML tags). Keep in mind that product are displayed on pages, so the HTML in your product template needs to work with the HTML in your page template.

1. Get Acquainted with ShopSite

If you do not have experience with ShopSite, you should spend time configuring and viewing the ShopSite demo stores, from both the merchant and customer perspectives. You need to have a fairly solid understanding of what information is stored for pages and products, and how the built-in templates present that information.

Use the merchant interface to look at the contents and layout information for a product.
Publish the store, then click the My Store button and go to a page containing that product to see how ShopSite used the product information to produce the product listing that customers see.
Change some of the product contents and layout settings, then Publish the store again and look at the product listing.
View the source of some of the pages to better understand the relationship between the product information and the HTML tags that ShopSite generates.

See the Custom Template Tutorial for more detailed information about creating ShopSite Custom Templates.

2. Study the Examples

Look over the custom template specification to see the tags that are available. It will be one of your primary references while creating templates, or you can use the short version once you have the hang of it.

Study these example product templates and resulting HTML pages. Each example shows a different aspect of product templates. You can even copy any parts of these examples and paste them into your own template.

3. Create Your Template

Use an HTML authoring program or a text editor to create a product template.

Give the template file a descriptive name. The file name does not need an extension.
If you use an HTML authoring program, enter the ShopSite custom template tags as plain text.
A product template is only used to create part of an HTML page, and so does not start with <html> and end with </html>. It should only contain the HTML tags and product template tags that you want repeated for each product listing on a page. (Note that product templates include a section to define a More Info Page, and that section does require <html> and </html> tags.)

4. Upload Your Template

Once you have your template complete (or at least ready for testing), you need to upload it into your store.

From the ShopSite back office, click on Merchandising > Custom Templates.
On the Custom Templates screen, click Upload Template in the Product Templates section.
Use the Browse button to locate your template, then click Upload File to upload the template to your store.

You can also use FTP to upload the template to the correct directory. Keep these points in mind:

Transfer the files using ASCII mode transfer, so that the line break characters get converted from the operating system of your computer to the operating system that ShopSite is running on. Do no just copy the files over a network or via floppy.
To make the template available to a single store, copy it to the /templates/products directory under the store's data directory. Create the directories if they don't already exist.
To make the template available to all stores in a mall, copy it to the /templates/products directory under the ShopSite shopping cart (sc) directory.

5. Test Your Template

You probably don’t want to test your template on real pages in a live store. Create test products that will test all of the layout and custom template tags that you put in your template, then place them on a test page..

Add a product to a test store. On the Add a Product screen, scroll down to the Product Layout Info section and select your template from the list in the Template field.
Enter values for all product fields used by the template.
Assign the product to a page in the store.
Publish the store and review the Publish Results page for any error messages.
Go to the store and view the page in a browser. Verify that all the product elements are there and that the layout looks the way you planned.
View the page using other browsers that customers might use, to make sure the product listing looks okay in all browsers.
Delete the values in some product fields, then publish the store again and view the page to make sure the product listings still look okay.
Check the HTML of the page by running it through an HTML validator, such as http://www.htmlhelp.com/tools/validator or http://validator.w3.org.
View the source of the page. If the ShopSite parser did not recognize a tag, or if a database field was empty, it replaced the custom template tag with an HTML comment tag containing information about the problem, like this:

Make any necessary changes and test the template again, then tell the merchant that it is available. The merchant should be able to select the template from the Add a Product screen (advanced editing version) or the Edit Product Layout screen.

ShopSite Help and Resource Center
Last updated: March 01, 2010
Give Feedback

ShopSite Shopping Cart Software