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 → Optional Features → Step 5: Personalization). Add new layers, position them precisely, stack them in the order you want, and delete layers you no longer need.

Steps

Adding a layer

  1. Click Add layer
  2. Select the Option that controls this layer (e.g., Color swatch, Text box)
  3. Choose the layer Kind:
    • Image — displays an image overlay from the option value
    • Text — displays customer text input as text on the image
    • Background swap — replaces the entire base image
  4. Click Create layer

The layer appears at the bottom of the Layers list.

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 Dropdown for product variants. When customers switch variants, the entire base image changes.

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.

    • Related Articles

    • Working with Personalization Layers

      Overview Layers are the visual elements that appear on top of the product image when customers make selections. In Calculator Editor → Optional Features → Step 5: Personalization, the Layers panel on the left lets you manage all your layers: set the ...

    • Personalization

      Overview Personalization lets customers see a live preview of how their selections change a product's appearance. When customers choose options like colors, swatches, or upload files, those selections appear as layers overlaid on the product image. ...

    • Setting Up Personalization

      Overview Personalization is available as an optional feature in every calculator. Enable it in Calculator Editor → Optional Features → Step 5: Personalization and you'll see a three-panel workspace: Layers (left), Preview (center), and Layer Settings ...

    • Configuring Options

      Overview Once you create a layer, configure how it behaves by clicking it in the Layers list and adjusting settings in the Layer Settings panel (right side). Here you set positioning, sizing, default values, what customers can do, and how the layer ...

    • Multi-Select Options

      Overview Options that allow multiple selections—checkboxes, multi-file uploads, or multi-select swatches—can display multiple layers on the product image. You choose between Slots (filled in order) or Per value (each value has a fixed spot). Each ...