Your first product

Turn an ordinary WooCommerce product into a personalizable one: mockup images, print areas, fonts, colors — then place a test order and collect your first print-ready file.

Set up the product

1. Create (or open) a WooCommerce product

   Any product type works. For your first run, use a simple product — a t-shirt or mug is the classic starting point.

2. Enable personalization

   In the product editor, enable Veyo personalization for the product. This adds the design configuration panel where the next steps happen.

   SCREENSHOT PLACEHOLDER

3. Add product views & mockups

   Upload a mockup image for each side customers can design — for example Front and Back. These are the photos customers see behind their design.

4. Draw the print areas

   On each view, draw the printable region. Veyo supports rectangle, rounded-rectangle, and circle print areas — match whatever your production process can actually print. Customers can only design inside this area, and exported files are clipped to it precisely.

   SCREENSHOT PLACEHOLDER

5. Choose fonts and colors

   Pick which fonts and which brand colors customers may use. A curated set keeps designs on-brand and print-safe; fonts render identically in the browser and in the production export.

6. Set output size

   Enter the real-world print dimensions for each area (for example 30 × 40 cm at 300 DPI). This drives the resolution of the exported production files.

7. Publish

   Save the product. The product page now shows the design editor to shoppers.

What your customer sees

On the product page, customers open the designer, add text or upload images, arrange layers inside the print area, and see a live preview on the mockup. When they're happy, they add the design to the cart — the design travels with the cart item through checkout automatically.

1. Design tools

   Shoppers can add text (fonts, outline, spacing; curved text with the Text Curve addon; effects and Smart Badges with Typography Pro), upload images (PNG/JPG/GIF/WebP) with crop and filters, pick cliparts with live recoloring, and manage layers — lock, group, align, and snap. Multi-view editing (front/back/sleeves) and team names & numbers for bulk apparel are built in.

2. Quick Personalization

   For products you enable with a design template, shoppers can personalize right from the shop grid or product card via a lightweight panel with live pricing — no need to open the full designer. Ideal for simple, single-line customizations (a name, a short message) while the full editor remains available for richer designs.

3. Save & manage designs

   Signed-in customers can save a design to My Designs in their WooCommerce account, then reload or edit it later. Guests still design and check out normally; saving to an account is optional.

4. Live price & preflight

   The price updates as they design (computed on your server from your rules — the browser cannot manipulate it). A preflight panel warns before checkout when artwork is below the minimum DPI, crosses safe zones, or leaves the print area.

Place a test order

1. Design and buy your own product

   Open the product in an incognito window, create a small design, and check out (use WooCommerce's cash-on-delivery or a test gateway).

2. Open the order in admin

   In WooCommerce → Orders, open your test order. Each personalized line item shows a preview of the customer's design.

3. Download the print-ready file

   Download the production file for the line item. It is rendered server-side at the output size you configured, clipped to the print area — ready for your printer or production partner.

   SCREENSHOT PLACEHOLDER