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

  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 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.

    • Related Articles

    • 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. ...

    • Managing clipart and fonts

      Overview Appify CPO ships with a curated clipart catalog and Google Fonts for the Text feature. You can extend both with shop-wide custom assets in Step 5, then limit what appears on each calculator. Configure clipart from the Clipart feature; ...

    • Designer features (left sidebar)

      Overview Features are the tools customers use inside the full-screen editor — adding text, clipart, shapes, uploads, and more. You turn them on and configure them from the left sidebar of Calculator Editor → Step 5 (Designer). Each feature is a ...

    • 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 ...