Engraving and Apparel Preview Setup

Vero includes two streamlined live-preview blocks for products that do not need the full Patch designer. Customers upload artwork, position it on the product photo, and send the original file with their order.

Use this guide to choose the right block, configure it in the Theme Editor, and check the complete order flow before launch.

Choose the right preview

If you only need text, font selection, or a basic file upload without an on-product preview, use Product personalization or Product file upload instead.

Before you begin

You will need:

• An activated Vero license for the store domain.
• A product template with a Buy buttons block.
• Product photos framed consistently enough to share one placement.
• At least one test product and test artwork file.

The color metafields described later are optional. You can launch either block using only its Theme Editor color setting.

Add a preview block

1. In Shopify admin, go to Online Store → Themes.
2. Choose Customize on the Vero theme.
3. Open the product template used by the products you want to configure.
4. Expand Buy buttons.
5. Add Engraving preview or Apparel preview.
6. Configure the block using the sections below.
7. Save, then preview a matching product on desktop and mobile.

The block appears on every product using that template unless you enter a Required product tag. If different product families need different placement, colors, or preview types, assign them separate product templates.

Set up Engraving preview

Start with these settings:

• Engraving color: The fallback color used when the product does not have its own engraving-color metafield.
• Maximum upload size: The largest customer file the block accepts.
• Require artwork: Keep this enabled when every order needs artwork.
• Artwork required message: The message shown when a customer tries to add the product without artwork.
• Attach PNG mockup: Adds an on-product placement image to the order.
• Attach SVG artwork: Adds a vector rendering of the engraved preview. The customer's original upload is still attached separately.

Engraving preview accepts PNG, JPEG, WebP, and SVG files. Artwork is converted to the configured engraving color in the preview.

Set up Apparel preview

Choose a Color mode first:

• Full color keeps the colors in the uploaded artwork.
• Single color converts the artwork to the configured Print color.

Then review these settings:

• Maximum upload size: The largest customer file the block accepts.
• Quality warning min edge: Shows a non-blocking warning when the longest side of an image is below this pixel size. The default is 1500px.
• Require artwork: Keep this enabled when every order needs artwork.
• Artwork required message: The message shown when artwork is missing.
• Attach PNG mockup: Adds an on-product placement image to the order.

Apparel preview accepts PNG and JPEG files. A low-resolution warning helps the customer choose a better file, but it does not prevent checkout.

Show sample artwork before a customer uploads

Available in Vero 1.8.4 and current Vero2 store builds. In the Engraving preview or Apparel preview block, choose an image under Sample preview artwork. Leave it blank to keep the preview empty until a customer uploads artwork. A transparent PNG works well for a logo or example design.

The sample uses the block's existing placement and full-color, single-color, or engraving treatment. It follows the selected product photo and is marked Example artwork — upload your own to personalize. Apparel uses the sample on the selected first print side in updated store builds; selecting a second-side design still requires a separate customer upload.

The sample stays visible until a valid customer upload loads. Rejected uploads leave it in place. Removing the customer's artwork restores the sample. If the sample image or preview renderer cannot load, the regular customer upload flow remains available.

Sample artwork is for display only. It never satisfies Require artwork, selects a paid back design, or becomes an order attachment, generated mockup, SVG, or customer artwork filename. Keep Require artwork enabled when every order needs a customer file. If artwork is optional, customers can still order without a file even while the sample is showing.

Use a blank engraving photo after upload

Set Uploaded artwork image alt-text match to a distinctive value such as engraving-blank, and include that value in the alt text of an eligible blank product photo. Keep the photo's description and existing variant tags.

Before upload, the preview follows the selected photo, including any sample artwork. After a valid customer upload, engraving preview uses the first eligible image whose alt text contains the value, ignoring case. Removing the upload restores the previous photo and sample. A blank setting, missing match, or rejected upload keeps the selected photo. Use a suitable blank base photo for the initial sample to avoid placing it over an existing photographed design.

Offer separate front and back apparel artwork

Available in Vero 1.8.4 and Vero2 store builds. The first-side selector and color-specific photo controls described here require an updated October 19, 2026 build. In Apparel preview, turn on Enable second-side artwork. This setting starts off.

Choose the first print side

Customers choose Front or Back for their first upload; Front is the default. This first print does not select an add-on charge, so a customer can order a back-only print without enabling the second-side checkbox.

The checkbox adds a separate upload for the other physical side. Its default Checkbox wording is “Add a separate design to the other side.” Enter custom wording to use it exactly as saved, or clear the field to use the translated default. When the first print is on the back, the second upload is labeled Your front artwork.

The second upload is required while the checkbox is checked, even if the first upload is optional. Unchecking keeps the first upload on its selected side and excludes the second upload, mockup, metadata, and fee from the order. The second file remains available during the current page session if the customer rechecks the option; uploads do not survive a reload.

Both Front/Back control groups use the theme's variant-button styling and selection animation. The first group chooses where the first file prints; the lower group switches the photo and artwork being previewed.

Add a back product photo

Set Back-view image tag to a value such as apparel-back. Include that tag in the alt text of a suitable back-view photo, keeping its description and any existing variant tags. Matching ignores case. With color matching off, the first eligible matching back image is used. A blank tag gives an upload-only back workflow.

If no suitable photo is available, the customer sees Back preview unavailable. Valid artwork can still be ordered; a different color's back photo is not used as a substitute when color matching is enabled.

Match back photos to custom colors

1. Turn on Match back image by color in Apparel preview. It starts off.
2. Set Color option name to the product's option name: for example Color, Colour, or Garment color.
3. Keep Back-view image tag as the shared suffix, for example apparel-back.
4. Add one back photo per color and include a color-specific token in its alt text. Keep descriptions readable and keep existing variant tags.

