// add color list on product listing

themes/default/css/product_list.css

@@ -146,4 +146,22 @@ ul#product_list {
 		background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
 	}
 	#product_list li .lnk_view:hover {text-decoration:underline}
-	
+
+	#color_to_pick_list {
+		list-style-type:none;
+		width:125px;
+		float:left;
+	}
+
+	#color_to_pick_list li {
+		float:left;
+		clear:none;
+		padding:0;
+		margin-bottom:1px;
+	}
+
+	#color_to_pick_list li a {
+		display:block;
+		height:20px;
+		width:20px;
+	}

themes/default/product-list.tpl

@@ -43,6 +43,7 @@
 				</a>
 				<h3>{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
 				<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
+				{$product.color_list}
 			</div>
 			<div class="right_block">
 				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>