Looking for the v10 manual? Visit our new user's guide!
Search Descriptions Version
This article applies to: MultiStore

Swatch Images

Product detail pages can have multiple images, which allows customers to get a better idea of what they're buying or view alternate versions of the product (for example, sizes or colors).

One way to allow customers to change between those images is with a swatch image. A swatch image is made up of multiple regions, with each region representing a different alternate image for the product. An image map is overlaid on the swatch image, so when customers click a region of the swatch, the appropriate alternate image is displayed. For example, if a product had the following 3 images:

A swatch image might look like this:

The red image might be the default main image for the product detail page, but if a customer clicks the green section of the smaller swatch image, the main image will change to the green image.

Creating swatch images and image maps is explained below.

Creating Swatch Image

The software has the ability to create swatch images automatically as you upload images. To enable this, the following AppConfigs need to be configured:

AppConfig NameDescription
MultiColorMakesSwatchAndMapSetting this to true enables the auto-swatch feature. The software will create swatch images automatically as product images are uploaded, using the setting below as guidelines.
SwatchStyleAuto This setting determines the width and height of the automatically generated swatch image (each section). For example, when uploading the 3 larger images shown above with a setting of "width:25;height:25;" would result in a swatch image with each section (red, green, and blue) 25x25.

After configuring these AppConfigs, navigate to the product variant in Product Manager and set the available colors on the Attributes tab:

Once that's done, navigate to the parent product level and open the "Large Multi-Image Manager" window on the Images tab:

Use the 'Browse' buttons to find the images you want to upload - the default image, and one row for each color you created.

After selecting the desired images, click 'Update' at the bottom, and then close the image popup window.

For editions Click 'Update' again at the bottom of the parent product window, and you'll see that the swatch image and image map were created.

IMPORTANT: For MultiStore CANCEL or Close out the main product image window at this point, or the image map will remain blank.

If you don't want the software to create swatch images automatically, you can create them manually and upload them through the images tab in Product Manager:

If you upload swatch images this way, the software will resize them according to the AppConfig below:

AppConfig NameDescription
ProductImg_swatch This setting determines the width and height of the uploaded swatch image. A setting of "width:150;height:50;" would resize the uploaded image to 150x50 (total size).

NOTE: Manually uploading swatch images also requires manually creating the image map. See below for details.

Creating an Image Map

Image maps let the product detail page know which image to display, based on where the customer clicks on the swatch image. These can be automatically generated by the software, or created manually.

In order to automatically create the image map, the software must also be in control of creating the swatch image. See the section on Automatic Swatch Image creation above. When those directions are followed to create the swatch images, the image map will be created as well.

Image maps can be thought of as a translucent layer that sits 'on top' of the swatch image. Pixel regions are defined that align with each section of the image map. When a customer clicks on a certain region of the swatch, the image map knows which image is associated with that section of the swatch, and the page displays the appropriate image.

An auto-generated image map for the colors above (assuming each section is 30 pixels wide and 15 high) might look like this:

<map Name="SwatchMap">
   <area href="#" onClick="setcolorpic_7('Red')" shape="rect" coords="1, 1, 30, 15">
   <area href="#" onClick="setcolorpic_7('Green')" shape="rect" coords="31, 1, 60, 15">
   <area href="#" onClick="setcolorpic_7('Blue')" shape="rect" coords="61, 1, 90, 15">

Each section is defined by 4 numbers:

First number - Upper left horizontal boundary
Second number - Upper vertical boundary
Third number - Upper right horizontal boundary
Fourth number - Lower vertical boundary

In this way, adjacent rectangles can be defined for each pixel region. Additional information on creating image maps can be found here.

After generating your image map manually (this can be done with assistance from 3rd-party applications like Dreamweaver or Frontpage, or in a simple text editor like Notepad), copy the code for the image map into the appropriate field on the Images tab in Product Manager and click Update: