Interactive product photos without a 3D model

An interactive product photo is one ordinary product shot that shoppers can drag and turn a little, as if the product were sitting in front of them. You don't need a 3D model or a turntable shoot. A depth model works out the product's shape from the single photo, and the result goes on your product page as one embed.

This is the store version of how that works on Gifsy: what the shopper actually gets, when a 360° spin or a real 3D model is still the better buy, how white-background product shots behave (they were the hardest case we fixed), and what it costs on a shop that sells.

One photo of a sneaker, cut out and given depth. Drag it. The grey behind it is this page: the embed is transparent, so on your store the product sits on your store's own background.

What shoppers get from an interactive product photo

Drag the sneaker. It turns about 20° to either side and about 13° up and down, and the toe and heel shift against the laces the way they would if you tilted your head at a real shoe on a shelf. Until someone touches it, it turns slowly on its own, so it reads as 3D at a glance instead of looking like a still. On a phone, a sideways finger drag turns it and a vertical swipe scrolls straight past. Shoppers who have reduced motion switched on get a still product that only moves when they drag it.

What they don't get is the other side. The scene is built from one photo, so the back of that shoe doesn't exist anywhere in it. Turn much past 20° and the edges would have to show surfaces the camera never saw, which is why the turn stops there. That's the trade: depth and a feel for the shape, for the price of a photo you already have, in exchange for the full rotation. (It used to stop at 23°. We cut it after measuring how far printed labels stretched at the extremes; more on that below.)

Interactive product photo vs 360° spin, 3D model and video

Four ways to make a product page move, and they need very different inputs:

Pick by what the shopper is missing from your current photos. A 360° spin earns its shoot when the back matters: a backpack with pockets on both sides, a chair. A 3D model earns its cost when people need to see the thing in their own room; Shopify shows GLB and USDZ files of up to 500 MB natively, through the phone's camera. Video wins when the product does something, like folding flat or pouring.

The interactive photo wins the case left over, which covers a lot of catalogues. The front of the product is the point, you have a good photo of it, and nobody budgeted for a turntable session per product. Thirty-six photos times two hundred products is a different project from the photos you already shot.

When an interactive photo is the wrong tool

• The back or the underside sells it. Use a 360° spin.
• Shoppers configure the product (swap colours, materials, parts) and want to watch one model change. That's a 3D configurator.
• You want “view in your room”. That needs a GLB or USDZ model; a depth photo has nothing to place.
• You want clickable labels on the photo: specs, prices. That's a hotspot tool, a different kind of interactive. The interactive image tools comparison sorts hotspots, 360° spins and depth photos side by side.

How to make an interactive product photo in three steps

1. Upload one product photo at gifsy.fun/create. 3D needs a free account. The photo stays in your browser while the scene is made; only the finished scene is uploaded, and only when you publish.
2. Pick a look, then Make 3D. With background keeps the whole photo and lifts the product off its own backdrop. Cutout (transparent) drops the background so the product floats on your page. If the product touches the edge of the frame, the tool says so before you publish: there's nothing behind it there, so that edge stretches as the scene turns.
3. Publish and paste the embed. Copy the iframe from the publish panel into your page. The embed guide explains every attribute. Before publishing you can also export a GIF, a WebM or a PNG for the places an iframe can't go, like social posts and email.

White-background product photos: the hard case

A white product on a white sweep looks like the easiest photo there is. One object on a plain background, lit flat. For a cutout model it's the hardest, because the edge it has to find is white against white.

We found that out on a white high-top. The cutout model (ISNet) handed back a matte with two holes in the side of the shoe, whole panels marked as background, the larger one 52% of the shoe. The depth model disagreed and saw one solid near object. The sole came back 60% transparent: invisible on a white page, a dark band on any other colour. And under the sole, the matte kept a wide, faint strip of studio floor and soft shadow. Also invisible on white. A grey smudge on everything else.

So before a scene is built, the cutout is now checked against the depth map:

