How to add an interactive 3D product photo to Shopify

Shopify already shows 3D on product pages, with one catch: every product needs a 3D model file. If what you have is a good product photo, there is a shorter way to an interactive 3D product photo on Shopify. Gifsy turns the photo into a scene a shopper can drag, and Shopify takes it through a Custom Liquid section, which Shopify requires every Theme Store theme to include. No app, no model, about ten minutes. This is the Shopify chapter of the guide to interactive 3D photos for websites.

Quick answer: the 5 steps

1. Make the 3D photo. Upload one product photo at gifsy.fun/create, generate, and click Publish. Copy the iframe.
2. Open the product template. Online Store → Edit theme → the Home page drop-down at the top → Products → Default product.
3. Add a Custom Liquid section. Click Add section, search "Custom Liquid", and paste the iframe into its Liquid code box.
4. Size it for phones. Wrap the iframe in a div with an aspect ratio instead of the copied 500 px height.
5. Save and check on a phone. Drag sideways to turn the product; swipe up and down to scroll past it.

Shopify 3D models vs a 3D product photo

Shopify's own 3D is real 3D: upload a GLB or USDZ file (up to 500 MB) to the product's Media section, and Shopify-built 2.0 themes and Horizon show it in a viewer the shopper can turn to any angle or place in their room. Getting the file is the hard part. You model it in Blender, pay a Shopify Partner (they want photos from several angles plus measurements in millimetres), or use the Shopify app's 3D scanner: an iPhone 12 Pro or newer, three passes, 10 to 15 minutes a product, and by Shopify's own warning, shiny, single-colour and thin products scan badly.

A Gifsy scene is a different thing. It starts from one photo you already have: a model estimates depth, a second one lifts the product off its background, and the shopper drags to turn it about ±20° sideways and ±13° up and down. There is no back side and no AR. It is your photo, with depth.

Pick the model when shoppers need to see the back or check the fit. Pick the photo when you have one great shot and no model budget. The interactive product photos guide puts both next to hotspots and 360° spins.

Check your theme first

Shopify's own test: Online Store → Edit theme, then pick Products → Default product from the drop-down at the top (it starts on Home page). An Add section button under the section list means an Online Store 2.0 theme, and everything below works. No button means a vintage theme, with sections only on the homepage; skip to the product description route.

Step by step: a Custom Liquid section on the product page

1. Make and publish your scene at gifsy.fun/create. Matte products with a little space around them work best; glass and chrome leave holes at the edges, and a product that fills the frame smears when it turns (more in which photos work best for a 3D effect). If the product sits on a plain backdrop, try floating the cut-out on transparency: it then sits on your store's own background instead of in a box. The publish panel copies this:

   <iframe src="https://www.gifsy.fun/embed/<scene-id>" title="Interactive 3D photo" style="width:100%;height:500px;border:0" loading="lazy"></iframe>

2. In Shopify: Online Store → Edit theme, then Products → Default product from the drop-down at the top.
3. In the left sidebar, click Add section, type “Custom Liquid” in the search field, and pick it.
4. Paste the snippet into the Liquid code box.
5. Drag the section so it sits right under Product information, then click Save.

Before you save, know what you just edited. Shopify's rule is that changes to a template “apply to every page that uses the template”, and every product uses Default product until you say otherwise. Save now and your ceramic mug scene shows up on the tote bags too. Fine on a one-product store. Everyone else, read the next section first.

Next to the buy button instead

Dawn and Horizon also have a Custom Liquid block inside the Product information section: hover the section, click Add block, pick Custom Liquid (Horizon files it under Custom). That puts the scene in the details column beside the price and Add to cart. The column is narrow on desktop, so use a square or 4/5 frame.

Only on one product (or a few hundred)

A few products: an alternate template

1. In the theme editor's drop-down, choose Products, then Create template. Name it (say, product-3d), leave Based on as Default product, and click Create template.
2. Add the Custom Liquid section to this template only.
3. In the Shopify admin, open the product and set its Theme template drop-down to product-3d. Save.

Shopify allows 1,000 templates, but one template per scene gets unmanageable long before that.

Many products: one metafield

Past a handful, give each product its own scene id and let one template do the work. Open any product, scroll to Metafields, click Add definition, name it “Gifsy scene” (Shopify turns that into custom.gifsy_scene), choose Single line text, and save. Paste each product's scene id, the part after /embed/, into that field. Then put this in the Custom Liquid section on Default product:

{%- assign gifsy_id = product.metafields.custom.gifsy_scene.value -%}
{%- if gifsy_id != blank -%}
<div style="position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:1/1">
  <iframe
    src="https://www.gifsy.fun/embed/{{ gifsy_id | escape }}"
    title="Interactive 3D photo of {{ product.title | escape }}"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
</div>
{%- endif -%}

Products with an empty field show nothing. It works because Custom Liquid can read the product object on product templates.

Sizing on phones

The copied snippet is full width and a fixed 500 px tall: a tall sliver on a phone, a letterbox on a wide monitor. Size it by aspect ratio instead, and change the title to name the product, since that's what a screen reader announces:

<div style="position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:1/1">
  <iframe
    src="https://www.gifsy.fun/embed/<scene-id>"
    title="Interactive 3D photo of <product name>"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
</div>

Use 1/1 for square product shots, 4/5 for portrait and 4/3 for a lifestyle photo. The max-width keeps a full-width section from becoming a giant square on a big screen. On touch screens the viewer takes sideways drags and leaves vertical swipes to the page, so someone scrolling past the product doesn't get trapped in the frame.

On the homepage

Same section, different template: leave the drop-down on Home page, then Add section → Custom Liquid → paste. For a hero, use 16/9 and delete loading="lazy" so it starts with the page. Put the headline and button in their own section above or below; text layered over the frame blocks the drag.

The product description route

Shopify documents pasting embed code into the rich text editor: click Show HTML, paste, Save. It's per product with no template, and on a vintage theme it's the only option. Two catches. The editor “automatically corrects HTML formatting”, so reopen it and check the wrapper survived. And the scene lands wherever the theme prints the description, usually a narrow column under the price. On a 2.0 theme, use the section.

The badge, and what happens if a scene is removed

The badge and the licence. On a free account, scenes show a small “Made with Gifsy” link inside the frame. Buy any 3D model credit pack (from $9) and it comes off all your embeds, including ones already published. Commercial use is allowed on a free account, so a live product page is fine, and generations are unlimited. Try it on a duplicate of your theme first (Online Store → the theme's ⋯ menu → Duplicate).

Removal. Published scenes stay up until they're removed; self-serve delete isn't built yet, so asking for removal is an email. A removed scene leaves an empty, transparent frame: no error text, just a gap. Keep the normal photos in the product gallery and treat the scene as an extra, never the only image.

Troubleshooting

The code shows up as text, or not at all

It went into a Text or Rich text block. Those take basic formatting only (bold, links, lists). Use Custom Liquid.

An empty box where the scene should be

Check the id: https://www.gifsy.fun/s/<scene-id> should open the scene. If it says “Scene not found”, the id is wrong or the scene was removed.

FAQ

Related: the full iframe embed guide, and the same steps for Webflow and WordPress.