Personalization

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. You set up personalization in Calculator Editor → Personalization (Step 4), where you define which options control layers, where those layers sit on the image, and what customers can adjust.

How It Works

When a customer loads a product page with personalization enabled:

  1. They see the product image with a customization preview panel alongside the calculator options
  2. As they make selections (pick a color, enter text, upload files), those changes appear instantly in the preview
  3. Depending on your configuration, they can drag layers, resize them, or rotate them
  4. When they add the product to cart, a proof image is generated—a flattened PNG showing the final customized product with all layers, text, and selections
  5. The proof URL is attached to the cart line item and order so merchants and customers both have a visual record

Key Concepts

Layer — A visual element (image or text) that appears on top of the product image. Each layer is tied to one option in your calculator. You can have multiple layers stacked in any order.

Base image — The product image everything layers sit on top of. Use the default Shopify product image or upload a custom background.

Proof image — A flattened PNG of the final personalization, generated at add-to-cart. It's what both the customer and merchant see in the order for fulfillment.

Multi-select mode — For options that allow multiple selections (checkboxes, file uploads, multi-swatches), you choose how selected items appear: Slots (filled in order) or Per value (each value appears in one fixed spot).

Customer controls — Toggles you set per layer to decide what customers can do: drag (change position), resize (change size), or rotate layers.

Gallery scope & theme integration — Control which product gallery slides show the live overlay, and how the app finds your theme’s gallery (including optional CSS selectors). See Setting Up Personalization → Where to show the live preview and Theme integration.

What Personalization Supports

Option types: Dropdown, Radio button, Switch, Button, Checkbox group, Color swatch, Image swatch, File upload, Text box, Text area, Number input, Slider, Font picker, Color picker, Dimensions

Not supported: Product List

What Gets Stored

When a customer adds a personalized product to cart:

  • A proof image (PNG) is generated and stored
  • The proof URL is added as a line item property, visible in cart and orders
  • Layer coordinates and transforms are not stored—only the final rendered image matters

This ensures a clear visual record without storing complex layer data.

    • Related Articles

    • Setting Up Personalization

      Overview Personalization is available as an optional feature in every calculator. Open Calculator Editor → Personalization (Step 4) and you'll see a three-panel workspace: Layers (left), Preview (center), and Layer Settings (right). Start by choosing ...

    • Option Types Reference

      Overview Different option types appear as different kinds of personalization layers. This reference explains what each option type can do, and any special configuration steps. Text Inputs (Text box, Text area) Layer kind: Text What it does: Customer ...

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

    • Product Designer

      Overview The Product Designer adds a full-screen design editor to your calculator. Customers open it from a styled button on the product page, work on a dedicated artboard, and save proof and production files before add to cart. This is separate from ...

    • Proof Images

      Overview A proof image is a flattened PNG showing the final customized product exactly as the customer saw it in the preview before adding to cart. It's generated automatically at checkout and becomes the visual record of the order—both the customer ...