Custom templates are very powerful and are easy to edit in ShopSite, but when you first get started with them it can be confusing to find what you need to edit and how to go about making those changes.

In this blog post we’ll review the following:

• Where templates can be viewed/edited
• How to create custom templates
• How to test custom templates
• Where to go for help & documentation

Where Are They?

Custom templates can be accessed on the Merchandising > Custom Templates screen in ShopSite and they are separated into 4 primary categories:

Custom Template Categories

1. Page/Product
2. Shopping Cart
3. Advanced
4. Includes

Each category will show a list of  current custom templates, as well as options to edit them or copy stock templates to make a custom version.

Creating Custom Templates

Page & Product Templates Screen

Here is a screenshot of our Page/Product screen, showing that we have 1 custom Page template and no custom Product templates.

Every category will have a “Copy ShopSite [category] Template” button is available, as shown on the right for both Page and Product templates.

Clicking this button for the type of template you want to work with allows you to create a custom copy of a stock template file.

Copy Product Template

The copy template screen will let you choose which stock template you want to copy and will prompt you for a filename for your custom copy.

ShopSite v12.1 has a checkbox to import all include files like you see here, but this should not be checked unless you’re doing some advanced testing and are very familiar with how include templates are used.

Testing Templates

Depending on what you’re editing, such as a page template, you could just assign the new template to your page and then save & publish to see your change take effect.

However if you’re working with an Include template or a Publish template such as a CSS file, it’s not that simple but it’s still easy to implement.  For this example let’s say we want to make a custom copy of the bb.css file because we want to make some changes to the CSS values:

1. On Merchandising Tools > Custom Templates > Includes, click Copy ShopSite Publish
2. Copy the “bb.css” file to a new name of “temp”
3. Select the “temp” file on the list of includes and click Copy Publish
4. Enter “bb.css” as the new file name
5. Select the “temp” file on the list and click Delete Publish

What this does is it makes a custom copy of the bb.css file using the same name as the original.  By using the original name for our custom copy ShopSite will automatically use our copy instead of the stock file anytime it needs it.  This saves you from having to edit other templates to load a CSS file of a different name.

Help & Documentation

Making a custom template is great, but if you’re not able to decipher the template tags that ShopSite uses for its code then they can be quite confusing to follow.  Fortunately there is a variety of detailed documentation available.

ShopSite has a whole section of their website dedicated to Designer Resources:

http://www.shopsite.com/designer_tools.html

..which among other tools contains their Custom Template Cookbook:

http://www.shopsite.com/templates/cookbook/

They also include details for any new tags that are added when a new version of ShopSite is released:

http://www.shopsite.com/templates/cookbook/tags-by-version.html

An extremely valuable resource is the template tag cheat sheet:

http://www.shopsite.com/help/12.1/en-US/templates/custom.template.cheatsheet.all.html