The Color Detection feature in the Product Designer allows users to detect and convert colors from uploaded images(Raster Images). This functionality enhances design flexibility by enabling precise color management directly within the storefront.

This guide outlines the steps to configure and enable Color Detection from the admin panel, activate it at the product level, and utilize it on the storefront. By following these steps, you can offer a seamless and dynamic color conversion experience to both registered and guest users.

To enable the Color Detection feature, navigate to Stores > Configuration > Product Designer Settings. [1]

Then, scroll down to the Image Color Conversion section and configure the following settings:

Enable Image Color Conversion: Select Yes from the dropdown to activate image color conversion.

Enable Image Color Conversion for Guest Users: To allow guest users to access this feature, select Yes in the dropdown menu.

Image Color Conversion Guest User Message: Enter the message that will be displayed to guest users on the storefront.

Image Color Convert API URL: Provide the API URL used for color conversion.

X-CREDITS-CODE: Enter your valid X-CREDITS-CODE for authentication.

Max Color: Specify the maximum number of colors to be used in the conversion process.

Select Mode: Choose the desired mode for color conversion.

In the Image Color Conversion Message subsection, configure the messages that will appear during color conversion warnings.[2]

Raster Image Color Detection Message: Enter the message that will be displayed when the system detects colors in a raster image.

Image Color Manipulation Message: Enter the message that informs the user that the color conversion will be based on the image frame.

Max Color Warning: Enter the warning message that will be displayed when the image exceeds the maximum allowed number of colors.

After completing all the configurations, click the Save button to apply the changes.

In the Designer Tool, upload the image from the Upload tab to begin the Color conversion process. After the image is added to the canvas, use the Edit option. [1]

A Operations sub tab appears here click on Edit Image button.

A Convert Image Color pop-up appears with following options: [2]

Keep Original: Uploads the image without any changes.

Remove Image Background: Removes the background from the uploaded image.

Remove All White: Initiates the image color conversion process.

Select an option and click on the Remove and Preview button.

To convert the image colors, select the “Convert into Color Count” option. All detected original colors will appear along with a color picker, allowing you to adjust or replace them as needed. Live preview will be displayed on the left side of the pop-up. [3]

Click on the color picker, and a color picker pop-up will open. The customer can select a color from the backend-enabled colors. After selecting the color, click the Back button to return. [4]

Once the colors are selected, click the Apply button to apply the converted colors to the image. The updated preview will then be displayed on the canvas. [5]