search on color store feature

Search Products on Color part 2

Going back to my previous post on Color Search, where I described how to add Shop by color feature to your store. Doesn’t really matter if it is Cafepress store you’d like to add this extra Search function or to your blog…

So how practically you can add Search on color feature to your website?

Very simple!

    1. Make search on colors you want to suggest to your customers on your website and save all links which lead to this products on a certain color.
    2. Add this code snippet in your HTML ( in place you want this color chart to appear:
<pre><div style="text-align:center;">
<a style="text-decoration:none;background:#B30302;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_red"></a>
<a style="text-decoration:none;background:black;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_black"></a>
<a style="text-decoration:none;background:grey;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_grey"></a>
<a style="text-decoration:none;background:#ABF0D1;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_mint"></a>
<a style="text-decoration:none;background:#FFF4D6;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_cream"></a>
<a style="text-decoration:none;background:#FCCED0;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_pink"></a>
<a style="text-decoration:none;background:#8A0034;display: block;float:left;width:35px;height:35px;margin-right:3px;" href="http://www.cafepress.com/technotextnl/s_cranberry"></a>
</div>
 <div class="clear">&nbsp;</div></pre>

3. Don’t forget to replace my search on color links to yours and remove¬† pre tags! Save your changes.
The color chat will appear:

shop-by-color

You can see live example of Search on color in my Cafepress Store

This simple HTML snippet is actually a list of links, displayed as the blocks of color. Don’t forget to replace my search on color links to yours!

Of course you can style this snippet further, laying color boxes in pairs, making color boxes smaller, the options are endless, just make some changes in this HTML snippet.

 

 

 

Save

Save

Advertisements