> 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/imagify.md).

# Imagify Feature

## Overview

Briefly, Imagify functionality adds a possibility of partial replacement of parts of an image upon selection in custom option. It is possible to *connect* 2 or more custom options and change certain parts of image upon selection in *connected* options.

## How It Works

### Step 1: enable Imagify feature in [general settings](/uni-cpo-4-documentation/usage/panel/general-settings.md) for this product and add a base image - the image that will be placed below all other *layers*

### ![](/files/-M50Y98qHJacik6eBpGC)

### Step 2: 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. You may use any mode you like.**

Enable Imagify functionality on option-based level:

![](/files/-M50Y98sj-LZXTTG-G7b)

Now add some suboptions, add alt images - these images will be used for Imagify. This is how it may look like:

![](/files/-M50Y98uZEUPWqet2gVH)

So, each layer is a kind of part of the final image. When all such layers are displayed we will see the whole image :)

Save options.

### Final:

This is how the product may look like:![](/files/-M50Y98w6E31XYyaBfcg)My image consists of 2 layers, so I have added 2 custom options. Each Option changes a 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.**