Custom Product Templates: Product Graphic

Displaying the product graphic in your product template is relatively simple. It mostly involves testing to make sure that the graphic exists and then placement next to other product elements.

• A merchant may define a graphic, but then choose not to display it. Or, a merchant may choose to display a graphic but then forget to select one. Your template should check for both of these conditions.
• If a product has a More Info page, customers generally expect the graphic to be a hyperlink to that page.
• If you choose to let the merchant select left, right, or center alignment for the graphic, your template may be a bit more complicated than if you force a particular location for the graphic.
• Merchants can also select whether they want a long product description to wrap under the graphic or not. You can simplify your template by hard coding the layout one way or another.

Example 1: Display a Product Image Resulting Page

This example shows how to test to see if a product image is defined and enabled, and then display the image.

Example 2: Specify Some Image Attributes Resulting Page

This example shows how to specify some image attributes for a product graphic. Using the Remove_HTML attribute with the [-- PRODUCT.Graphic --] tag leaves all the merchant-defined image attributes, but also lets you specify additional attributes. This example sets left alignment for the image.

Example 3: Specify All Image Attributes Resulting Page

For full control over image attributes, you can use the [-- IMAGE Product.Graphic --] tag, which only returns the path and file name of the image.

Example 4: Product Image with Link to More Info Page Resulting Page

This example tests to see if a product has a More Info page defined. If it does, the template makes the product name and graphic into hyperlinks.

Example 5: Product Image with Alignment Resulting Page

Using the merchant-defined image alignment is fairly easy, though you may have to work with it a bit to get the text wrap effects that you want.

Example 6: Product Image with Text Wrap Resulting Page

Allowing the merchant to turn text wrap on and off requires using a table layout or some CSS attributes. This example uses a complex set of IF tests and variables to set up the image layout. It uses an HTML table if text wrap is off, that is, if the product description is not supposed to wrap under the picture.