Configure your first product

This walkthrough takes a product from zero to a working live preview. Every form in the app uses Shopify’s contextual save bar: change something, then click Save at the top.

1. Open the product configuration

Go to Products in the app navigation, find your product (search or filter by collection), and click Configure.

2. Enable personalization

Turn on the Enable personalization switch in the Status card. While it’s off, the block renders nothing on that product’s page.

3. Draw the preview zone

1. In the Live preview card, enable Define a zone.
2. Drag and resize the rectangle directly on your product photo. The numeric values (in % of the image) are editable next to it if you prefer precision.
3. Pick the horizontal and vertical alignment, minimum and maximum font size, and type a sample text — the preview beside the controls shows exactly what your customer will see, using the same rendering engine as the storefront.

You can skip this step: without a zone, the preview appears in a clean frame below the block instead of on the photo. See Preview zones for details, and Multi-zone previews for engraving several spots (front/back, name/number).

4. Add your fields

In the Fields card, add what the customer fills in — for example a First name text field:

• label and placeholder (translated automatically, editable),
• character limit (spaces included),
• required or optional,
• forced UPPERCASE if your engraving style needs it.

Mark one text field as shown in the preview — that’s the text that appears on the photo. Other field types are available too: checkboxes and conditional fields, swatches and customer image upload.

5. Set the surcharge (optional)

If engraving is paid, enable the surcharge and enter a fixed amount. Choose whether it applies as soon as any field is filled, or always. Engraving can also be free — simply leave the surcharge off. Details: Engraving surcharge.

6. Choose fonts and colors

Tick the fonts and colors the customer may pick from. The Free plan includes three fonts (Inter, Playfair Display, Great Vibes); Pro and Plus unlock all eight. See Fonts & colors.

7. Save and check the storefront

Click Save, then open the product page on your storefront (not the admin):

• type a text → it appears on the photo in the chosen font and color;
• leave a required field empty → add-to-cart is blocked with a translated message;
• add to cart → the line shows Engraving, Font and Color properties, and the surcharge is attached to the product as one inseparable bundle.

Scaling up

Configuring many similar products one by one gets old fast. Save this configuration as a template and apply it in bulk to a whole collection or tag (Pro).