Live Preview

Live Preview is optional. Use it when shoppers should see a real-time product visualization, or turn off the Customizer toggle for an option when the option should only collect a selection without changing the product image.

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.

Use Options Without Live Preview

You can use Podifai custom options without Live Preview. The option will still appear on the storefront and the shopper's selection will still be saved with the order; it just will not update the product image in real time.

This is useful when you want to collect back-side text, production notes, or uploaded files without showing them on the current preview image. Text entries and image uploads still appear in Shopify admin order information and in the Podifai Orders tab.

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 four 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.
• Variant Image — Follow the image assigned to the shopper's selected Shopify variant.

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.

Use Variant Image when Shopify controls product choices such as color or size and the personalization should stay on the selected variant. See Shopify Variants vs Podifai Options for the recommended setup.

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. Image Swatch thumbnail and preview images can be up to 2 MB each.

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.

A required single-select Image Swatch can also start with no value selected. In Default option, click the selected value again to deselect it. The customer will still need to choose a swatch before adding to cart, but the preview will start from the base product image instead of showing a default logo, patch, or design.

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 with your theme name, store URL, and product URL so we can check compatibility. Our AI assistant can reply when a human agent is not available, but theme-specific fixes may take longer than the first support response.

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

Front, Back, and Multiple Product Views

Some products need more than one personalization side, such as the front and back of a jersey, a bottle with multiple print areas, or apparel with front and sleeve artwork.

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 coming soon

Front/back and multi-side personalization is in development and coming soon. The feature will support separate views such as Front and Back, each with its own options and live preview.

• Separate side-specific options — For example, Front Text, Front Font, Front Image Upload, Back Text, Back Font, and Back Image Upload.
• Storefront side switching — Customers will be able to switch between product sides while personalizing.
• Separate order data — Each side's personalization data will be saved with the order.
• Back-side collection before launch — Until the full feature is available, you can collect back-side details with separate fields and keep Live Preview turned off for those fields.

Until this feature ships, full multi-side live preview switching is not available yet.

Best Practices

• Use high-resolution product images.
• Keep product and variant images at the same aspect ratio and dimensions.
• Place layers where the customization should appear.
• Test on mobile and desktop.
• Use Curved Text for round products.

See Image & Asset Requirements for file limits, recommended formats, dimensions, and performance guidance.