How To Create A Simple Color thumbnail/Swatch/Selector In Magento?

Here is a step-by-step tutorial that will guide you on how to create a color swatcher, color thumbnail or color selector or whatever you call it on magento using a configurable attribute and some label trick on the images. When you finished these 10 easy steps, you should have a running color swatcher on your magento store as shown on the screenshot below. You may need to click on the images to get a closer view at the screenshots.

Well, its relatively easy and free because you don’t need to purchase some of those expensive commercial magento color swatcher extensions, you just have to create a configurable product and assigned them with simple products in the magento admin. If you want, you can also download the files that I had modified here by clicking this link

1.) first we need to add a new attribute, go to catalog->attributes-> manage attributes in the magento admin, then click on Add New Attribute button on the top right side and name the attribute code as ref_color

set its attribute properties:

Scope: Global

Catalog Input Type for Store Owner: Dropdown

Unique Value: No

Values Required: No

Apply To: Selected Product Types and then select Simple Product and Configurable Product

Use To Create Configurable Product: Yes

set its frontend properties to:

Use in Quick Search: Yes

Use in Advanced Search: Yes

Comparable on Front-end: No

Use In Layered Navigation: No

Use In Search Results Layered Navigation: No

Use for Promo Rule Conditions: No

Position: 0

Visible on Product View Page on Front-end: Yes

Used in Product Listing: Yes

Used for Sorting in Product Listing: No

Screenshot:

2.) then set the Manage label/options of this attribute by following the screenshot below and don’t forget to hit the Save attribute button

As seen on the screenshot below, you supply the titles to this attribute in the admin and store view, in the admin, i named it as Refer Color and in the store view, Color ,then you supply the color values to it by hitting the Add option button in the manage options section, in my case, i add the blue and orange colors and set blue as the default color.

3.) Now that we had created an attribute, let’s create an attribute set and assign the attribute to it. Go to Catalog->Attributes-> Manage attribute sets and then click on the Add New Set button. You name the attribute set as T-shirts Set and in my case i based it on the Default attribute set as seen on the screenshot below

and then hit the Save Attribute Set button and it will navigate you to the Edit Attribute Set page. In the Groups section, click the Add New button to create a new group and named it as T-shirts properties as seen on the screenshot below.

When the T-shirts properties group is created you assigned the refer_color attribute by dragging the refer_color attribute from the Unassigned Attributes section to the T-shirts properties group. You will see the + icon when you correctly dragged the attribute to the T-shirts properties group as shown below.

4.) Now that we had finished creating the attribute set and assigned the attribute that we created to it, lets proceed in adding a configurable product by going to Catalog -> Manage Products and then click on the Add Product button on the top right of the Manage Products page. In the Create Product Settings, select the attribute set that we created earlier which is T-shirts Set and then choose Configurable Product as the Product Type. Click the Continue button.

In the Configurable Product Settings, select Refer Color by checking the checkbox assigned to it and click on the Continue button.

Then supply product information by filling up the name, description, price and etc. of the product. Don’t forget to assign a Category to it or it won’t appear on the frontend.

When you get to the Images section, you upload the images and label them like this:

as you can see, I labeled the t-shirt images with their corresponding color appended with a “-” and the word “base”, these labels are our basis for determining what product main product image show if a color is selected. The color representing those thumbnails are also uploaded here and we will label them with their corresponding color also appended with a “-” and with the word, “color”, which also serves as our flag in determining that these images represent the color thumbnails/selectors/swatches. You notice also that there is an image that doesn’t have a label, we will code this in the frontend and detect those images without labels as one of the “More Views” or image gallery section of the product page. Don’t forget to hit Save button. What’s nice with this is that we use images to represent the colors which means it can also be applied to what kind of texture or textile design if your store is selling textiles or products that have different textures that needs an image representation to make the potential customers see how the actual color or texture of the product before buying.

Don’t forget also to set the Stock Availability to In Stock in the Inventory section

