Product Templates

Screen: ShopSite > Products > Edit Product Layout

Product Templates

There are several product templates that you can choose from to customize the look and feel of your ShopSite store. Each template arranges the product information in a different order and layout. You can toggle fields to display or hide the product image, name, price, and SKU. All of the samples here have all fields showing. By default, the SKU for a product is not displayed.

The following templates are intended for use as search override templates, and do not contain all the elements of a regular product template: classy_se_prod_template.sst, elite_001_se_prod_template.sst, search_product.

The following templates will only work properly if used with the associated theme: awesome_orange_001_pr_template.sst, sg_product_template, and tab_product_template.

Default Product Template - Product name, price, SKU, and description are to the right of the product image and aligned with the top of the image. [Add to Cart] and [View Cart] buttons are below the description. If the product image is small and the product description is long, the description will wrap below the image, as in this example, unless you set Text Wrap to Off.

Product Name
$9.99
123456
This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description.

[Add to Cart] [View Cart]

Compact - Everything but the description is put on one line, with the description starting on a new line underneath.

Product Name $9.99 123456 [Add to Cart] [View Cart]
This is the Product Description. This is the Product Description.

Compact with Graphic over Text - Same as Compact template, except that the product image is displayed above the line containing the product name, price, SKU, and [Add to Cart] and [View Cart] Buttons. The product description starts on a new line below the other information.

Product Name $9.99 123456 [Add to Cart] [View Cart]
This is the Product Description. This is the Product Description.

Graphic Over Text - A vertical layout, starting with the product image on top, then the product name, then the price, and then the SKU, if displayed. The product description is below the SKU, and the [Add to Cart] and [View Cart] buttons are on a single line underneath the description.

Product Name
$9.99
123456
This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description.
[Add to Cart] [View Cart]

Inline - The product image, name, price, and SKU are all displayed on one line, which will wrap if necessary. The product description starts on a new line, and the [Add to Cart] and [View Cart] buttons are on a separate line below the description.

Product Name $9.99 123456
This is the Product Description. This is the Product Description.
[Add to Cart] [View Cart]

Inline with Graphic over Text - Same as the Inline template, except that the product image is above the line containing the product name, price and SKU.

Product Name $9.99 123456
This is the Product Description. This is the Product Description.
[Add to Cart] [View Cart]

One Line - The name pretty much says it all: everything on one line. Of course, unless your product has a very short name and description, the line will wrap. The product image is first, then the name and SKU. The product description follows the SKU, then the price, and then the [Add to Cart] and [View Cart] buttons.

Product Name 123456 This is the Product Description. $9.99 [Add to Cart] [View Cart]

DefaultCustomProductTemplate - This template looks almost identical to the Default Product Template, except the buttons are different. It is built with ShopSite custom template code instead of C code, which means that you can copy it and make changes using the buttons on the Custom Templates screen. This template supports variable pricing (the Default Product Template only displays standard pricing).

Product Name
$9.99
123456
This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description. This is the Product Description.

Elite Product Template (elite_001_pr_template.sst). The Elite product template is designed for use with the full Elite theme, but it can also be used with other Page templates as well. This template uses all the product options in the back office, but it does not display a [View Cart] button.

Product Name
123456
This is the Product Description. It is, in fact, a very, very long product description that takes up a whole lot of space. Lots of space, really. It's even bigger than a breadbox. It takes up more space than space itself. Space like you wouldn't believe. Huge, enormous, gargantuan quantities of space, just to describe this product. It must be a very important, special product indeed. Well, actually, it's not really that big at all, and it really doesn't say anything, so I'm really not even sure why it's here to begin with.

Select a color:

Quantity: $9.99

Classy Product Template (classy_pr_template.sst). The Classy template is used by the Classy theme, but it can also be used on its own. This template was introduced in version 8.1 and implements all the options available in the Back Office, but does not display a [View Cart] button. The presentation is divided into four blocks: Info (Name, SKU, Price), Purchase (Add to Cart button, Quantity box, etc.), Graphic, and Description. How these blocks are arranged depends on your Image Alignment and TextWrap settings.

Layout Settings

Product Appearance

TextWrap: On
Image Alignment: Left

Product Name
12345
$9.99

Quantity:

This is the coolest product ever made.
You want to buy it. Everybody wants one.

TextWrap: On
Image Alignment: Right

Product Name
12345
$9.99

Quantity:

This is the coolest product ever made.
You want to buy it. Everybody wants one.

TextWrap: On
Image Alignment: Center

Product Name
12345
$9.99

Quantity:

This is the coolest product ever made.
You want to buy it. Everybody wants one.

TextWrap: Off
Image Alignment: Left

Product Name 12345 $9.99	Quantity:
This is the coolest product ever made. You want to buy it. Everybody wants one.

TextWrap: Off
Image Alignment: Right

Product Name 12345 $9.99	Quantity:
This is the coolest product ever made. You want to buy it. Everybody wants one.

TextWrap: Off
Image Alignment: Center

Product Name
12345
$9.99

Quantity:

This is the coolest product ever made.
You want to buy it. Everybody wants one.

Don't forget that you can also set the text wrap for the product so that the text will wrap around the graphic, or stay in one column, as shown below:

ShopSite Help and Resource Center
February 13, 2004
Give Feedback