Display Color Swatch

My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color swatch that let's the customer's know what colors that item comes in. Thus, if an item comes in Black, White and Blue they want to display a small black rectangle, a small white rectangle and a small black rectangle on all versions of the product. Is there a way to do that?

There is always a way. But that will require custom coding as there is no such options in HikaShop.

I figured as much. Can you give me some advice on how to approach this? One thing I was thinking was to name the graphics the same name as the variant itself, but in looking at it, I don't think that will work. Any thoughts on what would be a good approach for doing this?

You should edit the file "show" of the view "product" via the menu Display>Views and loop through the $this->element->main->characteristics array to display all the images of the values of the characteristics.

However, won't that also show the large pictures that are shown when we select "white" as a color? Or is there another place to add these pics?

Have a look at cma.mtsidevspace.com/index.php

Select Men's Apparel

Select Graphic Tees

Select CM Bars

Now you see it is black. Now select Heather Gray and X-Large and see it change to gray.

Won't that feature change if I change the code as you suggest?

We're talking about having color images somewhere and displaying them with additional custom code on the product page based on the characteristics of the product.
That is not linked to the display of the images of the product/variants done by HikaShop by default. So that feature should not be impacted by the code you will add.

FYI: The following CSS will add a small color swatch to the dropdown select box.

Modify the characteristic number, option value number, and image names to match your configuration. The images are 28 x 14.

A word of warning: This works fine for Firefox 11, but not IE 9, Chrome 18, or Safari 5.

Here is another approach which works with Firefox, IE, Chrome, and Safari. Rather than using a swatch image, it just sets the background of the select option.