Change the background color of Zazzle product links to match your website theme

Today a Zazzle shopkeeper posted a comment on this blog that led me to create a new Zazzle tutorial for you.

Anonymous said... hi, great advice, is there a way to change the background colour of the products? my t-shirts come up great using your methods but they have a white background which doesn't match my website theme. Thankyou

This is a great question and yes you can change the background color of Zazzle product links to match your website theme. To show how it's done I will use the Retro Town blog as an example. The background used is a Cream/Beige color.

If I add a Zazzle product link as is to the blog it will not look very good but if I make a small addition to the code the image will match the page nicely.

To match this we need to know the HTML (HEX) color code. We can find the code by digging through our site's theme template or even easier by using a color picker program. I use Colorname which runs on Linux systems. There are many free colorpicker programs (googled it for you) so you should be able to find one that runs on your operating system. Usually they have an eydropper tool which lets you click on the part of an image you want to find the color code of.

Now I know that Retro Town has the color code F0F7B7 what next? Below is a Zazzle product code without the divs. Notice the .jpg at the end of the image part of the code.

<a href="http://www.zazzle.com/50s_retro_travel_speaker-166486872903902484"> <img src="http://rlv.zcache.com/50s_retro_travel_speaker-p166486872903902484envro_325.jpg" alt="50&amp;#39;s Retro Travel Speaker" style="border:0;" /> </a>

To this add (without spaces) ?bg= plus your color code, in my case it's F0F7B7.

<img src="http://rlv.zcache.com/50s_retro_speaker-p166486872903902484envro_325.jpg?bg=F0F7B7

That's all there is to it! If you have any questions or my instructions are confusing just ask in the comments and I'll be glad to help.