How to Add 360-Degree Product Photography to Shopify

Key takeaways

• Shopify 360 product photography is a sequence of frames the shopper drags through to rotate the product. A common setup is 36 frames at 10-degree intervals.¹
• Shopify has native 3D and AR media built into the product media pipeline. It uses Google’s model-viewer and requires a 3D model, not a photo sequence.²
• For flat photo spins, you choose between a 360 spin app or a custom JavaScript viewer. Apps are faster to ship; custom code keeps the markup in your theme.
• Performance is the real risk. A full-resolution 36-frame set can reach 10-20 MB, so compress every frame and lazy-load the viewer.¹
• Never lazy-load your LCP image. The first gallery frame the shopper sees should load eagerly.³

360 product photography shows a product from every angle in a single interactive viewer. The shopper drags left or right, or the frames auto-rotate, and the product appears to spin. On a Shopify product page (PDP) this replaces guesswork with a full view of the item.

This guide covers how to capture the frames, prepare the files, and put a spinner on the page. It compares Shopify’s native 3D media, dedicated spin apps, and a custom code viewer, and it treats page speed as a first-class concern.

Why you can trust us

Jacques has over 15 years of development experience and has worked with hundreds of Shopify stores. We built Fudge - an AI-native Shopify page builder and store editor with a 4.8 rating and a Built for Shopify badge. We work with product page media every day.

What is 360-degree product photography?

A 360 spin is not a single photo and not a video. It is an ordered set of still frames, each showing the product rotated by a small step. Software swaps frames as the shopper drags, so the object looks like it turns in place.

The two inputs that matter:

• Frame count. More frames means a smoother spin and a larger download. A common setup is 36 frames at 10-degree intervals.¹
• Frame size. A width of roughly 1200-1500px keeps detail without bloating the file.¹

This differs from a 3D model, which is a single geometry file the browser renders in real time. Shopify’s native media pipeline handles 3D models and AR, not photo sequences.² More on that split below.

How to capture 360 image sequences

Turntable and camera

The reliable method is a motorised turntable. Place the product in the centre, fix the camera and lighting, and capture one frame per rotation step. A 10-degree step produces 36 frames.¹

Consistency is what sells the effect:

• Keep the camera and lighting locked between frames so only the product moves.
• Centre the product on the turntable so it does not drift across the frame.
• Shoot on a clean, even background so you can mask each frame the same way.

Frame count choices

Fewer frames download faster but spin in visible steps. More frames feel smooth but cost more bytes. 24 frames (15-degree steps) is a lighter option; 36 frames (10-degree steps) is the common middle ground; 72 frames doubles the smoothness and the weight.¹

Sourcing without a studio

If you cannot shoot in-house, a product photography studio can deliver a ready sequence. Many provide 36 high-resolution JPEGs per product at a 10-degree interval.¹ You still own the file prep and the page work.

File preparation

Raw studio frames are rarely page-ready. Three steps get them there.

1. Name frames in order. Use zero-padded numbers (frame-01.webp … frame-36.webp) so the viewer loads them in sequence.
2. Crop and align every frame identically. Any drift between frames shows up as a wobble during the spin.
3. Compress each frame. This is the step most stores skip, and it is the one that protects page speed.

Modern formats compress better than JPEG. WebP images are around 30% smaller than JPEG at equivalent quality, and AVIF can go further.⁴ For product photos, a quality setting in the 75-85 range holds detail while cutting weight.⁴

Do the maths on the full set. Thirty-six frames at 300 KB each is 10.8 MB. The same thirty-six frames at 60-80 KB each is roughly 2-3 MB.¹ That difference is the gap between a fast PDP and a slow one.

Three ways to add a 360 spin to a Shopify PDP

There are three routes. They differ in setup effort, where the code lives, and what input they need.

Method 1: Shopify native 3D and AR media

Shopify supports 3D models directly in the product media section. Upload a model and the theme renders it with Google’s model-viewer component, so shoppers can rotate and zoom in the browser.² AR runs through the Shopify-XR library, which powers AR Quick Look on iOS Safari and Scene Viewer on Android.²

In a theme, media is rendered by looping over product.media and applying the matching Liquid filter. For a 3D model that filter is model_viewer_tag.²

The trade-off is the input. Native media wants a 3D model, not a photo spin. If you have turntable photos rather than a modelled asset, this route does not apply. Shopify’s UX guidance also asks that 3D media default to inactive on load and show a progress bar while it loads.⁵

To add a model without touching code, upload it under Products > (your product) > Media. For related media steps, see how to add video to a Shopify product gallery and how to update product images in Shopify.

Method 2: A 360 spin app

Spin apps take your photo sequence and produce an interactive viewer you place on the PDP. You upload the frames, set controls like drag sensitivity and autoplay, and drop the viewer into the page through the app’s block or embed.

The upside is speed. You skip the code and rely on the app to handle mobile touch and frame swapping. The cost is the usual app trade-off: an added script on your product page, a recurring fee in most cases, and viewer markup you do not own. Check what each app does to your PDP load before committing.

Method 3: A custom JavaScript spin viewer

