Guided Patch Builder in Vero2
The patch-builder product template is optional. Assign it only to products that should use the guided builder. Existing Patch Preview products keep their current layout and settings until you change their template.
1. Keep the patch material library
The guided builder uses the same material sets, materials, and engraving colors as Patch Preview. See Patch Preview Setup Guide for their definitions, entry values, texture images, and engraving color rules. The starter template includes sample material-set selections. Review those selections in the theme editor and choose your store's published material sets in the Patch designer block's Material sets setting.
The preview renderer requires the existing Vero license activation. If it cannot load, the canvas says so while the artwork upload and product form remain available. Check the license and renderer before using the template for orders.
2. Create the product and optional charge products
Create the patch product in Shopify. Its selected variant is the base patch price. To sell priced standard sizes, create Shopify size variants, set their prices, and leave the nested Size variant picker in the Patch designer. Every product starts with Use recommended dimensions. A product with only the default variant also offers custom dimensions; the standard-size choice is hidden. Recommended and custom dimensions are saved as line item properties. Recommended dimensions use the base price; custom dimensions also use the base price unless a custom-size fee is configured.
For a flat charge per custom-size patch, create a separate custom-size fee product and its priced variant. For optional backing, create a backing product with a variant for each backing style and its per-patch price. Publish the products and make the selected variants available. The builder adds one unit of each chosen charge for every patch ordered. These charges are normal Shopify cart lines linked to the patch line; Shopify checkout determines the final total. Do not add a fee if the charge is already included in a size variant.
3. Configure the template
Open the Patch builder product template in the theme editor. Its Product
information section has Standalone patch preview enabled and its Patch
designer has Standalone patch product enabled. Keep the gallery selector as
.patch-builder-canvas. The artwork upload appears first, followed by shape,
size, material, engraving, cleanup, placement, backing, native quantity, and
review. The media column stays visible on desktop and above the controls on
small screens; it compacts when a short viewport or open keyboard needs room.
The Product information section's top and bottom padding and the Product media
block's padding and corner radius apply to the standalone patch canvas.
Circle, square, and diamond use a single diameter or side length for custom
sizing. Their saved width and height match. Recommended dimensions by shape
sets the starting size for each outline: wide shapes default to 3 × 2 inches,
tall shapes to 2 × 3, and balanced shapes to equal sides. Edit its comma-separated
shape:widthxheight values for your stock, including custom shape IDs. A shape
change updates the recommended size, preview label, and order properties.
Shopify size variants remain the merchant's priced standard-size choices.
On a standalone patch, customers can move artwork on the patch but do not see whole-patch position-on-product controls. The editor hides hat-only text and fee controls. Shopify does not support conditional visibility for product and metaobject picker settings; the remaining hat-only pickers are labeled and ignored by standalone patch products.
The guided builder uses artwork chosen on its own product page. A design saved earlier in Hat Lab or another product does not carry into this form or order.
Choose Custom size fee product and, if needed, Custom size fee variant ID in the Patch designer. Choose Backing add-on product to expose the backing choice. Leave either product blank to omit that charge. The template's artwork guidance and FAQs are normal text and accordion blocks; edit them in the theme editor. To change guided form labels and errors, use Online Store → Themes → … → Edit default theme content.
Optional per-product charge references
For different charge products on different patch products, first create these product metafield definitions in Settings → Custom data → Products:
| Namespace and key | Type |
|---|---|
custom.patch_backing_product | Product reference |
custom.patch_custom_size_fee_product | Product reference |
Select the appropriate products in these metafields on each patch product. Leave a field blank to use the shared product selected in the Patch designer block. The optional Custom size fee variant ID setting still chooses the charged variant from the selected fee product.
4. Enable quantity estimates
Enable the 424Discounts Tier rules data bridge app embed and turn on Expose rules on product pages. Keep Expose rules on every page off unless another feature needs it. Publish tier rules targeting the patch product, one of its collections, or one of its tags. The builder uses the first matching published rule, shows its tiers, and estimates the selected patch variant separately from backing and custom-size charges. Product-scope estimates include existing cart quantity for the same product; target-scope estimates may pool other eligible cart lines, so checkout is the final charged price. If the embed is disabled or no rule matches, the builder shows the regular base price.
5. Check a preview product before assignment
In an activated preview store, use the theme editor's product preview to check one product with standard variants and one with only the default variant. Test upload, shape and material changes, engraving color, cleanup and restore, custom dimensions, backing selection, quantity, rights and approval checks, and add to cart. Confirm the cart has the original artwork, size and choices on the patch line and the selected charges as separate lines with matching quantities. Test an unavailable fee variant and a failed add-on request: the builder should show the incomplete-cart error. Finally check a narrow mobile screen, a short viewport, and an open keyboard.
The default Open light details preview treatment clears pale pixels throughout the upload, including light letters inside a dark logo. Customers can restore the original appearance, clear only an outer light background, or select a color to clear. Color tolerance and edge softness refine the display. Preview cleanup only changes the image sent to the on-screen renderer. The original uploaded file is the production artwork, and the cleanup choice and control values are recorded in the patch specification. The optional PNG/SVG preview exports are attached when the licensed renderer can supply them.