Live Preview shows customers exactly how their selections look on the product — in real time, without page reloads. Every color, charm, engraving, or uploaded image updates the product image instantly.
How It Works
Podifai uses a 2D layering system. Each option maps to an image layer that composites on top of your base product image:
- Base image — Your product photo (the canvas)
- Option layers — Transparent PNGs for each selectable option (e.g., individual charms, material textures, color overlays)
- Text layers — Customer-entered text rendered with the selected font, size, curvature, and position
When a customer makes a selection, the corresponding layer appears on the preview immediately.
Setting Up Live Preview
Step 1: Prepare Your Images
| Image Type | Format | Requirements |
|---|
| Base product | PNG or JPG | High quality, consistent angle |
| Option layers | PNG | Transparent background, same dimensions as base |
| Text | N/A | Rendered automatically from customer input |
Use the same canvas size for all images in a customizer (e.g., 1000×1000px). This ensures layers align correctly without manual adjustment.
Step 2: Upload and Map
- Open your product’s customizer in the Podifai editor.
- For each option value (e.g., “Gold Chain”), upload the corresponding image.
- Podifai maps the image to that option value automatically.
Step 3: Position and Adjust
In the visual editor, fine-tune each layer:
- Position — Drag the layer to the correct spot on the product
- Size — Resize to match the product proportions
- Rotation — Rotate for angled placements (e.g., engraving on a ring band)
For text options, additional controls include:
- Curvature — Bend text along an arc (great for rings, pendants, bracelets)
- Font linking — Connect to a Font Swatch option so text renders in the customer’s chosen font
- Color linking — Connect to a Color Swatch so text color matches the selection
Layout Modes
Podifai offers two preview layout modes:
Overlay Mode
All option layers stack on a single base image. Best for products where customizations appear in one spot (e.g., engraved pendant, monogrammed item).
Multi-Position Mode
Option layers can be placed at different positions on the base image. Best for products with multiple customization areas (e.g., charm bracelet with charms at different positions).
Text Preview
Customers can enter text and see it rendered live on the product image:
- Supports custom fonts via Font Swatch options
- Curved text with adjustable arc radius
- Preset text effects available
- Text color linked to Color Swatch selections
Image Upload Preview
When you enable the Image Upload option type, customers can upload their own photos or logos and see them placed on the product preview before purchasing.
Live Preview is optimized for speed:
- Images are CDN-delivered and cached
- Layers composite on the client side (no server round-trips)
- Typical update time is under 100ms
Testing Your Customizer
Before going live, test on your actual product page:
- Save your customizer in the editor
- Ensure the Podifai app embed is activated in your theme
- Visit the product page and test all option combinations
- Check on mobile, tablet, and desktop
Test all option combinations, especially with conditional logic. Make sure hidden options don’t leave orphaned layers in the preview.
Best Practices
- Consistent image sizes — Use the same dimensions for all layers to avoid alignment issues
- Optimize file size — Keep each layer under 2MB for fast loading
- Transparent backgrounds — Always use PNG with transparency for option layers
- Test on mobile — Preview layout may differ on small screens; verify it looks good
- Name layers clearly — Use descriptive names so you can identify layers in the editor
