Briefly, Colorify functionality adds a possibility of coloring parts of an image upon selection in custom option. It is possible to connect 2 or more custom options and change color of certain parts of image upon selection in connected options.
Step 2: prepare .png layers and encode each of them in base64
The image for Colorify functionality is not a single image but 2 or more layer-like images each of which is placed on top of each other. This is an archive with examples of such image-layers. Each layer is a part of the whole image isolated on transparent background.
Next sub step is to encode each such image-layer to base64. It easy to do with this service: b64.io. Just upload your image and get its encoded value. Save the code somewhere, we will need it later.
Step 3: add custom Option, connect it <- re create this step for as many Options as you need
👉 Currently, only Radio Option type can be used for Colorify functionality. Also, you have to switch the Option to Colour mode:
Locate "_Base64 Encoded Image" _setting and paste the code for one of the layers:
Now add some suboptions, choose colour for each of them:
Save this option.
This is how the product looks like in our demo:
My image consists of 4 layers, so I have added 4 custom options. Each Option changes a colour of certain part of the image. I have done step 3 for each of my options.
⚠️ Important: the order of custom options matters! Place your options in the order of the desired appearance of the image parts.