Managing Layers

Managing Layers

Overview

Layers are the visual elements that appear on the product image when customers make selections. You manage all layers in the Layers panel (left side of Calculator Editor → Personalization (Step 4)). Add new layers, position them precisely, stack them in the order you want, and delete layers you no longer need.

Steps

Adding a layer for an option

  1. Under Add layer for option, choose the Option that controls this layer (e.g., Color swatch, Text box)
  2. Click Add

The layer kind is chosen from the option type (image, text, etc.). The layer appears at the bottom of the Layers list. For image layers, set Behavior in Layer Settings to overlay or background swap.

Adding a static overlay

Use a static overlay for an image that should always appear (for example a chair or room prop over a wallpaper pattern), regardless of which option values the customer selects.

  1. Click Add static overlay
  2. In Layer Settings, pick or upload the Overlay image
  3. Position and size it like any other overlay layer

Static overlays are not linked to a calculator option. Prefer a reasonably sized transparent PNG for lifestyle props.

Positioning a layer

  1. Click the layer in the Layers list to select it
  2. In the Layer Settings panel (right), enter X and Y coordinates (pixels from top-left)
  3. Or click Edit on canvas and drag the layer directly in the preview

Sizing a layer

  1. With the layer selected, enter Width and Height in pixels in Layer Settings
  2. Or click Edit on canvas and drag the layer's corners to resize

Reordering layers (Z-stack)

  1. Find the layer in the Layers list
  2. Click the Up arrow to move it higher in the stack (it appears on top)
  3. Click the Down arrow to move it lower in the stack (it appears underneath)

Layers at the top of the list sit on top of the image; layers at the bottom sit underneath.

Removing a layer

  1. Find the layer in the Layers list
  2. Click the Delete (trash) icon

The layer is removed immediately.

Details

Layer numbering — Each layer shows a badge (1, 2, 3, etc.) indicating its position in the stack. Layer 1 is at the bottom, higher numbers are on top. This number also appears in the preview.

Full-screen editing — For precise work, click the Expand workspace icon (top-right of the Layers panel header) to open personalization in a full-screen modal. Press Esc or click Exit fullscreen to return.

Grid overlay — Click the Grid icon in the Layers panel header to show or hide a grid on the preview. Useful for aligning layers.

Live preview — The Preview panel updates in real time as you add, move, size, or reorder layers. Change calculator options to see how layers respond.

Layer naming — Each layer has a default name (the option name). Click in the layer's Label field under Layer Settings to give it a custom name for easier tracking.

Base image — Set the base image in the Preview panel: choose Use Shopify product image or upload a custom image.

Examples

Stack order matters — You have a text layer and an image layer. To show the text on top of the image, drag the text layer above the image layer in the Layers list.

Variant backgrounds — Add a Background swap layer linked to a choice option (Dropdown, Image swatch, and similar). When customers switch values, the entire base image changes. For an Image swatch synced from Shopify product variants, each value uses that variant's featured image automatically — no per-value uploads in Step 4.

Logo placement — Add an image layer for a logo. Use Edit on canvas to drag it to the corner you want, then resize it to match your brand.

Lifestyle prop over synced patterns — Use a Shopify-synced image swatch as a Background swap for wallpaper/pattern variants, then Add static overlay for a chair or room framing image on top. The wallpaper changes with the swatch; the chair stays put.