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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s