Monogrammed Bath Towel Set

I put up more products with geometric pattern design. This time bathroom accessories: shower curtain, bathmat, towels, all with this geometric black beige pattern. This towel set comes with custom monogram:

Search Products on Color part 2

search on color store feature

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

Cafepress Store – Shop by Color Feature

There is a thing with my Cafepress store that it lives on its own because there is no traffic to it sometimes and all sales I got on Cafepress so far, went through the “Cafepress Marketplace”.  But sales or no sales, I like to have this store  to test simple code snippets to get the store to look pretty and functional at the same time. So today I make myself happy introducing Shop by color feature:

shop-by-color

So far there are seven most popular gift colors in this little swatch but now I think I will add some more colors to it and may be to go further and will add some kind of image map of designs. Very excited about it!

You are welcome to pick this idea for your own store!

Save