Personalization

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 example, a customer can see their engraved text appear on a mug, or a custom color option update the product image in real time.

Personalization is configured in Calculator Editor → Optional Features → Step 5: Personalization. You define which options control the visual layers, where those layers appear on the image, and how customers can adjust them.

Key Concepts

Layer — A visual element that appears on top of the product image. Layers can be images (from swatches, uploaded files, or custom images) or text input. Each layer is associated with one option in your calculator.

Base image — The product image that layers appear on top of. You can use the default Shopify product image or upload a custom background.

Customer controls — Settings that determine what customers can do with each layer on the storefront. For example, "Change position" lets customers drag layers around, and "Change size" lets them resize them.

Multi-select mode — For options that allow multiple selections (like checkboxes or multi-file uploads), you can set how selected items appear: as Slots (filled in order) or Per value (each value always appears in the same place).

Proof image — A flattened preview image of the final personalization, generated at add-to-cart and attached to the order so merchants and customers can see what was ordered.

Supported Option Types

Personalization works with the following option types:

  • Dropdown, Radio button, Switch, Button
  • Checkbox group (multi-select)
  • Color swatch, Image swatch (multi-select)
  • File upload (multi-select)
  • Text box, Text area
  • Number input, Slider
  • Font picker, Color picker
  • Dimensions

Not supported: Product List

What Happens on the Storefront

When a calculator with personalization is placed on a product page:

  1. Customers see the product image with a personalization preview panel
  2. As they select options, layers update in real time on the preview
  3. Depending on your settings, they may be able to drag layers, resize them, or rotate them
  4. When they add the customized product to cart, a proof image is generated and attached to the order

Customers see the personalization preview alongside the calculator, and the proof image appears in their cart and order details.

What Gets Stored

When a customer adds a personalized product to their cart:

  • A proof image (PNG) is generated and stored, showing the final customized product
  • A URL to that proof image is added as a line item property (visible in the cart and order)
  • Layer positions, sizes, and rotations are not stored — only the final rendered image

This ensures merchants and customers have a clear visual record of what was ordered.

    • Related Articles

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

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