Live Preview

Live Preview shows shoppers a real-time product visualization as they select images, enter text, upload artwork, or choose linked font and color controls.

Overview

Live Preview shows shoppers how their choices will look on the product image. The preview updates as they select options, type text, or upload images.

Supported Option Types

Most option types can update the preview directly. Color Swatch and Font Swatch work as linked controls. They change the color or font of another option, such as Text Input or Text Area.

Change the Preview Background Image

The preview canvas needs a background. You can choose one of three sources:

• Shopify Product Image — Use the first product image from Shopify.
• Blank Canvas — Start with an empty preview canvas.
• Custom Background Image — Upload a dedicated background image for the preview.

Shopify Product Image uses the first image on the Shopify product. Make sure the product has an image in Shopify admin. A square image is usually easiest to adapt across templates and screen sizes.

Thumbnail Image vs Preview Image

For visual options, the thumbnail image and preview image can be the same. Use this when the swatch image is also the image you want to show on the product.

Use the same image for thumbnail and preview

They can also be different. Use this when shoppers need a simple thumbnail, but the preview needs a cleaner image, transparent PNG, cropped detail, or prepared design asset.

Use different thumbnail and preview images

Image Swatch Selection Modes

Image Swatch supports two Live Customizer modes:

• Single selection — The shopper chooses one swatch. The preview updates to that value.
• Multiple selection — The shopper can choose more than one swatch. The min and max settings control how many can be selected.

Multiple selection can also keep the order of selected values. Use this when the preview needs to layer several graphics, charms, patches, or design elements in order.

This means you do not need to duplicate the same form several times just to let shoppers choose multiple charms. One multi-select Image Swatch can collect the choices and place them in sequence.

Position multiple Image Swatch selections in sequence

Image Preview Layers

Image-based options can place images on the preview canvas. This is useful for product graphics, patches, charms, materials, artwork, or uploaded images.

• Position — Move the image to the right place.
• Size — Resize the image layer.
• Rotation — Rotate the image when it needs to match the product angle.
• Layer order — For multi-select Image Swatches, show selected images in order.

Text Preview Layers

Text Input and Text Area can place shopper-entered text on the preview canvas.

• Position — Move the text to the right place.
• Size — Resize the text layer.
• Rotation — Rotate text for angled placements.
• Font — Use a fixed font or link to Font Swatch.
• Color — Use a fixed color or link to Color Swatch.

Link Color Swatch to live preview text

Use a custom font in live preview

Customer-Side Editing on Storefront

Shoppers can also adjust preview layers directly on the storefront product page. When enabled, they can click a text or image element on the product image and resize, rotate, or reposition it — the same way you do inside the Podifai editor.

Turn this on from the Show bounding box on storefront toggle at the bottom of the Live Customizer panel on the right side of the editor.

Enable Show bounding box on storefront

Shopper resizes, rotates, and repositions a layer on the storefront

Theme Compatibility Notes

For broader theme guidance, see Theme Compatibility.

• Image zoom must be disabled. If the theme has image zoom turned on, the zoom click handler will block the bounding box from being selected. Turn off image zoom on the product page.
• Slider product images conflict with click events. When the product image uses a slider/carousel, the slider intercepts clicks and the bounding box may not render correctly. Switch the product image to a non-slider display to use this feature.

If your theme doesn't allow disabling image zoom or switching off the slider, message us — we'll prioritize compatibility for your theme and respond within 24 hours.

Curved Text

Curved Text bends shopper-entered text along a circular path. Use it for round or curved products, such as rings, mugs, badges, seals, or ornaments.

Text Effects

Text layers can also use visual effects. Use these when the preview text should look closer to the final product style.

• Engrave — Recessed engraving appearance
• Emboss — Raised appearance
• Outline — Stroke around text characters
• Soft Shadow — Subtle drop shadow behind text
• Neon — Glowing neon light effect
• Metallic / Chrome / Glossy — Simulated metallic finishes
• Gradient Fill — Color gradient across text
• Retro 3D — Three-dimensional retro lettering
• Echo / Glitch — Stylized distortion effects

Multiple Preview Areas for Different Product Views

Some products need to be visualized from more than one angle at the same time. A sports jersey is the clearest example — shoppers want to see the front (team logo, chest sponsor) and the back (player name and number) updating live as they personalize. Shoes often need a side view, a top view, and a heel view so the customer can confirm color blocking, lace choice, and embroidered initials. The same need shows up for jackets with chest plus sleeve patches, hoodies with front plus hood embroidery, and accessories with multiple decoration zones.

What is supported today

Podifai today renders a single product preview canvas. That single canvas already supports a cumulative overlay of independent layers, so it covers a large share of customization workflows out of the box:

• Base image swap. A Color Swatch or Image Swatch can change the base product image — for example, switching the jersey color or the bag color — and all other layers remain stacked on top of the new background.
• Independent stacked layers. Multiple Image Swatch option groups can each place a value at its own fixed position, size, and rotation on the same canvas. Selecting a value in one group does not affect the others, so chest, sleeve, and hood layers stay independent.
• Persistent, non-linear state. Each layer keeps its own state. Shoppers can scroll back up the form to change an earlier choice without resetting the layers below it.
• Layered multi-select. A single multi-select Image Swatch can also place several selected images on the preview in sequence — useful when items share one catalog, such as interchangeable charms, patches, or graphic stickers.

This single-canvas pattern works well for products where the personalization fits on one face of the product — a mug, a phone case, the front of a t-shirt, the band of a wedding ring — and for many layered designs where the front view alone is enough.

What is on the roadmap

A dedicated multiple preview areas workflow is on our backlog. The intended use cases are products that genuinely need to be shown from more than one angle at the same time:

• Sports jerseys — Front view (team logo, chest sponsor) and back view (player name, number) side by side, each updating live.
• Shoes — Side, top, and heel views, each reflecting the same color blocking, lace style, and embroidered initials.
• Apparel with multi-face artwork — Jackets with chest plus sleeve, hoodies with front plus hood, polos with chest plus collar.
• Accessories with multiple decoration zones — Handbags, backpacks, or charm pieces where decorations sit on different faces of the product.

This feature is queued but is not currently a top priority, because the single-canvas pattern above already handles most customization workflows. If your store needs multiple preview areas for the use cases above, message us with a mockup or a competitor reference. Real merchant demand is what moves features up the queue, and we will let you know when it ships.

Best Practices

• Use high-resolution product images.
• Place layers where the customization should appear.
• Test on mobile and desktop.
• Use Curved Text for round products.