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
This example shows how to test to see if a product image is defined and enabled, and then display the image.

    [-- IF PRODUCT.DisplayGraphic--]
    [-- IF PRODUCT.Graphic --]
    [-- PRODUCT.Graphic --]
    [-- END_IF --]
    [-- END_IF --]

Example 2: Specify Some Image Attributes
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.

    [-- IF PRODUCT.DisplayGraphic--]
    [-- IF PRODUCT.Graphic --]
    <img [-- PRODUCT.Graphic Remove_HTML --] align="left">
    [-- END_IF --]
    [-- END_IF --]

Example 3: Specify All Image Attributes
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.

    [-- IF PRODUCT.DisplayGraphic--]
    [-- IF PRODUCT.Graphic --]
    <img src="media/[-- IMAGE PRODUCT.Graphic --]" align="left" border="0" alt="Click for more information">
    [-- END_IF --]
    [-- END_IF --]

Example 4: Product Image with Link to More Info 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.

    [-- IF PRODUCT.DisplayGraphic--]
       [-- IF PRODUCT.Graphic --]
          [-- IF PRODUCT.DisplayMoreInformationPage --]
             <a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a>
          [-- ELSE --]
             [-- PRODUCT.Graphic --]
          [-- END_IF --]
       [-- END_IF --]
    [-- END_IF --]

Example 5: Product Image with Alignment
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.

    [-- IF PRODUCT.DisplayGraphic--]
    [-- IF PRODUCT.Graphic --]
    <img [-- PRODUCT.Graphic Remove_HTML --] align="[-- PRODUCT.ImageAlignment --]">
    [-- END_IF --]
    [-- END_IF --]
Return To: Product Template Home Page