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.
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.
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:
Color swatches
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:
Template
There is a full example template available in the app: