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. Most layers are tied to one option in your calculator. You can also add a static overlay (always-on image with no option) for lifestyle props. Stack layers 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 layout — For options that allow multiple selections (checkboxes, file uploads, multi-swatches), set Mode to Slots — fill in selection order or Per value — each value has a fixed spot.

Allow customer to — Checkboxes on each option-driven layer that decide whether customers can drag, resize, or rotate that layer on the storefront (exact labels vary for text vs image).

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.