Click on the Save And Continue Edit button and then go to the Associated Products Section, we have to create and associate a simple product to this configurable product. The simple product is identical to the configurable product, the only difference is that the simple product contains the T-shirt properties on its left side tab/menu. This contains the option to select what color to assigned to a particular simple product.

To create a simple product, click on the Copy From Configurable button.

A pop-up window will appear and you will see that some fields are already filled up because what we did is we copy some attributes of the simple product that we are about to create from the configurable product. I distinguished a simple product by appending the color to its product name. In my case I put (Blue) to its Name

Don’t forget to put a Qty and set Stock Availability to In Stock to this associated simple product!

Now click on the T-Shirt Properties tab and assign color to it, in my case I assigned the color blue to this simple product

Note: You should not set a Category for this simple product in the Categories tab, leave all categories uncheck because we don’t want this associated simple products to appear on the category list in the frontend as independent simple product!

Save the simple product by clicking on the Save button. You do the same step to create the other colors, in this tutorial, we use only the colors, blue and orange, so you create the orange t-shirt simple product like what we did with the blue t-shirt.

When you save the simple product, you would see a message in bold red that says “Links with associated products will retain only after saving current product.” Simply Click the Save and Continue Edit button and you should see the associated products showing up

5.) Alright, we are done tweaking the backend. We had created a configurable product and also created simple products associated to it. We are going to code now the frontend, but first let’s have a preview of what it looks like at the frontend. You should have the same product view that i had as shown below:

Well it looks nothing special actually, I had put some marks/hints to let you understand what we are trying to achieve. I hope this representation helps your understanding.

So we will start to modify now the frontend template. first let us copy the configurable.phtml (if it doesn’t exists in your template) from

app\design\frontend\base\default\template\catalog\product\view\type\options

to your app\design\frontend\<your default package>\<your default theme>\template\catalog\product\view\type\options

You may have to create the folders if they don’t exist. Notice that i put <your default package> and <your default theme>, this pertains to what default theme you are using for your magento store, in my case i use the modern theme which is included in the magento installation. So I copy and paste configurable.phtml to my

app\design\frontend\default\modern\template\catalog\product\view\type\options folder. I had to create the type and options folder since they don’t exist in my template.

Before we modify configurable.phtml let’s modify first media.phtml which is located in app\design\frontend\<your default package>\<your default theme>\template\catalog\product\view folder if it doesn’t exists, you copy it from the base just like what we did with configurable.phtml.

In media.phtml, find this code:

<?php foreach ($this->getGalleryImages() as $_image): ?>
<li> <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li> <?php endforeach; ?>

and replace it with this code:

<?php foreach ($this->getGalleryImages() as $_image):

 //this part gets modified
 if(trim($_image['label'])=="")//if empty image label then this is not a color image, display
 {

 ?>
 <li>
 <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
 </li>
 <?php

 }
 //end of modified part
 endforeach; ?>

what we did is we added a condition to display only the images in the More Views section that have no label

6.) Let’s modify now the configurable.phtml

Find this code in the configurable.phtml, it can be found on the first part of the source code. Anything beyond this code, you may clear them out because we are going to replace any code beyond this code

$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());

put this code just after the code above:

//start of modification

 //get all the media gallery images associated with this product that has a label
 $_gallery = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages();
 $imgcount = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages()->count();
 if($imgcount >1)
 {
 $label_color = array();
 $product_base = array();
 foreach ($_gallery as $_image )
 {
 if(trim($_image['label'])!="")//if image has a label
 {
 $label = ucwords($_image['label']);//get the label text of the image

 $arr_color = explode('-', $label);//broke the label into an array
 $color = ucwords(trim($arr_color[0]));//get the color value, blue or orange
 $indentifier = ucwords(trim($arr_color[1]));//get image identifier, base or color

 if($indentifier=='Color')//if these are the color swatches/thumbnails
 {
 $label_color['color'][] = strval($color);//let's store them to an array
 $label_color['image'][] = strval($this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(35, 35));//small images
 }
 else if($indentifier=='Base')//else this is the product base image
 {
 $product_base['color'][] = strval($color);
 $product_base['image'][] = strval($this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(304, 273));
 }

 }
 }
 }

