Live personalization

A customer types a name, a date or a short message, and it appears on the object in the product photograph while they type — inside an engraving area you place, shrinking to fit it, turned and bent to follow the object’s face. What reaches the order is exactly the text they typed.

This is not a separate feature with its own block — it is the Custom option block on the product page with Live preview on the photo turned on. That matters: the text stays an ordinary Shopify line item property, so it appears in the cart, on the order, in the confirmation email and on the packing slip without anything else being set up.

Setting it up

1. On the product page in the theme editor, Add block → Custom option.
2. Set Label — this is both the field’s label and the property name on the order. “Engraving”, “Name”, “Message”.
3. Set Style to Text field (one line) or Multi-line text field.
4. Set Maximum characters to what you can actually engrave.
5. Turn on Show the text on the product photo.
6. Optionally pick a Preview photo (the object without engraving).
7. Place the Engraving area over the object with the sliders below — the theme editor outlines the area and shows a sample text, so you can watch it move.

Settings

The field itself

Setting	Notes
Label	The field’s label, and the property name on the order.
Style	Buttons / Dropdown / Text field / Multi-line text field. Live preview is available for the two text styles.
Placeholder	Grey example text inside the field.
Maximum characters	0 = no limit. Set it to what you can engrave.
Required	Add to cart is blocked until the field is filled in.
Help text	A line under the field.

Live preview on the photo

Setting	Notes
Show the text on the product photo	Turns the preview on.
Maximum lines	1–4, multi-line fields only. Extra lines are removed as they are typed, so the preview and the order always match.
Preview photo	A photo of the object without engraving, used only for the preview: it takes the first photo’s place while the customer types (and is only downloaded then). Empty = the product’s first photo.
Preview photo metafield	namespace.key of a File metafield holding each product’s own preview photo (default custom.engrave_photo). It wins over Preview photo.

Engraving area

Every value is a share of the preview photo, so the text stays on the same spot of the object on a phone, on a desktop and in the editor, whatever the gallery’s shape.

Setting	Notes
Horizontal position / Vertical position	0–100% — the centre of the area.
Area width	10–100%. Text wider than the area gets smaller, the way it would when engraved — it never wraps.
Maximum text size	3–18% of the photo’s width — the size short text is shown at.
Rotation	−45° to 45°.
Turn left or right / Tilt back or forward	−60° to 60° of perspective, for a face of the object seen at an angle (the top of a signet ring, the front of a box shot from the side).
Curve	−100 to 100. Bends the text along an arc for round objects — vases, cups, planters. Above 0 the middle rises; below 0 the ends rise (a cylinder seen from slightly above).
Area metafield	namespace.key of a JSON metafield that moves the area for one product (default custom.engrave_area), e.g. {"x": 52, "y": 46, "width": 34, "rotate": -14}. Keys: x, y, width, size, rotate, tilt_x, tilt_y, curve; the ones left out keep the block’s values.

Lettering

Setting	Notes
Font	Heading font or Body font, from your theme settings.
Text color	White, Black or Accent (the colour scheme’s accent). Pick the one that stands out on your photo.
Add a soft shadow behind the text	Keeps the text readable over a busy photograph.

How it behaves

It sits on the product’s first photograph, or on your Preview photo in its place. When the customer starts typing, the gallery moves to that photograph (in the carousel layout; the grid and one-column layouts never scroll the page away from the field). A flat, evenly lit shot of the object with the engraved face in view works best.

One template per shape. The area belongs to the product template, so products of the same shape — all your cylindrical vases, all your tags — share one template and one set of sliders. For a single product that differs, use the Area metafield instead of a new template.

One personalised photograph per page. Several previews over the same image would fight for the same space, so only one Custom option block shows its text on the photo.

On a phone the gallery is above the field, so a copy of the preview appears next to the field, on the same preview photograph. It is built the first time the field is focused.

The character limit is said once, as a sentence the screen reader reads when the field is focused, and shown as a quiet “11 / 20” counter. The counter is not announced on every keystroke — that would talk over the typing.

Multi-line fields remove a line beyond the maximum from the field itself, not just from the preview. What the customer sees is what they will get.

The preview is a guide, not a proof. The theme says so in the editor, and it is worth saying on the page too, with Help text: “Shown as a guide — the engraving is centred by hand.”

In the order

The text arrives as a line item property named by your Label:

Engraving: Mara

It is visible in the cart, in the admin order, in the confirmation email and on the packing slip. Nothing needs to be installed for that — it is how Shopify carries line item properties.

Performance

The script for all of this is loaded only on product pages, and only when a Custom option block actually asks for a preview or has a character limit. Your home page and your collection pages never download it.

Tips

• A short limit (16–20 characters) saves you emails. The counter does the arguing.
• Use Required for a product that makes no sense unpersonalised, and leave it off for an optional gift note.
• Keep Maximum text size small on a busy photograph — the shadow helps, but a huge name over a textured surface reads badly at thumbnail size.
• If you engrave in a fixed position, place the area there and mention the position in the description. Customers ask.
• Set the area on the photo at its widest (a desktop) and check it on a phone: the values are shares of the photo, so it should not move — but a gallery set to a fixed Image ratio crops the photo, and the area follows the crop.