Product Personalizer

The Product Personalizer is a live canvas overlay that lets customers see their customization applied to the product image in real time — as they type text, choose colors, or upload images, the preview updates instantly on the product photo.

What it looks like

On the storefront product page, the Personalizer renders a transparent canvas layer on top of the product image. The canvas contains the customer’s personalized content — text they’ve typed, a color they’ve chosen, or an image they’ve uploaded — positioned where you have configured it.

The customer can interact with the layers:

• Drag to reposition
• Resize using corner handles
• Rotate using a rotation handle

All of this happens without leaving the product page and without modifying the actual product image.

How it works

The Personalizer is a browser-side feature. The storefront script:

1. Detects which elements have Personalizer enabled
2. The app places a transparent overlay on top of the product image.
3. Listens for changes to the linked elements (text input changes, color swatch selections, image uploads)
4. Redraws the canvas whenever the customer changes a value
5. On Add to Cart:
   • Hides the selection handles (drag border, resize corners, rotation handle) from the canvas
   • Captures the composite image (product photo + personalization overlay) as a high-quality image
   • Restores the selection handles on the canvas immediately after capture
   • Saves the image to secure cloud storage
   • attaches a link to the saved design image directly to the order in BigCommerce, so you can open it from the order detail page

The selection handles are excluded from the saved image, so the captured design shows the clean personalization content without any UI chrome.

Element types that support the Personalizer

Any of the following element types can have the Personalizer enabled via their Personalizer tab:

Each enabled element becomes a separate layer on the shared canvas. All of them stack on top of each other in a set order — see Image & Color Overlay.

Dedicated modifier for the design URL

When Personalizer is enabled on an element, the app automatically sets up a hidden field on the product (named [Element label] - Personalized Design). This field:

• Is hidden from the storefront — customers never see or interact with it
• Receives the composite design image link when the customer adds to cart
• Appears in your BigCommerce admin on the order line item, giving you a direct link to the customer’s design

This means the captured design link is part of the order line item, not just the cart customer note — making it fully visible in orders, exports, and any tools connected to your store.

Limitations

• The canvas overlays the product page image only — it doesn’t modify the product’s catalog images
• The preview stays aligned with the product image as the customer scrolls the page. On very long product pages or certain theme layouts, positioning may need adjustment via the design settings
• In rare cases where your product images are hosted outside BigCommerce on a server that blocks external access, the preview may show a plain grey background instead of the product photo. If you host product images through BigCommerce (the standard setup), this never happens.
• Conditional logic, swatch colors, and other element settings still work alongside the Personalizer — enable on any of the supported types above

Continue to Setting Up to add the Personalizer to your first element.