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 base image, add layers for each option, reorder them, and remove layers.

Setting the Base Image

The base image is what all layers appear on top of. You have two choices:

Use Shopify product image — The default product image from the product page. The app automatically detects and syncs with the product image on most themes. If a customer changes the variant, the base image updates accordingly.

Use custom image — Upload your own background image to use instead. This is useful if you want a different presentation or if your theme isn't compatible with automatic product image detection.

Adding Layers

To add a layer:

1. Click Add layer

2. Select which Option drives this layer (e.g., a Color swatch, Text box, or File upload)

3. Choose what Kind of layer it is:

   • Image — the selected option value appears as an image overlay
   • Text — the customer's text input appears as text on the image
   • Background swap — the selected option replaces the entire base image (useful for product variants)

4. Click Create layer

The layer appears in the list. By default, layers are stacked in the order you create them (later layers appear on top).

Ordering Layers (Z-order / Stacking)

Layers closer to the top of the list appear on top of the product image (higher z-order). To reorder:

1. In the Layers panel, find the layer you want to move
2. Click the Up or Down arrow button to move it in the stack
3. The preview updates in real time

Example: If you have a text layer and an image layer, and you want the text to appear on top of the image, make sure the text layer is listed higher in the panel.

Layer Display Labels

Each layer shows a number badge (1, 2, 3, etc.) indicating its position in the stack. Layer 1 is at the bottom, and higher numbers are closer to the top. This label also appears in the preview canvas so you can see which layer you're editing.

Removing Layers

To delete a layer:

1. Find it in the Layers panel
2. Click the Delete (trash) icon

The layer is removed and no longer appears on the preview.

Layer Settings

Click on any layer in the list to select it. The right panel (Layer Settings) shows configuration options specific to that layer type:

• Position — Where the layer appears on the image (X and Y coordinates)
• Size — Width and height
• Rotation — Angle in degrees (for text and image layers)
• Arc curvature — For text layers, curves the text along an arc
• Default image / Default text — What the layer shows when no option is selected
• Customer controls — Whether customers can change position, size, or rotation on the storefront

See Configuring Personalization Options for details on per-option layer settings.

Previewing Layers

The center panel shows a live preview of your personalization setup. As you:

• Add or remove layers
• Change positions and sizes
• Reorder layers
• Select different options or values in the calculator

The preview updates in real time. Hover over a layer in the preview to see which option it's connected to. Drag layer handles to adjust position and size directly in the preview (if you've opened the layer editor).

Full-Screen Editing

For precise positioning, click the Expand workspace icon (in the top-right of the Layers panel header) to open the personalization editor in a full-screen modal. This gives you more space to see the preview and adjust layer settings. Press Esc or click Exit fullscreen to return to the normal editor view.

Grid Display

When editing layers, you can toggle a grid overlay on the preview to help with alignment. Click the Grid icon in the Layers panel header to show or hide the grid.

Related Docs

• Personalization
• Configuring Personalization Options
• Personalization Multi-Select Options