Custom Templates
ShopSite uses Custom Templates to control the appearance of your store. The Custom Templates section of the back office allows you to upload and manage Custom Template files for your store.
About Custom Templates
Every customer-facing page, screen, or e-mail message in your store is created using a Custom Template. Custom Templates are special files containing a combination of ShopSite's Custom Template Tags and HTML. Each Custom Template file contains one or more Definitions which control how store information is presented to the customer. ShopSite will automatically assign a default Custom Template for each section of your store based off the Theme you have selected. You can also select a different Custom Template to use by going to the Layout configuration screen for that section of your store.
Creating Custom Templates
You can create a unique look for your store by creating your own Custom Templates. A Custom Template combines HTML with Custom Template Tags, which are used to interact with ShopSite. The Custom Template Tutorial explains in more detail how Custom Templates work, and how to create them.
Managing your Custom Templates
The Custom Template management interface in ShopSite is divided into four categories to make it easy to manage your template files. ShopSite keeps your custom templates separate from the built-in templates, so you only have to manage your own files. Click the button for the category of template file you want to manage:
- Page/Product
- Includes the Page and Product templates, which control the generated pages (Store Pages and Product More Information Pages). If you modify one of these templates, you will need to Publish your store to see the changes.
- Shopping Cart
- Includes the Shopping Cart template, which controls the screens used in the shopping cart and checkout process, as well as the customer reciept e-mails.
- Advanced
- Includes the Search, Tell a Friend, Gift Certificate, and Customer Registration templates. These templates control the screens and e-mail messages for the features identified in the respective template name.
- Includes
Include files can contain additional template content used within any other template file type. Typically, these are frequently used content, such as Stylesheets, JavaScript, or template fragments used in multiple different template files.
On a related note, publish files are used for creating files that can be linked by reference in an html page such as <link rel="stylesheet" type="text/css" href="test.css" />. This allows those files to contain ShopSite template tags and have the values evaluated during a publish instead of having to include the code in the actual html. Typically, publish files would be css or javascript files that need to use values configured in the ShopSite back office. The output from the publish file is placed in a /publish directory at the root of the domain. So you can reference it in a template like this <link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/publish/publish_file_name.css"/>, where ShopSite will replace [-- OUTPUT_DIRECTORY_URL --] with the output directory specified in the back office.
File Management Tools
Within each category, there are sections for managing each individual type of Custom Template file. The file management section includes the following tools:
- File List
- Select the file you want to manage from the list, then click one of the management buttons to the right.
- Edit Template
- Select a file from the list on the left, then click this button to edit the template. This is an easy way to make quick changes to a template without having to upload the file. If you are making significant changes, it may be easier to download the file and edit it using your preferred HTML editing tool.
- Copy Template
- Select a file from the list on the left, then click this button to copy the template to a new file with a different name. You can use this option to easily make changes to a template without losing the original template.
- Delete Template
- Select a file from the list on the left, then click this button to delete the template. When you delete a template, the file is removed from your server. If you are using the template anywhere in your store, you will need to select a new template to use.
- Preview
- (Shopping Cart only) Select a file from the list on the left, then click this button to preview what the Shopping Cart screen would look like using the selected template. The preview uses your Shopping Cart settings and a dummy product.
- Upload Template
- Click this button to upload a Custom Template to your store. This allows you to create and modify template files using your preferred HTML editor then upload them to your server.
- New Template
- Click this button to create a new Custom Template in your store. The new template will have the defines used in that template, but nothing else.
- Copy ShopSite Template
- Click this button to copy a built-in ShopSite template. This lets you view the Custom Template source for the built-in templates and make changes to customize the template for use on your store. For information about what's included in each built-in template and some tips on customizing them, see Built In Templates Explained.
Using a Custom Template
ShopSite allows you to select the template you want to use for each part of your store from that section's Layout settings screen. The list of available templates in the selection box includes all templates of the appropriate type. ShopSite's built-in templates are listed alphabetically first, then your Custom Templates are listed alphabetically afterwards. If you have uploaded a template file with the same name as a built-in template, only your file will be listed.
Selecting A Template
Go to the appropriate feature layout settings screen to select the template you want to use:
- Page
- Each page has its own template setting. To change the template a page uses, go to Pages in your back office, select the page you want to modify, then click Edit Page Layout or Power Edit.
- Product
- Each product has its own template setting. To change the template a product uses, go to Products in your back office, select the product you want to modify, then click Edit Product Layout or Power Edit.
- Shopping Cart
- All Shopping Cart screens use a common template. To change the Shopping Cart template, go to Commerce Setup > Order System > Layout Info.
- Search
- Search uses a unique Search template, and you may optionally select an override template to use for products and page links on the search results screen. To change the templates used for search results, go to
Preferences > Search Settings > Search Layout.
- Gift Certificates
- The Gift Certificate template controls the certificate order screen as well as the printed and e-mailed certificates. To change the Gift Certificate template, go to Merchandising > Gift Certificates > Configure.
- Customer Registration
- The Customer Registration screens and e-mail messages are controlled by the Customer Registration template. To change the Customer Registration template, go to Commerce Setup > Customer Registration > Configure.
- Wish List
- The Wish List template controls the ShopSite wish list displayed to registered customers when they create or edit a wish list. To change the Wish List template, go to Merchandising > Wish List > Configure.
- Order
- The Order template controls the packing slip displayed to merchants when they view packing slips form the Orders screen. To change the packing slip template, go to Orders > Configure.
Custom Template Resources
We have created the following resources to help you learn more about Custom Templates and how you can create and use them:
