Implementing selection of dimensions using images, in addition to combo-box, can be done without having to modify any data or settings. Here is an example:

We have a few products having a product data class, say, Leather Sofas. There are two dimensions, Base Color and Body Color, to which you want to provide images for selection. Here are the steps:

(1) In the document folder of the business (usually, da/docs/x650521 where 650521 is the business id), create a sub-folder with the same name as the Product Data Class.

Doc folder:  \usr\tomcat\webapps\da\docs\x650521
Create       \usr\tomcat\webapps\da\docs\x650521\Leather Sofas
      

(2) Load the images depicting the dimensions into this folder ensuring that the names of the image files follow the following convention:

<name-of-the-dimension>__<value-of-the-option>.jpg

That is: name of the dimension followed by __ (two underscores), followed by value of the option, followed by .jpg.

Base Color__Pine.jpg
Base Color__Walnut.jpg
Base Color__Teak.jpg

Body Color__Dark Black.jpg
Body Color__Milano Copper.jpg
Body Color__Shocking Pink.jpg
Body Color__Bright Orange.jpg

That's all there is to it. You are done!

Important Notes: All the file and directory names are case-sensitive and they cannot have the characters / or \. If your Class or Dimension contains any of these characters, simply ignore them while creating the folders and files. System will automatically pick up the right image.

For instance, if your Class name is Sofa/Beds, the folder name should be SofaBeds. Similarly, if your Dimension is Body/Back Color, change the file prefix to BodyBack Color__.

Also, always avoid multiple spaces in any name as it makes it extremely difficult to troubleshoot, if there are any problems.