How to Create Layers in Configurator

Go to the Configurator Tab on the left of your WordPress Dashboard and click on Configurator, then click edit configurator.

The same way that you assigned the Configuration to your product, you need to do here as well as mentioned here:

Now that you have put all the required information, then the next step is to Create a Configuration for your product.


First, click the "+ADD" button to add:

GROUP LAYER – you can rename it depending on your product; if you are creating sunglasses, for example, then you can create a group with the name "Lens", "Frame", "Arms", etc.

Second, click the "+" button on the right side of your group layer to add:

PARENT LAYER – you can also rename it, and let's use it again as an example is sunglasses. If you are creating Sunglasses and your first group is Lens, then you can put layers like Black, Blue, Amber, Brown etc.. (you can choose frame styles here)

Third, click the "+" button again on the right side of your new parent layer to add:

CHILD LAYER – you can also rename it, and if you have such a product, then you can add a child into your Parent Layer. But this layer is lease use since the Parent Layer can simply work without the Child Layer.

This is where you will maximize your control options on the right side of your group layer. This option is also the same as the Parent and Child Layers. We will have sunglasses again as an example; you will need to add some details on the control options below. Please see the screenshot below:

  • CHOOSE ICON – You can choose an icon for your Lens category. This will be displayed on the left side of the Lens Title. Please see some screenshot below:

  • LABEL – You can input your label, but this is optional since you have your primary label, which is "Lens", you can leave it blank.
  • COLOR – Customize your desired color for your label, but since it is not necessary to use the label, you can have it default.
  • PRODUCT IMAGE – Set your product image to display on the front-end. This usually takes the part of the Configurator.

  • DESCRIPTION – You can input your description here, and it will appear under your group layer title. See the screenshot below:

    • PRICE – This option is applicable to the parent layer option and will take effect only for the parent layer on the front end. You can leave it blank.
    • ACTIVE ON LOAD – This means that this layer or the product image will be displayed on site load.
    • REQUIRED – This option must be enabled for the group layer category because these parts like Lens, frames, and arms are needed to create sunglasses.
    • MULTIPLE – You can allow this to have multiple selections.
    • HIDE CONTROL – You can hide this and child layers in controls.
    • SWITCH VIEW – Switch to the selected view when the user clicks this control.
    • DESELECT CHILD – Remove all sibling's active layers in this group.

    Below are the options for your product image. You can customize your view, set your coordinates, input the width and height, set your alignment.

Now, you need to add Parent Layers which can be the variations of the Lens category.

Next, you will need to add an icon and product image the same way you added Lens' icon and product image. Please keep in mind that, product image should match your Group's Product Image since this product image will replace the original Group image on the front-end for the user. You can also drag and drop the layers vertically so you can change the order even if something went wrong in creating the Configuration.

And don't forget to enable the Active on Load to set the default product to load.