XHTML Style Creation

This article applies to Classic Commerce. (Looking for Contextual Commerce documentation?)

Template ZIP File Format

A template style is a collection of files, including any folders, images, and CSS, packaged up in a single ZIP file. If you have multiple CSS files, it is recommended that they are combined into a single CSS file.

Main Template File

  • For the primary look and feel template of your website, we will look for a file named window.xhtml in your ZIP file.
  • The template file must be a valid XHTML file, and therefore should include the XHTML namespace in its HTML element:
    <html xmlns="http://www.w3.org/1999/xhtml">
  • Within the template file we will look for two comments:
    <!-- TemplateBeginEditable name="Content" -->
    <!-- TemplateEndEditable -->

Whatever is between these two comments will be replaced with custom, dynamic HTML to create the final page that is displayed.

Images and CSS

  • Any images and CSS referenced from your template file, and included in your final ZIP file, will be automatically used.
  • It is highly recommended that multiple CSS files are combined into a single CSS file.
  • Do not link to images and CSS external to the ZIP file. This will cause error messages for users when using secure SSL connections.
  • For widest compatibility, use "relative" references to images and CSS from your template. For example, assuming you've included a folder called "images" in your ZIP file: 
    <img src="images/mylogo.gif" alt="logo"/>
     would be a relative reference because the "src" does not begin with a forward slash "/"


Common problems when working with templates relate to their XML format. The following tips are solutions to common problems.

  • Replace <br> with <br />
  • Replace &nbsp; with &#160; 
  • Replace &copy;, or any other copyright symbol, with &#169;
  • All tags should close. For example, "img" (image) tags must end with "/>"
  • The entire <head> tag, along with the attributes of the <body> tag, will be overwritten.


  • An example template is available for download.
  • This example illustrates a simple, working, template format.

Including Javascript Files

To include javascript files in your style, the <script> tag must be in the <body> instead of the <head>. When possible, placing script references towards the bottom of a body will have the best performance.

Favicon Support

To include a 16x16 favicon in your style, place either a favicon.ico, favicon.gif or favicon.png in the main / root directory of your style. The system will automatically recognize the image and include it in the <head> tag.

Optional Security Info

A security logo or SSL badge / logo / graphic may be automatically inserted by adding the following two comments. The typical size of this information is 115 pixels wide by 82 pixels high.

<!-- TemplateBeginEditable name="Security" -->
<!-- TemplateEndEditable -->

If a transparent background is desired, then use the following 2 comments instead:

<!-- TemplateBeginEditable name="SecurityTransparent" -->
<!-- TemplateEndEditable -->

Optional PayPal Logo

For PayPal express checkout orders, a logo may be inserted at the top of PayPal's checkout interface / page flow. This is accomplished by creating a folder called "paypal" in your ZIP, and adding an image to the folder named header.gif, header.jpg, or header.png. The image has a maximum size of 750 pixels wide by 90 pixels high.


Powered by Zendesk