Customization - Recoloring Custom Product Layers On The Fly

Custom Product Builder allows you to colorize images on the fly without adding colorized options, all you need is a white image of your product and this instruction.

To use the recolor function, follow these steps:

1. First of all, you need to create a Category that will be used for recoloring the image layer, use "Color Thumbnail" category. 

Please read this article Customization - Color Thumbnails. Product options listed as HEX. (i.e: Colors) to create the category.

2. The second step is to create a custom layer that will be used to preview the product image.

Fill in the following fields in the Settings tab

1. Title: some title. the more descriptive the better.
2. Type: Image
3. Image: You need to upload PNG image in the same way you upload images for the preview inside of Category Options.
4. Go to Advanced tab.

In advanced tab please Enable the Colorize Image Layer. 

Fill in the following fields in the Advanced tab

• Colorize image layer  [  o]  Enable.
• Choose in custom layer the panel in which the necessary recolor category is located. 
• Choose in custom layer the category in which the required option is located with “Color thumbnail” type only. (Created in step 1 at the top of the page).
• Blend mode: There are four modes of recoloring in Custom Product Builder.

1. Normal - Edits or paints each pixel to make it the result color.
2. Luminosity - Creates a result color with the hue and saturation of the base color and the luminance of the blend color.
3. Multiply - Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you’re painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple marking pens.
4. Screen – With Screen blend mode, the values of the pixels in the two layers are inverted, multiplied, and then inverted again. The result is the opposite of Multiply: wherever either layer was darker than white, the composite is brighter.

• Blend Strength: Transparency level. Goes from 0 to 1, which translates to 0% to 100% opacity.
• Save.

Now, the functionality is ready to use. Switch colors and your image will be painted in the right color without the need to upload new images.

Overlaying textures

First of all, prepare the image.

Next, create a new category "Image Thumbnails" and add an option with our pattern. 

Also add a category with colors for coloring.

Now you need to add a new layer, fill in the required fields, configure the logic, load our pattern and bind a category for coloring.

That's it, here is the result.

Changing the colors of individual elements

 

IMPORTANT:  To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.