Layer Settings

Layer Settings

Overview

Select a layer in the Layer stack, then use the Layer settings panel on the right of Calculator Editor → Personalization. Sections appear or hide based on layer type (text, image, static overlay, multi-select). Setting names below match the labels in that panel.

Quick Reference

Layer settings

These controls sit at the top of the panel for every layer:

Setting What it does
Layer name Label shown in the Layer stack
Visible in preview When off, the layer is hidden in the admin preview and on the storefront
Edit on canvas Switches the preview into drag/resize mode (button reads Exit edit while active)

Text

Text layers only.

Setting What it does
Default preview text Text shown before the customer types anything
Font family Default font. Disabled when a Font source is linked
Size (px) Default font size. Disabled when a Font size source is linked
Default color Default text color. Disabled when a Color source is linked
Alignment left, center, or right

Image

Image layers (including static overlays). Not every control appears for every image layer.

Setting Options / notes
Behavior when a value is selected Show as overlay layer (positioned on top) or Swap the canvas background image. Option-driven image layers only — not shown for static overlays
Shape Rectangle (no mask), Circle / oval, or Custom mask image (upload a PNG; transparency defines the visible area). Overlay layers and static overlays
Image fit Cover (fill the area, crop overflow) or Contain (fit the whole image inside). Only when behavior is Swap the canvas background image

Static overlays use overlay positioning; they do not offer background swap.

Multi-select layout

Shown when the source option allows multiple selections and the layer is an image overlay. Help for this section opens Multi-Select Options.

Setting What it does
Mode Slots — fill in selection order or Per value — each value has a fixed spot
Slot count Number of slots when mode is Slots — fill in selection order
Arrange in a row Button that lays out slots in a horizontal row

Default position & size

Shown for text layers and image overlay layers (hidden when the layer swaps the canvas background). For multi-select image overlays the heading reads Default / fallback position & size.

Values are percentages of the canvas (0–100).

Setting What it does
X / Y Center of the layer on the canvas
Width / Height Layer size
Lock ratio Keep width and height proportional when resizing
Rotation (°) Tilt angle
Arc curvature Text layers only — curve text along an arc

Use Edit on canvas to set these visually.

Allow customer to

Shown for text layers and image overlay layers. Not shown for background-swap layers or static overlays.

Image layers:

  • Change image position (drag)
  • Change image size (corner handle)
  • Rotate image (top handle)

Text layers:

  • Change text position (drag)
  • Change text field size (corner handle)
  • Rotate text (top handle)

When every checkbox is off, customers cannot move, resize, or rotate that layer on the storefront.

Linked options

Text layers only. Link other calculator options so customers control appearance:

Setting Link to
Font source A Font option, or None (use default font)
Color source A Color or Color swatch option, or None (use default color)
Font size source A Number or Slider option, or None (use default size)

Linked values override the defaults in the Text section when the customer picks them.

Overlay image

Static overlay layers only. Buttons: Pick image / Change, and Remove when an image is set. Prefer a reasonably sized transparent PNG for lifestyle props (chair, frame, room scene).

See Managing Layers for adding a static overlay.

Preview images per value

Option-driven image layers only (not static overlays).

Situation What you see
Choice options (dropdown, swatch, button, and similar) Map each value with Pick image / Change, or use Auto-map by alt text
File upload Copy explains that the layer uses the customer's uploaded image — no mapping table
Shopify-synced image swatch Info banner: images come from Shopify product variants automatically — nothing to map here. Configure Image source on the option in Options & Pricing

A synced swatch can use Swap the canvas background image so a pattern fills the preview while other layers (including a static overlay) sit on top.

Examples

Engraved jewelry — Text layer → set Default preview text → under Linked options, set Font source, Color source, and Font size source → under Allow customer to, enable Change text position (drag) if customers should reposition the engraving.

Wallpaper + room prop — Synced image-swatch layer with Swap the canvas background image → add a static overlay, set its Overlay image (chair), and stack it above the swatch in the Layer stack.

Customer photo collage — File upload layer → under Multi-select layout, choose Slots — fill in selection order → under Allow customer to, enable Change image position (drag) and Change image size (corner handle).