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 your base image, then add layers for each option you want to personalize.
Open Calculator Editor → Personalization (Step 4)
Toggle Enable personalization to On The personalization workspace appears with three panels.
Set the base image
Add your first layer
Position and size the layer
Set what customers can adjust (option-driven layers only)
Save and publish
Adding more layers — Repeat steps 4–6 for each option you want to personalize, and add static overlays for lifestyle props. 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 set Layer name in Layer settings for easier tracking.
Text layers — Set Default preview text, Font family, Size (px), Default color, and Alignment. Under Linked options, you can set Font source, Color source, and Font size source. Full field list: Layer Settings.
Image layers — Set Behavior when a value is selected (Show as overlay layer (positioned on top) or Swap the canvas background image), Shape, and map images under Preview images per value. Full field list: Layer Settings.
Multi-select options — Under Multi-select layout, set Mode to Slots — fill in selection order or Per value — each value has a fixed spot. See Multi-Select Options.
These options apply when the app successfully mounts the personalization overlay on your theme’s main product image area (integrated mode). If the theme cannot be matched, the calculator falls back to a built-in preview above the options; in that case gallery scope does not apply—the preview always shows there.
All product images — The overlay appears on every image in the main product gallery as customers swipe through slides.
Variant featured image only — The overlay appears only while the image currently showing is the selected variant’s featured image (the hero image Shopify assigns to that variant). If the customer swipes to another product image, the overlay hides until they return to that variant’s featured shot.
All featured variant images — The overlay appears on any gallery slide whose image matches some variant’s featured image for this product, even if a different variant is selected. It stays hidden on images that are not any variant’s featured image (for example a generic lifestyle image attached only to the product). This mode assumes each variant has one canonical featured image.
Specific product image — The overlay appears only when the visible slide matches the media you configure: either a zero-based media index (0 = first image in Shopify’s product media order as embedded in the storefront JSON) or a media id (numeric id or Shopify GID string matching the product JSON). Use your browser’s dev tools on a live product page if you need to confirm ids or order.
Proof images at checkout — For scopes other than “All product images,” the flattened proof image used at add-to-cart prefers the selected variant’s featured image (or your configured specific media) as the base so the proof aligns with the variant being purchased, even if the customer had another gallery slide visible.
Shopify-synced image swatches — When a personalization layer is linked to an Image swatch that uses Image source → Shopify product variants, choosing a swatch can update the selected product variant (when Sync selection to Shopify variant is on in Options & Pricing). That keeps the gallery, price, and Variant featured image only preview scope aligned with the swatch the customer picked. See Option Basic Settings.
Mode (under Theme integration in Step 4):
Auto (recommended) — The app tries to attach the live preview to your theme’s product gallery. If no suitable container is found, it uses the built-in preview in the calculator block so personalization still works.
Force integrated overlay — Always tries the theme gallery first using the same detection logic as Auto. If binding still fails, it falls back to the built-in preview. Behavior matches Auto when the gallery is found; this mode is mainly for troubleshooting and diagnostics.
Force standalone preview — Always uses the built-in preview in the calculator column and never mounts on the theme gallery. Use for unusual layouts, when you do not want the overlay on product photos, or while debugging theme conflicts.
Custom theme selectors (optional) — One CSS selector per line. Each line is appended to an internal list of common gallery selectors (Dawn, Horizon, and many other themes). The first selector that matches a visible element on the product page becomes the gallery wrapper where the overlay is mounted (the region that contains the slideshow, not a lone img unless that is truly the stable root).
How to find a selector:
media-gallery, .product__media-list, or an element with a data-* attribute).data-product-* hook). Avoid overly broad selectors such as main img, which can match the wrong image.Bad selectors do not break your theme; at worst the overlay fails to bind and Auto or force-integrated mode falls back to the standalone preview.
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 swatch with Image source → Shopify product variants for Color so each variant's featured photo drives the preview. Add another image layer linked to a File upload so customers 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.