> For the complete documentation index, see [llms.txt](https://minimateapps.gitbook.io/customfield/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://minimateapps.gitbook.io/customfield/how-to.../how-to-add-live-text-preview-on-the-product-image.md).

# 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:

1. **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.
2. **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

1. **Create a Text Box field** (or open an existing one).
2. Go to the **Visibility** tab and set **"Shown on"** to **Specific Products** (or **Specific Variants**), then choose the product or variant.
3. Open the **Text Preview on Product Image** section and check **"Show a live text preview on the product image."**
4. **Choose the product image** the text will be drawn onto. (These are the images from the product you selected in step 2.)
5. 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.
6. 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**
7. 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.