Add Color Selections on Category Pages

I would like to be able to show a preview of available colors for a product on the category listing page. You did it with the JM Sporty theme. For example, when you roll over the product images on this page…p/running.html you can see how the color selections are visible. I would like to do the same thing with the JM Crafts. Here is a page example that I would like to do this with…gapanthus.html

2 answers

Profile photo of Sherlock 0.00 $tone October 1, 2013

Hi mate,

At the demo of jm sporty as you have seen, if a product has various colors then we would need to separate that product into various products (each product for a color) and those products are related, if you already have products scheme like that then you can pm me your FTP Info as well as the admin account and I will try to implement this for you

Profile photo of Sherlock 0.00 $tone October 4, 2013

Hi toprock,

you can try as following
1) install the JmColorSwatch extension that I attached here, after installing you go to back-end of the extension to enable it

2) open the file of app\design\frontend\default\jm_craftstemplate\cat alog\product\list.phtml there you look for this snap of code

HTML Code:

<h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>">
				<?php $pname = $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
					if (strlen($pname) > 30) :
						echo strip_tags(substr($pname, 0, 20)).'...';
					else : 
						echo $pname;

right above it you add this code

PHP Code:

  <?php if($_products Mage::helper("jmcolorswatch")->getRelatedproducts($_product->getId())){  ?>

                                    <span class="productgaleries"> 




                                             <?php foreach ($_products as $_item): 

$_item Mage::getModel('catalog/product')->load($_item->getId()); 


                                                <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_item->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item'thumbnail')->resize(56,56?>" width="56" height="62" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" /></a>


                                             <?php endforeach; ?>


                <?php ?>

3) Finally you open the style file of skin\frontend\default\jm_crafts\css\styles.css to add these css rules

HTML Code:

	bottom: 95px;
    display: block;
    left: 44px;
    margin: 0 auto;
    position: absolute;
    width: 200px;
.products-grid .productgaleries img{
	width:auto !important;
.products-grid .productgaleries .product-image{
	display: none;
	float: left;
	width: 32%;
.products-grid li.item:hover .productgaleries .product-image{
	display: block;

I hope this helps !


Please login or Register to Submit Answer

Written By