Try i3dify free
Integration guide · Shopify

Embed an interactive 3D lookbook in Shopify

Shopify's Custom HTML block (product pages, blog posts, theme sections) accepts iframes. Drop an i3dify lookbook — beats a Collection scroll.

Get a free i3dify projectMake a flipbook first

Why this works

Shopify supports raw HTML in three places: product descriptions (via the HTML editor toggle), blog posts (Custom HTML block), and theme sections (Custom Liquid block). The i3dify iframe drops into any of these. No Shopify App Store app, no commission.

Step-by-step

4 steps from PDF to live embed

  1. 1

    Publish your i3dify project

    Create a flipbook (for lookbooks, catalogs, brochures), gallery (for product showcase), or album (for seasonal drop visuals). Set to Public or Unlisted. Copy the iframe code.

  2. 2

    Add iframe to product description

    In a Shopify product editor, click the "<>" icon to toggle the HTML editor in the description field. Paste the iframe code where you want the viewer to appear in the product page.

  3. 3

    Or use a Custom Liquid section

    In your theme's online store editor (Customize), add a Custom Liquid section to any page. Paste the iframe code. This works for homepage, collection pages, landing pages.

  4. 4

    Make it responsive

    Wrap the iframe in a div with `aspect-ratio: 4 / 3` (set via inline style or your theme CSS). The viewer scales cleanly across all Shopify themes including Dawn, Sense, Studio, and most third-party themes.

The code

Copy this into Shopify

<iframe
  src="https://i3dify.com/view/YOUR_PROJECT_ID"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="lazy"
></iframe>

Note: Shopify's product description HTML editor strips some attributes for security. If `allowfullscreen` gets stripped, the embed still works — just without the fullscreen button. To preserve it, use Custom Liquid in a theme section instead.

Heads-up

Shopify-specific things to know

Some themes have a max-width container

Shopify themes often constrain content to a max-width (768-1280px). For the 3D viewer, this looks fine. For full-bleed dramatic placement, modify the theme template or use a full-width section.

Product variants do not auto-swap the viewer

If your product has variants (sizes, colors), the embed stays the same across all variants. For variant-specific lookbooks, use one project per variant and conditionally render via Liquid.

Shopify Plus has more flexibility

Shopify Plus stores can use checkout extensions and richer theme code injection. For most DTC brands on standard Shopify, the Custom HTML/Liquid approach above is sufficient.

FAQ

Shopify embed questions

Do I need a Shopify app for this?

No. Shopify natively supports custom HTML in product descriptions, blog posts, and theme sections. App-Store flipbook apps charge $10-30/month for what amounts to an iframe — skip them.

Will the embed slow down my Shopify page speed?

The iframe uses `loading="lazy"` so it only loads when scrolled into view. Lighthouse and PageSpeed treat it as off-screen — minimal impact on LCP. The 3D viewer itself loads ~1 MB on initial scroll-into-view.

Can I use this on collection pages for a seasonal drop?

Yes. Add a Custom Liquid section above the product grid on your collection page. Embed a 3D lookbook of the season. Visitors scroll the lookbook, then scroll into the actual products — higher engagement than a banner image.

Does it work for DTC fashion brands specifically?

Yes — DTC fashion is one of our highest-fit ICPs. Seasonal lookbooks embedded inline on product pages outperform Shopify's 'image with text' sections in our customer data. Press releases that include a 3D lookbook URL get higher editorial coverage too.

Keep exploring

Pages other readers found useful

Free tool

Free PDF to 3D Flipbook Converter

Real 3D page physics, not the 2D CSS flips of Issuu and Flipsnack.

ReadFor your team

i3dify for design & branding agencies

Stop sending clients PDF style guides they skim.

ReadEmbed in

Embed an interactive 3D flipbook in Webflow

Webflow's PDF lightbox is closed-source and ugly.

ReadEmbed in

Embed an interactive 3D flipbook in Squarespace

Squarespace's native PDF block is flat.

ReadComparison

i3dify vs Issuu

Pick Issuu if you publish a recurring magazine and want their reader-network discovery.

ReadFor your team

i3dify for musicians & artists

Replace your Linktree with a 3D visual album fans flip through — cover art, lyrics, tour photos, every streaming link in one place.

Read

Make a project, paste in Shopify

3 free projects on i3dify, no credit card. Each one is one iframe away from being live on your Shopify page.

Start free