Colorify Feature

Overview

This video showcases how the feature works: UniCPO 4 Colorify feature demo

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.

How It Works

Step 1: enable Colorify feature in general settings for this product

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.

Final:

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.