Creating Custom Templates
This page covers the creation of custom templates. For general information about templates (what they are, where they belong, etc.), please see Using Templates.
Note: The ability to create your own store page templates is an advanced feature of WebCommerce and should be attempted only if you have firm knowledge of HTML. Also, do not use WYSIWYG editors (such as Frontpage or Composer) unless you know how to use those programs to edit HTML. WYSIWYG editors tend to make assumptions and auto-corrections that often result in invalid templates. It is very important to understand and make use of HTML when it comes to code-specific tasks such as constructing templates.
Introduction
Creating a template is almost the same as creating any other HTML page. The major difference is that instead of including image tags and link tags to produce elements on your page, you will use WebCom Tags. WebCom Tags are place holders that the store builder replaces with values for the product that it is creating the page for. For example, you would use the WebCom tag: <WEBCOM TYPE="logo_html"></WEBCOM> Where you would like the product image to appear on the page.
We recommend that you start with an existing template file. Get a copy of one of our Sample Templates and use it as a guide, or better yet, tear it apart and change what you need to change (This is known as "hacking" and is an excellent way to learn about how things work). Once you think you've created what you want, try building a preview store using your new template.
WebCom Tags
Below is a list of all WebCom tags that can be used in your templates. All WebCom tags require an open and close tag. For example, to use the WebCom tag price on a template, use <WEBCOM TYPE="price">$19.95</WEBCOM>. When the store builder generates your store pages, any text between the opening and closing tags is removed and replaced with the appropriate product price from the database. In addition, the begin and end tags are necessary for the template to function. If you leave out these tags, the pages will not show any data. Also be aware that all tags are case sensitive, so make sure you pay attention to which letters are capitalized.
| WebCom Tag | Replaced With |
|---|---|
| <WEBCOM TYPE=begin> </WEBCOM> | Required to begin template. |
| <WEBCOM TYPE=store> </WEBCOM> | The name of your store as entered in Back Office Properties. |
| <WEBCOM TYPE=message> </WEBCOM> | Special Instructions entered in Back Office Properties. |
| <WEBCOM TYPE=category> </WEBCOM> | Product category. |
| <WEBCOM TYPE=name> </WEBCOM> | Product name. |
| <WEBCOM TYPE=thumbnail_html> </WEBCOM> | Small product image. |
| <WEBCOM TYPE=photo_html> </WEBCOM> | Product image. |
| <WEBCOM TYPE=short_desc> </WEBCOM> | Short descriptions of product. |
| <WEBCOM TYPE=long_desc> </WEBCOM> | Long description of product. |
| <WEBCOM TYPE=price> </WEBCOM> | Product price. |
| <WEBCOM TYPE=handling> </WEBCOM> | Product handling cost. |
| <WEBCOM TYPE=taxable> </WEBCOM> | The word "taxable" if the product is taxable. |
| <WEBCOM TYPE=unit_weight> </WEBCOM> | Unit weight for the product. |
| <WEBCOM TYPE=SKU> </WEBCOM> | Product SKU |
| <WEBCOM TYPE=options> </WEBCOM> | Drop-down lists of product options ordered according to the sort order integers. |
| <WEBCOM TYPE=upsell1_html> </WEBCOM> | Link to number 1 upsell product (Thumbnail image of product if one exists, otherwise the product name). . |
| <WEBCOM TYPE=upsell2_html> </WEBCOM> | Link to number 2 upsell product (Thumbnail image of product if one exists, otherwise the product name). . |
| <WEBCOM TYPE=upsell3_html> </WEBCOM> | Link to number 3 upsell product (Thumbnail image of product if one exists, otherwise the product name). . |
| <WEBCOM TYPE=upsell4_html> </WEBCOM> | Link to number 4 upsell product (Thumbnail image of product if one exists, otherwise the product name). . |
| <WEBCOM TYPE=addToCart> </WEBCOM> | The Add-to-cart button. |
| <WEBCOM TYPE=viewCart> </WEBCOM> | The View-cart button. |
| <WEBCOM TYPE=checkOut> </WEBCOM> | The Check-out button. |
| <WEBCOM TYPE=logo_html> </WEBCOM> | Product logo. |
| <WEBCOM TYPE=store_email> </WEBCOM> | The store email address. |
| <WEBCOM TYPE=store_contact_name> </WEBCOM> | The store contact name. |
| <WEBCOM TYPE=store_addr1> </WEBCOM> | The store address #1. |
| <WEBCOM TYPE=store_addr2> </WEBCOM> | The store address #2. |
| <WEBCOM TYPE=store_city> </WEBCOM> | The store city. |
| <WEBCOM TYPE=store_state> </WEBCOM> | The store state. |
| <WEBCOM TYPE=store_postal_code> </WEBCOM> | The store zip or postal code. |
| <WEBCOM TYPE=store_country> </WEBCOM> | The store country. |
| <WEBCOM TYPE=store_phone1> </WEBCOM> | The store phone #1. |
| <WEBCOM TYPE=store_phone2> </WEBCOM> | The store phone #2. |
| <WEBCOM TYPE=end> </WEBCOM> | Required to end template. |