If you want the viewer in your own theme with no third-party script, a custom spinner is a small amount of code. The idea: preload the frame sequence, then swap the visible frame based on how far the pointer has dragged.

<div id="spin-360" data-frames="36" style="touch-action: pan-y;">
    <img
        id="spin-frame"
        src="/cdn/shop/files/frame-01.webp"
        width="1200"
        height="1200"
        alt="Product 360 view, frame 1"
    />
</div>

<script>
    const el = document.getElementById('spin-360')
    const img = document.getElementById('spin-frame')
    const total = parseInt(el.dataset.frames, 10)
    const base = '/cdn/shop/files/frame-'
    const pad = (n) => String(n).padStart(2, '0')

    let current = 1
    let dragging = false
    let startX = 0

    // Preload frames so swaps are instant once the viewer is active.
    const preload = () => {
        for (let i = 1; i <= total; i++) {
            const pre = new Image()
            pre.src = base + pad(i) + '.webp'
        }
    }

    const setFrame = (n) => {
        current = ((n - 1 + total) % total) + 1
        img.src = base + pad(current) + '.webp'
    }

    const onMove = (x) => {
        if (!dragging) return
        const step = Math.round((x - startX) / 8) // pixels per frame
        if (step !== 0) {
            setFrame(current + step)
            startX = x
        }
    }

    el.addEventListener('pointerdown', (e) => {
        dragging = true
        startX = e.clientX
        preload() // load the full set on first interaction, not on page load
    })
    window.addEventListener('pointermove', (e) => onMove(e.clientX))
    window.addEventListener('pointerup', () => (dragging = false))
</script>

Two details make this viewer behave. Pointer events cover mouse and touch in one code path. touch-action: pan-y on the container lets shoppers still scroll the page vertically while dragging the spin horizontally, which matters on mobile.

Preloading on first interaction, rather than on page load, keeps the heavy frame set off the critical path. The first frame is a normal image in the gallery; the rest load only when the shopper reaches for the spin.

Building this by hand means editing theme files. If you would rather describe the viewer in plain language and have on-brand, Shopify-native code generated for you, that is what Fudge does. See also our guide on customising a Shopify product page.

Mobile drag and touch

Mobile is where a spin viewer either works or frustrates. Two conflicts need handling.

• Horizontal drag vs vertical scroll. Without touch-action: pan-y, a horizontal drag can hijack the page scroll or vice versa. Setting touch-action tells the browser which gesture belongs to the spin.
• Tap vs drag. A quick tap should not jump the frame. The step calculation above ignores tiny movements, so a tap leaves the frame in place.

Shopify’s own media guidance is to default media to inactive on mobile, so the shopper starts the interaction rather than the page grabbing their first touch.⁵ Apply the same rule to a custom spinner: show the first frame, and only start swapping once the shopper drags.

Performance: keep the spin off the critical path

A 360 viewer is one of the heaviest things you can put on a PDP. A full-resolution 36-frame set can reach 10-20 MB.¹ Handled carelessly, that wrecks your load time. Three rules keep it in check.

1. Compress every frame

Covered above, and it is the biggest lever. Serve WebP or AVIF, which run around 30% smaller than JPEG at the same quality.⁴ Aim for tens of kilobytes per frame, not hundreds.¹

2. Lazy-load the frame set

Only the first frame needs to be in the initial page load. The rest should load when the shopper interacts, or when the viewer scrolls near the viewport. Native loading="lazy" defers off-screen images without any script.³ For a drag-triggered set, load the sequence on first interaction, as the code above does.

3. Protect your LCP

Do not lazy-load your LCP image. web.dev is explicit: do not lazy-load images likely to be in the viewport on load, especially the LCP image.³ On a PDP the first gallery image is usually the LCP element, so let it load eagerly and lazy-load only the extra spin frames. Always set width and height on every frame to avoid layout shift.³

For broader PDP speed work, see how to speed up a Shopify theme and how to lazy-load videos in Shopify, which applies the same defer-until-needed pattern to heavy media.

Apps vs custom code: an honest comparison

Neither route is strictly better. It depends on your team.

A 360 spin app is the right call if you want the viewer live quickly, you do not want to maintain theme code, and you are fine adding one more app script to the PDP. The app handles frame swapping and touch for you.

Custom code is the right call if you want the viewer markup in your own theme, you care about controlling exactly when frames load, and you want to avoid a recurring app fee and an extra third-party script. The cost is the code and its upkeep.

The native 3D route sits apart: it is the best experience where it fits, but it needs a 3D model, not photos, so it is not a drop-in replacement for a photo spin.

Whichever route you pick, the ordering of your gallery still matters for which image loads first. See how to reorder product images in Shopify to make sure your LCP frame is the one shoppers see first.

Summary

360 product photography turns a static gallery into an interactive spin. Capture 24-72 frames on a turntable, compress every frame hard, and put them on the page through native 3D media, a spin app, or a custom JavaScript viewer. The method matters less than the performance discipline: compress the frames, lazy-load the set, and never lazy-load your LCP image.¹³⁴

If you would rather skip the theme editing and describe what you want in plain language, Fudge generates Shopify-native code for product page media directly in your theme.

FAQ