Overview

Personalization is an optional feature available in every calculator. To use it, you enable it during calculator configuration, then set up your layers and options. Personalization appears in Calculator Editor → Optional Features as Step 5: Personalization.

Prerequisites

• You have a calculator with at least one option
• The calculator is assigned to at least one product

Personalization works with any calculator, but most commonly you'll set it up after defining your main options and pricing.

Enabling Personalization

1. Open a calculator in the Calculator Editor
2. Click the Optional Features tab (or navigate there via the steps)
3. Under Step 5: Personalization, toggle Enable personalization to On
4. The personalization panel appears, showing you:
   • Layers panel (left) — where you manage layers
   • Preview panel (center) — live preview of your setup
   • Layer Settings panel (right) — configuration for the selected layer

Configuring Personalization

Once enabled, follow these steps:

Step 1: Set the base image

• Choose Use Shopify product image (default) to use the product's main image
• Or choose Use custom image and upload your own background

Step 2: Add layers

• Click Add layer
• Select which option drives this layer (e.g., a swatch, text, or file upload)
• Choose the layer kind (Image, Text, or Background swap)
• Click Create layer

Step 3: Position and size layers

• Click a layer in the Layers list to select it
• Use the Layer Settings panel to set position, size, and rotation
• Or click Edit on canvas and drag the layer in the preview

Step 4: Set customer controls

• For each layer, decide what customers can do: Change position, Change size, Rotate
• If all are disabled, the layer is static

Step 5: Link options (optional, for text layers)

• For text layers, link font family, font color, or font size to other options (Font picker, Color picker, Number input, etc.)
• This ties the text appearance to customer selections

Step 6: Configure multi-select (optional)

• If a layer's option allows multiple selections, choose Slots (filled in order) or Per value (each value has a fixed spot)
• Position each sub-layer

Step 7: Save

• Click Save to save your calculator
• Publish to make personalization live on the storefront

When to Disable Personalization

If you don't need personalization for a calculator, you can:

1. Leave it disabled (default)
2. Or disable it if you previously enabled it by toggling Enable personalization to Off

Disabling removes all layer configurations. If you re-enable it later, you'll start fresh.

Testing Personalization

Before publishing, test your personalization setup:

1. Use the Live preview panel in the editor to see how layers respond to option changes
2. Open the calculator in full-screen preview mode (click the eye icon)
3. On your staging store, add the calculator to a product and test on the storefront

Verify that:

• Layers appear in the correct positions
• Layer stacking (z-order) is correct
• Customer controls (drag, resize, rotate) work as expected
• Text renders with the correct font, size, and color
• Multi-select layers behave as expected (slots fill in order, or per-value places appear correctly)
• The proof image captures all selections accurately

Placement on Product Pages

Once personalization is enabled, it appears on product pages wherever your calculator is placed (via theme blocks or app embed). The personalization preview displays alongside the calculator options, updating in real time as customers make selections.

No additional setup is required — just enable the feature, configure your layers, and publish.

Related Docs

• Personalization
• Working with Personalization Layers
• Configuring Personalization Options
• Placing Your Calculator on Product Pages