🪄How to add live text preview on the product image?
Let your customers see their personalization before they buy. When this feature is on, whatever the customer types into your Text Box field is drawn onto the product image in real time — right where you positioned it.
Perfect for engraved jewelry, monograms, custom signs, printed apparel, gift labels, and anything else where a shopper wants to preview their own text.
What it does
The customer types into your Text Box field on the product page.
Their text appears live on the product image — on both the main image and its thumbnail — updating as they type.
When they add to cart, the finished design is attached to the order so you can fulfill exactly what they saw.
Before you start
Two things are required for the preview to be available:
The field must be a Text Box. The preview is only offered for Text Box fields — you'll see a Text Preview on Product Image section when you edit one.
The field must target specific products or variants. On the Visibility tab, "Shown on" must be set to Specific Products or Specific Variants — with at least one selected. The preview is not available for "All Products" or "Collections", because the text has to be positioned on one particular image.
Set it up — step by step
Create a Text Box field (or open an existing one).
Go to the Visibility tab and set "Shown on" to Specific Products (or Specific Variants), then choose the product or variant.
Open the Text Preview on Product Image section and check "Show a live text preview on the product image."
Choose the product image the text will be drawn onto. (These are the images from the product you selected in step 2.)
Pick a Text layout:
Straight Box — drag the box to move it, grab a corner to resize, or grab the circle above it to rotate.
Curved Path — drag the Curve slider to bend the text, and click the image to add points; drag points to reposition, click a point to select and delete it.
Set your defaults — these are what shoppers see before they type, and what shows if they leave styling untouched:
Text size
Text alignment
Default font
Default text color
Click Save.
That's it — visit the product page on your storefront and type into the field to see the live preview.
Advanced settings (optional)
Inside the preview editor there's a collapsed Advanced Settings section with two extra controls. Most stores don't need these — a single default font and color is usually all you want, and fewer choices keep the product page simple.
Linked color swatch — Link a Color Swatch field you built in this app. When you link one, the preview text color follows the swatch the customer selects (instead of the fixed default color).
Linked font dropdown — Link a Font Dropdown field you built in this app. When you link one, the preview text font follows the font the customer selects (instead of the fixed default font).
These options only appear if you've already created a Color Swatch or Font Dropdown field. If you haven't, create one first, then come back and link it.
Showing a preview on several products
Each field's preview is positioned on one specific product image, so a single field can't display a live preview across many products at once.
To offer a preview on several products:
Create a separate Text Box field for each product, and assign each field to a single product. Set up the preview image and text position on every field.
Make as many fields as you have products that need a preview.
What the customer sees
The preview updates as they type, on the main product image and its thumbnail.
It stays correct when they switch variants or swipe the gallery.
If they clear the text, the original product image comes back.
What you see on the order
When the customer checks out, their finished preview is saved to the order as a line-item property named after the field's cart label, along with the generated image. This lets you fulfill exactly what the customer designed — no guesswork.
Tip: Each field's cart label must be unique within your store. If you create one field per product (see above), give each a distinct, descriptive cart label so orders stay easy to read.
Tips & limitations
Text Box fields only — other field types don't offer the image preview.
Specific Products or Specific Variants only — not "All Products" or "Collections".
One image per field — the text is positioned on a single chosen image.
Fonts come from a built-in list — a mix of standard web fonts (Arial, Georgia, Verdana…) and Google fonts (Roboto, Lato, Poppins…).
Rare theme edge cases — a few themes display product images as CSS backgrounds, and some third-party image-zoom apps take a snapshot before the preview swaps in. In those uncommon setups the live preview may not appear.
FAQ / troubleshooting
The preview isn't showing on my storefront. Check three things: the field is a Text Box, "Show a live text preview…" is checked and an image is chosen, and "Shown on" is set to a Specific Product/Variant that matches the page you're viewing.
The preview only shows on one of my products. That's expected — one field previews one product's image. Create a separate field for each product (see Showing a preview on several products).
I set a default font/color but it's not changing on the storefront. If you've linked a Color Swatch or Font Dropdown under Advanced Settings, the customer's selection overrides your default. Unlink it if you want the default to always apply.
Which field types support this? Text Box only.
Do I need to touch my theme or add code? No. Once the app's theme extension is enabled, positioning is done entirely in the app — no theme editing required.
Last updated