Product Colorizer: Preview a Product in Different Colors

What sounds like a complicated tool is actually pretty simple with the Product Colorizer plugin. This lightweight solution allows users to quickly preview a product in different colors.

The plugin uses only two images per product to create the effect comes with a quite easy setup. The plugin works in all major browsers including IE7+ (and will work with IE6 if you use a png fix). Preparing files for use with the colorizer requires a few steps, but is no trouble once you get the hang of it.

After you download the plugin files and load them to your website, you need to get your image files ready to be colorized. You’ll need two images — one that includes the product in a base color and one with a color mask that shows color change for the different areas. (This works great for a product such as the t-shirt in the example, where you might sell items with the same graphic in different colors.)

The demo includes detailed instructions on how to prep the images and format the HTML for this color change. Product Colorizer works with as many colors as you need and is a great tool for web-based shops.