function findColorImage($value, $arr, $key)
{
 $found = '';
 $total = count($arr[$key]);
 if($total>0)
 {
 for($i=0; $i<$total;$i++)
 {
 if($value == $arr[$key][$i])//if it matches the color listed in the attribute
 {
 $found = $arr['image'][$i];//return the image src

 }
 }
 }
 return $found;

}

?>

<?php if ($_product->isSaleable() && count($_attributes)):?>
 <dl>
<?php
foreach($_attributes as $_attribute)
{
 if($_attribute->getLabel()== 'Color')//if this is the ref_color attribute
 {
 $attribute = $_product->getResource()->getAttribute('refer_color');//load the configurable attribute here which is the refer_color
 $frontend = $attribute->getFrontend();
 $selectOptions = $frontend->getSelectOptions();    //get the frontend labels and values of this attribute
 ?>
 <div><br/><div><h4>Color</h4></div>
 <input name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" type="hidden" value="" /><!-- We set a hidden field here to store the value of the color being selected-->
 <?php
 foreach($selectOptions as $refer_color_properties)
 {
 if($refer_color_properties['value']!='')
 {
 $color_image = findColorImage(ucwords(strval($refer_color_properties['label'])),$label_color,'color');
 if($color_image != '')//if there was an color image being returned
 {
 $product_image = findColorImage(ucwords(strval($refer_color_properties['label'])),$product_base,'color');//get find the product base image for this color
 ?>
 <div id="<?php echo $refer_color_properties['label']; ?>"  onmouseout="style.borderColor='transparent'" onclick="colorSelected('attribute<?php echo $_attribute->getAttributeId() ?>','<?php echo $refer_color_properties['value'];?>','<?php echo $product_image; ?>','<?php echo $refer_color_properties['label'];?>')">
 <?php //display color image
 echo "<img src='".$color_image."' alt='".$refer_color_properties['label']."'/>";
 ?>
 </div>
 <?php
 }
 }
 }
 ?>
 </div>
 <?php
 }
 else//display other attributes
 {?>
 <dt><label><?php echo $_attribute->getLabel();?><span>&nbsp;*</span></label></dt>
 <dd<?php if ($_attribute->decoratedIsLast){?><?php }?>>
 <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>">
 <option><?php echo $this->__('Choose an Option...') ?></option>
 </select>
 </dd>
 <?php
 }
}

?>
 </dl>
 <script type="text/javascript">
 var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
 </script>
<?php endif;

//end of modification

Now the code above will check if there is a configurable attribute called color and display their images instead of the default display of magento which is select box or combo box, otherwise it will display the other configurables in default display of magento

Let’s recap, your configurable.phtml should look like this:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());

//start of modification

 //get all the media gallery images associated with this product that has a label
 $_gallery = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages();
 $imgcount = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages()->count();
 if($imgcount >1)
 {
 $label_color = array();
 $product_base = array();
 foreach ($_gallery as $_image )
 {
 if(trim($_image['label'])!="")//if image has a label
 {
 $label = ucwords($_image['label']);//get the label text of the image

 $arr_color = explode('-', $label);//broke the label into an array
 $color = ucwords(trim($arr_color[0]));//get the color value, blue or orange
 $indentifier = ucwords(trim($arr_color[1]));//get image identifier, base or color

 if($indentifier=='Color')//if these are the color swatches/thumbnails
 {
 $label_color['color'][] = strval($color);//let's store them to an array
 $label_color['image'][] = strval($this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(35, 35));//small images
 }
 else if($indentifier=='Base')//else this is the product base image
 {
 $product_base['color'][] = strval($color);
 $product_base['image'][] = strval($this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(304, 273));
 }

 }
 }
 }

function findColorImage($value, $arr, $key)
{
 $found = '';
 $total = count($arr[$key]);
 if($total>0)
 {
 for($i=0; $i<$total;$i++)
 {
 if($value == $arr[$key][$i])//if it matches the color listed in the attribute
 {
 $found = $arr['image'][$i];//return the image src

 }
 }
 }
 return $found;

}

