So that's what I built: a 3D view where the customer turns their own design around on the shirt, right on the product page.

A customer places a photo and text, picks navy, and opens 3D. Recorded in a test store, nothing staged.

The catch with most 3D product previews is that someone has to make a 3D model first, in 3D software. Small print shops don't have that. They have photos: the front and the back of a white shirt on a hanger. So when I added 3D to PrintBlob, the WooCommerce product designer I make, the rule was simple: it has to work from those two photos and nothing else.

Here's what happens when a customer presses 3D, in plain words.

1. Your photo already knows the shape

A product photo with a transparent background tells you exactly where the shirt ends. The 3D view traces that edge, so the 3D shirt has your photo's outline, down to the sleeve hems. Nothing is drawn by hand, and nothing can drift away from the picture.

The front photo as the plugin gets it. The grey checks are the transparent background.

2. Depth comes from the distance to the edge

A real shirt is thin at the seams and fullest across the chest. So each point gets a little thicker the further it is from the edge: the edges round over like fabric, the middle stays gently full, and the sleeves come out slim on their own.

Turned part of the way and held: fullest across the body, thin at the edges. Let go and it swings back.

3. The back is your back photo

Turn the shirt round and you see your back photo, with the customer's back print on it. The front and the back meet along the same edge, so there's no gap when the shirt is seen from the side.

One shirt, two prints: the back, then Front turns it round.

4. The print follows the folds

The design isn't pasted on top of the photo. It's lit by the shirt's own light, taken from your photo, so the creases run through the print the way they would with real ink on fabric. That's also why one white photo is enough for every shirt colour you sell.

Same design, six shirt colours, the print following each one's folds.

What it means for your shop

• No 3D model and no 3D software. A front and a back photo of your product is all it takes.

• Your product page stays fast. The 3D part loads only when a customer presses 3D, and it only draws while the shirt is moving.

• Nothing breaks on weaker devices. Where a browser can't draw 3D with the device's graphics chip, the 3D button simply doesn't appear, and the designer works as before.

Where it falls short

I'd rather you hear the limits from me:

• It isn't a scan. Every product gets the same kind of rounded shape, worked out from its outline.

• It shows the front and the back from your photos. The sides in between are filled in, not photographed.

• Your photos matter more than anything in the code. A back photo taken from a different distance shows up as a thin sliver at the sides, and harsh shadows make the print look patchy. I wrote down every fix I've found in this guide to 3D from product photos.

Try it yourself

Turned once round by hand. Let go and it coasts, then settles on the front.

You can turn the shirt yourself in the live demo, with nothing to install. The designer is a free plugin in the WordPress.org directory, and the 3D view is part of PrintBlob Pro.

If you run a print shop on WooCommerce, I'd love to hear what you'd want your customers to see before they order.