Product Templates
A product template can consist of three different definitions; the Product, the Subproduct, and the More Info Page. A Product definition sets out the way a main product will be presented on a store page. If the product has any subproducts assigned to it, they will be presented according to the subproduct definition, as part of the parent product. A store page normally features several similar products, so if you want to present more about an individual product, you can create a More Info Page for it, which will be laid out according to the More Info Page definition.
Product
A product definition is not a stand-alone HTML page; it is a section of HTML that can be included on a Store Page or a Search Results page. How you present the product on the page is largely influenced by what sort of page it is on, as well as what type of product you are selling. For example, a product on a store page may include a picture, the product name, the price, a short description, and a button to purchase the product. If, however, the product will appear on a search results page, you may want to leave the picture, price, and purchase button off, and simply display the name and a short segment of the description.
A product definition can include any of the following information. In a purely technical sense, none of these things are required; you could, in fact, have nothing at all in a product definition. A more useful product definition will include some, if not all, of these things.
Name
The product name is usually the primary way customers will recognize a product, and in such cases, it should be very visible and distinct. In the ShopSite back office, a merchant can select a size (big, normal, small), and a style (bold, italic, plain, typewriter) for the product name. The merchant can also select whether or not to display the product name, or whether to allow customers to specify their own name for the product.
SKU
SKU numbers can be useful, or they can be distracting, depending on how they're used. If, for example, you are selling canvas car covers, and have a different SKU for each style of car they are made for, the SKU is very important, and should be highly visible. If, on the other hand, you are selling a variety of very different products with very similar SKUs, displaying the SKU is considerably less useful. You may still want to display it, but in a much smaller, less prominent location. The back office allows the same options for the SKU size and style as for the name, as well as whether to display the SKU or to allow variable SKUs.
Price
The product price can include several different elements. ShopSite includes options for sale prices, quantity discount pricing, alternate currency prices, and even an option to let customers set their own price. You may even want to indicate if tax, shipping, or handling charges might influence the price. In the back office, ShopSite gives merchants the same options for selecting a price size, style, visibility, and variability as for the name and SKU.
Product Image
Including a picture of the product is an invaluable way to draw a customer's attention and can replace the need for a lengthy description. ShopSite includes support for two different images, one on the main product page, and a different one on the More Info Page. A custom template designer could also use extra product fields for additional images, or a merchant could include images within the product description. ShopSite also allows merchants to decide whether the product image should be visible, aligned to the left, right, or center, and whether product text should wrap around the image, or stay off to the side. The logic and HTML code required to accommodate all these options can be very complex, so unless the design requires support for the various options, designers might do well to shy away from supporting them.
Product Description
A description of the product can be anything from a couple of words to several paragraphs, images and more. ShopSite allows merchants to select a size and style for the description, just like for the SKU or name, although there is no option not to display the description. ShopSite allows merchants to include HTML inside the product description, and this is one area where it's highly probable that you'll encounter it.
Subproducts
Subproducts can be used and presented in a number of different ways, and they are discussed in more detail in the Subproduct Definition section below. The Subproduct definition determines what the subproducts will look like, but the parent product template contains the information about how, or if, subproducts will be displayed.
Purchase Data
Purchase Data is made up of the form elements or links that allow the customer to add a product to the shopping cart. The purchase data can all be presented in a single block, or it could be distributed among the other parts of the product display. In addition to a link to add the product to the cart, purchase data can include product option pull-down menus, a product option text-box, and even an inventory display. You may also want to include a link to view the shopping cart in each product definition.
One special type of product template is the Search Product Override Template, which is used to list products on a Search Results screen. Rather than show the entire product listing, you may want to show only a summary, and provide a link to a More Info Page or Store Page where the customer can see details or purchase the product. The following example shows a minimal product template using only the Product Name, Price, and Description:
|
|||||
Subproduct
A subproduct definition is much like a normal product, only the subproduct is displayed as a part of the parent product (either in a Product definition, or a More Info Page definition). A subproduct can contain any information a parent product can. The relationship to a parent product will influence how subproducts are displayed.
In the Dinner Table example below, the table is available in various sizes, with each different size as a subproduct of the main table. This allows the merchant to have different SKUs, shipping options, and inventory tracking for each different size.
 Shaker Rectangular Dinner Table
A simple and sturdy design, the Shaker Rectangular Dinner Table is perfect for apartments, combined kitchen/dining rooms, and homes with young children. All tables are 30" high. |
|
| 30"x30" (2 Person) Shaker Table | Add To Cart |
| 32"x48" (4 Person) Shaker Table | Add To Cart |
| 36"x60" (6 Person) Shaker Table | Add To Cart |
More Info Page
A Product More Info Page definition creates a stand-alone HTML page, which contains details about a single product. This means that you will need to include all the necessary HTML Head and Body elements and structure within the definition. In addition to the standard Product information, there is some product information specifically intended for more info pages.
More Info Page Text
The more info page text will often be a more detailed version of the product description on the product listing page. It can either be used in addition to, or in place of, the main product description on the more info page. One way to use the more info page text would be to use it for a product specification table.
More Info Page Graphic
ShopSite allows merchants to set a separate product image to be used on a more info page. This could be a larger version of the same image from the product definition, or it could be a completely different image, such as a collection of multiple views of the product.
A more info page can also contain any information available in a product definition.
Next Topic: Page Design