Use lowercase and hyphens for spaces in color names. The custom color value must match the product option; sizes need no separate tags or duplicate photos. The matching color photo takes priority over an eligible plain apparel-back fallback. Changing size retains the same color match.

Keep back photos when variant images are hidden

The Product media block has separate gallery-filter controls. If variant image hiding is enabled, keep these aligned with Apparel preview:

• Apparel back-view image tag: apparel-back by default; match the shared suffix in Apparel preview. Clear this gallery setting to disable the exception.
• Apparel color option name: Color by default; match the product option name selected in Apparel preview.

The gallery retains the matching color back photo even when it is attached to another variant or strict image hiding is enabled. Other color-tagged back photos follow the hiding filter. Ordinary variant tags and product-tag scopes keep their existing behavior. A plain fallback must still be eligible under those gallery rules.

See Apparel back photos by color for filter settings and troubleshooting.

Configure fees and order files

For a second-print charge, turn on Enable back-design add-on fee, select a purchasable Back-design fee product, and choose Per garment or One-time per customized cart line. The fee applies only when the customer checks the second-side option, regardless of which side holds the first print. The page product's tags and metafields control the builder; the fee product does not need the builder's required product tag.

The first file uses the configured Artwork property, with First print side identifying its physical side on the order. The second file adds Back for a front-first order or Front for a back-first order. With the default property name, that means Artwork plus Artwork Back or Artwork Front. Separate PNG mockups follow the same physical-side labels when enabled and suitable photos and the preview renderer are available.

Use ?preview-align=1 and photo-match alignment rules to configure each side's placement. Before publishing, test front-only, back-only, and two-sided orders; color and size changes; variant-image hiding; required uploads; quantities; original files; mockups; and the configured fee.

Position the preview visually

Use Vero's merchant alignment editor instead of guessing at percentages:

1. Open a storefront product that uses the preview block.
2. Add ?preview-align=1 to the product URL. If the URL already contains a question mark, add &preview-align=1 instead.
3. Upload a representative artwork file so the overlay is visible.
4. Use the dark alignment panel to move, resize, or rotate the print or engraving area. You can drag the overlay directly or enter exact values.
5. Use Applies to for exceptional photos such as back view, then hide or reposition the preview for those matching photos.
6. Select Copy JSON.

For example:

https://your-store.com/products/product-handle?preview-align=1

The older ?patch-align=1 parameter remains an alias, so existing bookmarks continue to work.

Choose where to save the copied JSON:

• Paste it into the block's Advanced JSON setting when every product using that product template shares the placement.
• Paste it into the matching product metafield when one product needs its own placement. Product metafields take precedence over Advanced JSON.

Edit the JSON manually

Both blocks use the Advanced JSON setting to place the preview. The default looks like this:

{
  "alignment": {
    "default": {"x": 50, "y": 50, "width": 40, "rotation": 0},
    "rules": []
  }
}

The values are based on the product photo:

Change one value at a time, save, and refresh the product preview. For Apparel Preview, these merchant settings fix the print area on the product photo. The customer can adjust their artwork inside that area, but cannot move the area itself.

Hide the preview on back or detail photos

Rules can hide the overlay when a product image's alt text or filename contains a specific phrase. Use a precise phrase such as back view, not a broad word such as back.

{
  "alignment": {
    "default": {"x": 50, "y": 50, "width": 40, "rotation": 0},
    "rules": [{"match": "back view", "hide": true}]
  }
}

You can also give a matching photo different placement by including x, y, width, and rotation in its rule.

Optional per-product overrides

Use product metafields when products sharing one template need different colors or placements. When a color metafield is blank, the block's color setting remains the fallback. When an alignment metafield is blank, Advanced JSON remains the placement source.

Create the definitions in Settings → Custom data → Products → Add definition:

After creating the definitions, open a product and fill only the overrides it needs in the Metafields area. Apparel print color is used only in Single color mode. For alignment, paste the complete JSON copied from the visual editor, including the outer alignment property. Vero reads these values from the product automatically when the storefront renders the preview block.

What the customer can do

After choosing a file, the customer can:

• Drag the artwork on the product photo.
• Pinch on touch devices or use sliders to resize it.
• Rotate and reset the artwork position.
• Open the magnifier for a larger, view-only inspection.

For Apparel Preview, the print area itself stays at the placement configured by the merchant. Customer controls move, resize, and rotate artwork only within that area.

On mobile, the product photo stays visible while the controls scroll. The magnified view supports pinch, drag, and double-tap without changing the saved placement.

What reaches the order

The original customer upload is attached as a ZIP file so production receives the exact source file rather than a Shopify-converted WebP or AVIF download.

The Artwork property and Property prefix settings let you rename the labels your production team sees on the order. Keep names consistent across templates so staff can find files quickly.

Preview availability and licensing

The visual overlay loads from Vero's licensed preview service. If the store is not activated or the service is temporarily unavailable, the artwork upload and order properties still work, but the on-product overlay and generated mockup are unavailable. Checkout never waits for the preview service.

If uploads work but no overlay appears, confirm that the current store domain is activated before changing the product configuration.

Launch checklist

• The correct preview block appears only on the intended products.
• A normal product without a preview still adds to cart normally.
• Required artwork blocks Add to cart until a file is selected.
• Accepted file types upload and unsupported files show a clear error.
• Engraving or single-color artwork uses the correct color.
• Full-color apparel artwork keeps its original colors.
• Front, back, and detail photos show or hide the overlay as intended.
• Drag, pinch, sliders, reset, and the magnified view work on mobile.
• The cart and order contain the original artwork ZIP.
• Optional PNG and SVG files appear only when their settings are enabled.
• The order labels are clear to the production team.

Related guides

• Patch Preview Setup Guide
• Product personalization
• Product file upload