Skip to main content
A mockup is a photo of your physical product with a print area mapped onto it. Customei takes your flat design, warps it onto the mockup’s print area, and gives you (and your customer) a realistic preview — a mug with your art on it, a shirt with your graphic, a phone case with a photo.

​
Why mockups matter

  • Realism on the storefront. Customers see the product as it’ll actually look, not as a flat canvas — which dramatically improves conversion.
  • Design confidence. You can tell at a glance if a layout reads well on the real product shape.
  • Marketing-ready previews. The same mockup powers your product photos, social posts, and cart thumbnails.

​
The editor’s two views

The template editor shows two panels side by side once a mockup is attached:
  • Design view — the flat canvas you compose on.
  • Mockup view — the live warp onto the product photo.
You design on the flat view; the mockup updates in real time.

​
Attach a mockup to a template

1

Open the template in the editor

Or create a new template first.
2

Open the mockup panel

From the toolbar or template settings, pick Mockup → Choose.
3

Pick a mockup

Select one from the library, or click Upload to create a new mockup. See Mockups → Upload and configure for the full mockup creation flow.
4

Adjust the print area if needed

The mockup’s print area is defined when the mockup is created, but you can fine-tune how your design maps onto it from this panel — for example, offset it slightly if your template has a different aspect ratio than the mockup expects.

​
How the warp works

Customei uses a mesh deformation to warp your design onto the mockup’s print area. The print area is defined as a 2D grid on the mockup photo when you create the mockup; the editor maps the flat canvas onto that grid. This means:
  • Curved surfaces (mugs, bottles) can display a design that appears to wrap around the product.
  • Perspective surfaces (phone cases at an angle) can show a design that appears to sit in 3D space.
  • Flat surfaces (postcards, posters) work with a 1:1 mapping.

​
Storefront previews

When you publish a template + option set for a product, the mockup view becomes what the customer sees on the product page — not the flat canvas. Every time they edit an option, the warped mockup updates in real time. If you don’t attach a mockup, the storefront falls back to the flat canvas on a plain background. That works, but it’s far less compelling.

​
Changing or swapping mockups

You can swap a mockup on a template at any time. The flat design stays exactly the same; only the warp target changes. Use this to test how the same design looks across different product shapes (the same logo on a mug, a t-shirt, and a tote bag).

​
Next