Visual Options

The module allows you to configure visual options so that your customer can pick product options and see a direct preview of these options

This is useful when your product is comprised of different customizable parts

To start, open the product edit page then open the “Product Options” tab


  • The first step is to add a layer group which will multiple layers

A layer has many properties like the image (that will be displayed in the design area), the icon (which will be displayed in the options tab) and the color (which can replace the icon)

You can modify the group label and add more layers as needed

  • Add other layers and configure an image and an icon or color for each layer

The module will superpose the layers in order to form the preview, so your layer images must contain transparent areas in order to show the layers beneath them

It’s very similar to Photoshop layers

You can reorder the layer groups by dragging the sort handle

You can also sort layers the same way


The interface will look like this

The example above has 3 groups, so 3 layers can be used to create the preview.

Here’s some layers examples to showcase the use of transparent backgrounds




Was this article helpful to you? Yes 1 No