• Dropped panels come back. A hole that is fully enclosed, at the product's depth, ringed by solid pixels and at least 5% of the product is filled from the photo. The gap inside a mug handle sits at background depth, so it stays open.
• Half-transparent parts go solid. A see-through patch at the product's depth whose colour continues the material around it is missing product, not glass. That fixed the 60% sole.
• The floor goes. Faint grey regions at the bottom of the product, below its solid pixels, are floor and shadow. This is decided per region rather than per pixel, because a per-pixel rule punched holes in a glass bottle's clear base.
• Opaque shadows go too. No transparency rule sees a fully opaque contact shadow, but the depth model puts the floor behind the sole standing on it. Dark, grey, flatter than tall, at the bottom and farther away than the product: removed.

Two limits we kept rather than hid. Clear glass on a white sweep looks exactly like a missing piece of product, so a clear glass base can turn solid white. And a see-through part whose colour matches the background, like the collar loop on that same shoe, stays see-through, because to both models that's what a real gap looks like. For a mostly glass product, shoot on a darker background, or keep the With background look so the photo's own backdrop fills any gap.

Labels were the other product fix. Early scenes pushed a bottle's printed logo into the relief as if it were embossed, and at the far end of the turn those little ramps stretched the label up to about seven times: warped lettering, streaks off the edges. Now the product's surface uses smoothed depth (only its outline keeps the sharp version), and every slope is capped so nothing stretches more than 2.5 times at the end of the turn. That cap, and the smaller 20° turn, is what keeps printed text legible as the product moves.

Cutout or backdrop: what shoppers see behind the product

With the cutout, the published embed is transparent. The product sits on whatever your page already is: your store's off-white or its brand colour. Change the theme next season and the product follows.

The backdrop picker is for everywhere else. Seven flat colours, ten gradients named like studio lighting (Midnight Studio, Golden Hour, Arctic Glass and seven more), or any hex colour you type. It shows on the scene's share page and is baked into GIF and WebM exports. A PNG export of a cutout stays transparent.

One thing a cutout doesn't get is a drop shadow. With nothing behind the product to land on, the shadow read as a grey ghost copy drifting beside it, so we took it off. Scenes that keep their background do get a soft contact shadow, cast on the backdrop and moving a little less than the product, which is what makes it look like it stands clear of the wall.

Which product photos work best

• Three-quarter view over dead-on. A box shot square to the camera has little depth to show. Turn it so there's a near corner and a far one.
• Room around the product. Leave a margin on every side. A product that fills the frame has nowhere to move.
• 640 px or more on the long edge. Smaller works but comes out softer, and the tool warns you.
• Matte beats shiny. Boxes, shoes, bags, cans and opaque bottles cut out cleanly. Clear glass and chrome confuse the cutout.

More on angles and backgrounds, with the failure cases, in the best photos for a 3D effect.

Where an interactive product photo goes on a store

Anywhere your platform accepts an iframe. Three places earn it:

• The product page, beside or below the gallery. Shopify's product media gallery takes images, videos, YouTube or Vimeo links and 3D model files, not iframes, so the live scene goes in a section of the product template. Inside the gallery, the scene's WebM or GIF export works as a moving, non-interactive version. Steps: add an interactive 3D product photo to Shopify.
• A launch or collection banner. One flagship product as a cutout on the brand colour. Layout and loading for above-the-fold scenes are in the 3D hero image guide.
• Webflow and Framer shops. A Code Embed or Embed element; see the Webflow and Framer guides.

On weight: the embed loads one WebP image, a small PNG depth map, the mask, a 1 KB manifest and the viewer script, all from an edge cache. No video decodes and no AI runs on the shopper's phone. Use loading="lazy" below the fold, keep one live scene per screen (each starts its own WebGL context), and give the iframe the same aspect-ratio wrapper as your product images so nothing jumps when it loads.

What it costs

Nothing. 3D photos are free and unlimited with a free account, the depth model runs on your device, and commercial use, a shop that sells included, is allowed. Published scenes carry a small “Made with Gifsy” badge; buying any 3D model credit pack (from $9) removes it from all your embeds. No subscription and nothing per product. Details on the pricing page.

FAQ

Make an interactive product photo. Related: interactive 3D photos for websites, how 3D photos work, and the 3D photo maker comparison.