This guide shows you how to use the Mockup tab in the Design Studio. It is for anyone building a personalizable product who wants a quick look at how the design sits inside the print area. You will open the preview, keep it fresh while you edit, and save it as an image.
Open the mockup preview
Open the Mockup tab in the right panel of the Design Studio. It renders a snapshot of your current design.
When you have set a product type, the snapshot crops to the print area. That is the part of the product your design actually prints on, so the preview matches what the customer gets.
If you have not picked a product type yet, the tab does not show a snapshot. Instead you see the message Select a product type first to see the mockup preview, with a note to add mockup images for a realistic product view. To set one, switch to the Product tab and choose a product type. After that, the Mockup tab fills in.
Refresh and download
The preview can keep itself current as you work, or you can update it by hand. When you are happy with how it looks, download it as a PNG.
Keep Auto-refresh on, or click Refresh
Leave the Auto-refresh checkbox on to update the snapshot as you edit. After a change, the preview regenerates a couple of seconds later. If you would rather update it right away, click Refresh.
Click Download Mockup to save a PNG
Click Download Mockup to save the current snapshot to your computer. The file is named mockup-preview.png. The button stays disabled until a snapshot has been generated, so refresh first if it looks greyed out.
Common questions
Why is my preview empty?
If no product type is set, the tab shows a message instead of a snapshot. Set a product type on the Product tab, then come back.
Why does the snapshot only show part of my design?
When a product type is set, the preview crops to the print area on purpose. That is the region that prints, so the preview matches the final product.
The preview did not update after I edited. What now?
Auto-refresh waits a couple of seconds after a change. If you do not want to wait, click Refresh to update it at once.
Why is the Download Mockup button greyed out?
Download stays disabled until a snapshot exists. Click Refresh to generate one, then download.
This preview is for you while you build. To see what shoppers experience on the storefront, read about the live preview.
Next: learn how to save and reuse templates so you can reuse a design across products.