Installation & Setup

Before creating a configurable product, keep these important points in mind:

Use only PNG or WebP formats for your images.
Layers in the configurator are arranged from top (highest layer) to bottom (lowest layer). This order is set in the Image Configuration Field.

After installing the plugin, you can begin creating your configurable product. In this example, we’ll show how to set up a customizable t-shirt, as you can see in our demo.

Step 1: Create a Gravity Form Field

Each image layer is linked to an attribute value, and when a user selects an option, the corresponding layer is displayed.

To begin, we’ll create two fields. In this example, our product will use two attributes:

Color
Design

Each attribute includes multiple options. For example, the Color attribute has 3 options, and the Design attribute also has 3 options.

Normally, you would need to manually create 9 final images (3 × 3 combinations) to cover every possible combination. However, with the Image Configurator plugin, you only need 6 images (3 for colors and 3 for designs).

This becomes even more efficient as you add more fields, because the number of images required is greatly reduced.

Example: If you add a third attribute, such as Size with 4 options, you would normally need 36 images (3 × 3 × 4). But with the image configurator, you only need 10 images (3 colors + 3 designs + 4 sizes), making the process much simpler and more manageable.

Step 2: Prepare the configurable product image layers

Before configuring the Image Configurator, you need to prepare your images correctly. Each visual element (such as colors, logos, or parts of a product) should be exported as a separate transparent layer.

Using a design tool like Figma makes this process simple

Why This Step Is Important

The Image Configurator works by stacking multiple image layers on top of each other. For this to work correctly:

All images must align perfectly
Each variation must be isolated
Backgrounds must be transparent

If layers are not prepared properly, the final preview may appear misaligned or broken.

Step 2.1: Set Up Your Base Frame

Open your design file in Figma
Create a frame with a fixed size (for example, 400 × 300 px)

3. Set background as transparent: Select the frame, click on the fill color setting on the right sidebar and set the opacity to 0.

Step 2: Separate Each Layer

Break your design into individual layers. Each configurable element should be isolated.

Examples:

Color variations (red, blue, black)
Logos or graphics
Accessories or add-ons

Each of these should exist as a separate layer in your design file.

Step 3: Align All Layers Consistently

All layers must be perfectly aligned within the frame.

To ensure this:

Do not move elements between exports
Keep everything positioned relative to the same base frame
Avoid resizing or cropping inconsistently

A small misalignment will become very noticeable when layers are combined.

Step 5: Export Each Layer

Export each layer individually:

Select the layer you want to export
Scroll to the Export section in Figma
Choose:
- Format: PNG (recommended for transparency)
- Scale: 1x or 2x depending on your needs
Click Export

Repeat this process for every layer.