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 (right). Start by choosing your base image, then add layers for each option you want to personalize.

Steps

1. Open Calculator Editor → Optional Features

2. Toggle Enable personalization to On The personalization workspace appears with three panels.

3. Set the base image

   • Click the Preview panel
   • Choose Use Shopify product image (default) to use the product's main image, or Use custom image to upload your own background
   • The preview updates

4. Add your first layer

   • Click Add layer in the Layers panel
   • Select which Option drives this layer (e.g., a Color swatch, Text box, or File upload)
   • Choose the layer Kind: Image (overlay image), Text (overlay text), or Background swap (replace entire image)
   • Click Create layer

5. Position and size the layer

   • The layer appears in the Layers list
   • Click it to select it (the right panel shows Layer Settings)
   • Enter Position (X, Y in pixels) and Size (width, height) or click Edit on canvas to drag and resize in the preview
   • For text, set Rotation and Arc curvature if needed

6. Set what customers can adjust

   • In the Layer Settings panel, toggle Change position, Change size, and Rotate on or off
   • These control what customers can do on the storefront

7. Save and publish

   • Click Save to save your calculator
   • Click Publish to make personalization live

Details

Adding more layers — Repeat steps 4–6 for each option you want to personalize. Layers stack in the order they appear in the list—move them up or down to control which sits on top.

Layer naming — Each layer shows a number badge (1, 2, 3). You can also give layers custom names in Layer Settings for easier tracking.

Text layer defaults — For text layers, set Default text (what shows if the customer hasn't entered text) and Placeholder (hint text in the input field).

Image layer images — For image layers, choose Image behavior: Single image (all option values use the same image) or Per-value image (each value has its own image for this layer).

Image shapes — For image layers, choose Image shape: Square (no mask), Circle, Oval, or Custom (upload a mask image).

Multi-select options — For options that allow multiple selections (checkboxes, file uploads, multi-swatches), choose Multi-select mode: Slots (filled in order) or Per value (each value has a fixed spot). See Multi-Select Options for details.

Linked options (text layers only) — Link a text layer's font family, color, or size to other options:

• Font family → Font picker option
• Font color → Color picker or Color swatch option
• Font size → Number input or Slider option

When linked, the text uses those options' initial values when the page loads.

Examples

Mug engraving — Base image is a mug. Add a text layer for customer input, link it to a Font picker and Number input for size. Customers see their text on the mug preview in their chosen font and size.

Custom apparel — Base image is a shirt. Add an image layer linked to a Color swatch option so customers see the shirt in their chosen color. Add another image layer linked to a File upload so they can add their own logo.

Pizza builder — Base image is a pizza. Add an image layer linked to a Checkbox group for toppings. Use Slots mode with 4 slots. As customers check boxes, toppings appear in order on the pizza.

Related Docs

• Personalization
• Managing Layers
• Configuring Options
• Multi-Select Options