Recoloring Custom Product Layers On The Fly (M2)

Steps to create “Image” Custom Layer

Click button. The form for creating a new layer has been opened.

Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.

Fill in the following fields in the Settings tab

Title: some title
Type: Image
View: change view
Panel to select: there is no need to fill
Image: You need to upload PNG image with transparency and image positioning

Fill in the following fields in the Advanced tab

Colorize image layer 

You can also recolor simple image components that you upload using layer colorization of HTML5 Canvas. You would need to create a

1. Create a new Panel with the “Color thumbnail” category and add some color options.
2. Create a new custom layer with “Image” type. How to do this, see the tab “Custom Layers”.
3. Choose in custom layer the panel in which the necessary category is located
4. Choose in custom layer the category in which the required option is located with “Color thumbnail” type only.
5. Alpha Transparency: alpha transparency level.

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

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.