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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kb.moomoo.agency/uni-cpo-4-documentation/usage/colorify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.