?>

<?php if ($_product->isSaleable() && count($_attributes)):?>
 <dl>
<?php
foreach($_attributes as $_attribute)
{
 if($_attribute->getLabel()== 'Color')//if this is the ref_color attribute
 {
 $attribute = $_product->getResource()->getAttribute('refer_color');//load the configurable attribute here which is the refer_color
 $frontend = $attribute->getFrontend();
 $selectOptions = $frontend->getSelectOptions();    //get the frontend labels and values of this attribute
 ?>
 <div><br/><div><h4>Color</h4></div>
 <input name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" type="hidden" value="" /><!-- We set a hidden field here to store the value of the color being selected-->
 <?php
 foreach($selectOptions as $refer_color_properties)
 {
 if($refer_color_properties['value']!='')
 {
 $color_image = findColorImage(ucwords(strval($refer_color_properties['label'])),$label_color,'color');
 if($color_image != '')//if there was an color image being returned
 {
 $product_image = findColorImage(ucwords(strval($refer_color_properties['label'])),$product_base,'color');//get find the product base image for this color
 ?>
 <div id="<?php echo $refer_color_properties['label']; ?>"  onmouseout="style.borderColor='transparent'" onclick="colorSelected('attribute<?php echo $_attribute->getAttributeId() ?>','<?php echo $refer_color_properties['value'];?>','<?php echo $product_image; ?>','<?php echo $refer_color_properties['label'];?>')">
 <?php //display color image
 echo "<img src='".$color_image."' alt='".$refer_color_properties['label']."'/>";
 ?>
 </div>
 <?php
 }
 }
 }
 ?>
 </div>
 <?php
 }
 else//display other attributes
 {?>
 <dt><label><?php echo $_attribute->getLabel();?><span>&nbsp;*</span></label></dt>
 <dd<?php if ($_attribute->decoratedIsLast){?><?php }?>>
 <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>">
 <option><?php echo $this->__('Choose an Option...') ?></option>
 </select>
 </dd>
 <?php
 }
}

?>
 </dl>
 <script type="text/javascript">
 var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
 </script>
<?php endif;

//end of modification

?>

7.) Next let’s modify view.phtml which can be found on your app\design\frontend\<your default package>\<your default theme>\template\catalog\product folder, I am using magento’s modern theme so i can find the view.phtml in

app\design\frontend\default\modern\template\catalog\product folder

find this code which can be found as the first lines of the phtml

$_helper = $this->helper('catalog/output');
 $_product = $this->getProduct();

and put this javascript code right after the code above:

<!-- code added for color thumbnails -->
<script type="text/javascript">
 function colorSelected(id, value, product_image_src, color_div_id)
 {
 var base_image = document.getElementById("image");
 base_image.setAttribute("src", product_image_src);//display product base image of this color
 document.getElementById(id).value = value;//set the value of the hidden field
 setBorder(color_div_id,'2px solid #666');
 }

 function setBorder(id, value)
 {
 document.getElementById(id).style.border=value;
 }

</script>
<!--- end -->

8.) We are almost through, one last css code to place on your style.css which can be found on your skin\frontend\<your default package>\<your default theme>\css folder, I am using the modern theme of magento so my style.css can be found in

skin\frontend\default\modern\css

put this on the bottom of your css:

/*Color thumbnails CSS*/
.inlinebox {
display: -moz-inline-stack;
border:2px solid transparent;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
min-height: 35px;
_height: 35px;
cursor:pointer;
}

9.) Refresh your cache by going to the admin section and click on the menu, System -> Cache Management and check all the checkbox in the Cache Storage Management and select Refresh on the combo box and press submit. Click also the Flush Javascript/CSS Cache

10.) It’s finished and go to the frontend and view the product. You now have a simple but effective color selector/swatcher/thumbnail or whatever you call it in your magento store!

If you like this guide and wanted to copy or use it on your blog or website, you are free to distribute and share as you wish and please don’t forget to link to my original article or my website if possible which is Eat These Code Snippets, thanks!