> For the complete documentation index, see [llms.txt](https://kb.moomoo.agency/uni-cpo-4-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.moomoo.agency/uni-cpo-4-documentation/usage/colorify.md).

# Colorify Feature

## Overview

This video showcases how the feature works: [UniCPO 4 Colorify feature demo](https://www.youtube.com/watch?v=-6_CBPuD1w4)

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](/uni-cpo-4-documentation/usage/panel/general-settings.md) 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](http://bit.ly/2F871rf). 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](http://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&#x20;*****Colour*****&#x20;mode:**

![](/files/-M50Y7ItxlnvKoUazB5y)

Locate "\_Base64 Encoded Image" \_setting and paste the code for one of the layers:

![](/files/-M50Y7IvtYgnyrlJFJq6)

Now add some suboptions, choose colour for each of them:

![](/files/-M50Y7IxHW_rjF55yvI1)

Save this option.

### Final:

This is how the product looks like in our demo:

![](/files/-M50Y7IzQtSggsPKExe0)

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.**