Live demo
A product page with a design editor built on Polotno SDK: the customer decorates the front and back of a t-shirt, and the shop gets a print file cut to the print area. Design a shirt and download the file the printer would receive.
This is the product page of a fictional print-on-demand shop. It sells one cotton t-shirt in black, blue and red, with a 249 × 265 mm print area on the front and on the back.
Add text, photos, stickers or your own image inside the dotted line, switch between Front and Back, and change the colour. Then download the print file as a PDF or a PNG and see what the print shop would receive.
Nothing you design is saved or sent anywhere.
A print-on-demand order has two readers. The customer wants to see the shirt they are buying. The print shop wants a file it can put on the press without asking anyone a question.
Those are two different pictures. The customer looks at a garment photo in the colour they chose. The printer needs the artwork alone, at physical size, on a transparent background, cut to the area the press can reach. A storefront that only produces the first leaves someone to make the second by hand for every order.
Here one design document produces both. The shirt, the print window and the guide line are locked layers in the same Polotno design as the customer's artwork, and the print export leaves them out.
The editor opens on the front of a black shirt with the print area marked by a dotted line. The side panel carries photo search, elements and shapes, uploads, text and a sticker set. Stickers are placed at the centre of the print area.
Editor on the left, product panel on the right: sides, colour, cart and print file.
The garment photo is a layer in the design, locked so it cannot be selected, moved or deleted. Above the artwork sits a second copy of the photo with the print area cut out of it, and above that the dotted guide. The only thing the customer can pick up is their own artwork.
Anything dragged past the dotted line disappears behind the shirt. The shirt on screen shows exactly what the print file will hold.
The half of the sunflower outside the line is hidden, and it is missing from the print file too.
Front and back are separate print areas with separate artwork. Switching sides keeps each design as the customer left it. Changing the colour swaps the garment photo on both sides and leaves the artwork where it is.
The back has its own artwork. The colour applies to both sides.
The print file holds the artwork and nothing else: no shirt, no guide line, no background. Each side comes out at 249 × 265 mm and 300 DPI.
The checkerboard marks transparency. The shirt colour comes from the fabric.
The file is built in a second, hidden editor, so the customer's canvas does not change while the export runs.
Most customers decorate one side. The PNG export skips any side with no artwork, so a front-only shirt produces one file. The PDF always has two pages, so page 1 is always the front.
Exporting a blank shirt as PNG shows a message asking for artwork instead of downloading empty images.
The design is a JSON document, so the print file does not have to come from the customer's browser. Store the JSON with the order. When the order is paid, the server builds the same print pages from it and sends them to the rendering API. A reprint months later renders from the same document.
Use this if you run a print-on-demand or merch store and want customers designing on the product page, with print files that go to production as they are. Or if you build software for apparel platforms and want this inside your product. The wider print case is on the web-to-print page.
Need this built against your own products, print areas and fulfilment partner? That is work we take on. Talk to us.
TRUSTED BY
100,000+
CREATORS
300+
BUSINESSES
