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
Automatically
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 Name | Description |
| MultiColorMakesSwatchAndMap | Setting 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 9.0.1.3: 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 9.1.0.1+: CANCEL or Close out the main product image window at this point, or the image map will remain blank.
Manually
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 Name | Description |
| 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.
Automatically
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.
Manually
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">
</map>
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:
