How can I change to color of an image?

If you want to allow your customers to freely select a color and update the preview image, follow the steps below. 

Example

Colorize

The app supports two different methods of colorizing an image overlay.

1) Image colorize:

For image colorization, the app replaces all white pixels with the selected color.  It is recommended to create a separate image overlay with just the white part that should be colorized:

Note: this image is just an illustration with transparent parts, a real transparent version can be found here. 

2) SVG colorize:

For SVG colorization, the app replaces the fill color of all the elements inside the SVG.  You can use any kind of shape and color:

Note: this image is just an illustration of an SVG, a real SVG version can be found here. 

Setup

Color option

Create an option of type Color and enter a name: 

You can also use color swatches with pre-configured color codes:

Overlay Layer 

In the live preview config, create a new layer of type Overlay, upload the image with the white parts, and connect it to the color option:

Overlay values Layer

If you want to colorize the multiple layers using the Overlay values layer, you can reach out to our support and request to enable the colorize feature on this layer.

Template

There is a full example template available in the app: