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 → Optional Features → Step 5: Personalization, 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:
- They see the product image with a customization preview panel alongside the calculator options
- As they make selections (pick a color, enter text, upload files), those changes appear instantly in the preview
- Depending on your configuration, they can drag layers, resize them, or rotate them
- 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
- 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.
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
Personalization
Overview Personalization lets your customers see a live preview of how their choices change the appearance of a product. When customers select options (like colors, images, or text), those selections appear as layers on top of the product image. For ...
Personalization by Option Type
Overview Different option types appear as different kinds of personalization layers. This reference explains what each option type can do in personalization, and any special configuration steps needed. Text Inputs (Text box, Text area) What it does: ...
Setting Up Personalization
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 ...
Working with Personalization Layers
Overview Layers are the visual elements that appear on top of the product image when customers make selections. In Calculator Editor → Optional Features → Step 5: Personalization, the Layers panel on the left lets you manage all your layers: set the ...
Viewing Personalization Proofs
Overview When a customer adds a personalized product to their cart, Appify OPC generates a "proof" image — a flattened PNG showing the final customized product with all layers, text, and selected images exactly as they appeared in the preview. This ...