So fügst du Shopify 360-Grad-Produktfotografie hinzu

Das Wichtigste in Kürze

• Shopify 360-Grad-Produktfotografie ist eine Bildsequenz, durch die der Käufer zieht oder wischt, um das Produkt zu drehen. Ein gängiges Setup sind 36 Frames in 10-Grad-Schritten.¹
• Shopify hat native 3D- und AR-Medien in die Produktmedien-Pipeline integriert. Es nutzt Googles model-viewer und erfordert ein 3D-Modell, keine Bildsequenz.²
• Für 2D-Foto-Spins wählst du zwischen einer 360-Spin-App oder einem benutzerdefinierten JavaScript-Viewer. Apps sind schneller einsatzbereit; Custom Code behält das Markup in deinem Theme.
• Performance ist das eigentliche Risiko. Ein 36-Frame-Set in voller Auflösung kann 10-20 MB groß werden. Komprimiere also jeden Frame und lade den Viewer per Lazy Loading.¹
• Lade dein LCP-Bild niemals per Lazy Loading. Der erste Galerie-Frame, den der Käufer sieht, sollte sofort (eager) geladen werden.³

Die 360-Grad-Produktfotografie zeigt ein Produkt aus jedem Blickwinkel in einem einzigen interaktiven Viewer. Der Käufer zieht nach links oder rechts, oder die Frames rotieren automatisch, sodass sich das Produkt scheinbar dreht. Auf einer Shopify-Produktseite (PDP) ersetzt dies das Rätselraten durch eine Rundum-Ansicht des Artikels.

Dieser Guide behandelt, wie man die Frames aufnimmt, die Dateien vorbereitet und einen Spinner auf die Seite bringt. Er vergleicht Shopifys native 3D-Medien, dedizierte Spin-Apps und einen Custom-Code-Viewer und behandelt Page Speed als oberste Priorität.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und mit hunderten von Shopify-Shops gearbeitet. Wir haben Fudge entwickelt – einen KI-nativen Shopify Page Builder und Store Editor mit einer Bewertung von 4.8 und einem Built for Shopify-Badge. Wir arbeiten jeden Tag mit Medien für Produktseiten.

Was ist 360-Grad-Produktfotografie?

Ein 360-Grad-Spin ist weder ein einzelnes Foto noch ein Video. Es ist eine geordnete Menge von Standbildern, von denen jedes das Produkt um einen kleinen Schritt gedreht darstellt. Die Software tauscht die Frames aus, während der Kunde wischt, sodass es aussieht, als würde sich das Objekt drehen.

Die zwei wichtigsten Faktoren:

• Frame-Anzahl. Mehr Frames bedeuten einen flüssigeren Spin, aber auch einen größeren Download. Ein übliches Setup sind 36 Frames in 10-Grad-Schritten.¹
• Frame-Größe. Eine Breite von etwa 1200-1500px bewahrt die Produktdetails, ohne die Dateigröße extrem aufzublähen.¹

Das unterscheidet sich von einem 3D-Modell, welches eine einzige Geometrie-Datei ist, die der Browser in Echtzeit rendert. Shopifys native Media-Pipeline verarbeitet 3D-Modelle und AR, jedoch keine Fotosequenzen.² Mehr zu diesem Unterschied weiter unten.

So erstellst du 360-Grad-Bildsequenzen

Drehteller und Kamera

Die verlässlichste Methode ist ein motorisierter Drehteller. Zentriere das Produkt, fixiere Kamera und Beleuchtung, und schieße pro Rotationsschritt ein Foto (Frame). Ein 10-Grad-Schritt liefert am Ende 36 Frames.¹

Konsistenz macht den Effekt überzeugend:

• Fixiere Kamera und Licht zwischen den Aufnahmen, damit sich ausschließlich das Produkt bewegt.
• Zentriere das Produkt auf dem Drehteller genau, damit es im Bild nicht verrutscht.
• Fotografiere auf einem sauberen, gleichmäßigen Hintergrund, damit du später jeden Frame identisch freistellen kannst.

Auswahl der Frame-Anzahl

Weniger Frames laden schneller, verursachen beim Drehen aber sichtbare Stufen. Mehr Frames wirken flüssiger, kosten jedoch mehr Bytes. 24 Frames (15-Grad-Schritte) sind die leichtere Option; 36 Frames (10-Grad-Schritte) der gängige Mittelweg; 72 Frames verdoppeln zwar die Flüssigkeit – aber auch das Gewicht.¹

Materialbeschaffung ohne eigenes Studio

Wenn du nicht In-House fotografieren kannst, liefert die Beauftragung eines Produktstudios direkt fertige Sequenzen. Viele Studios bieten 36 hochauflösende JPEGs pro Produkt mit einem 10-Grad-Intervall an.¹ Um die Vorbereitung der Dateien und die Einbindung auf deiner Website musst du dich dann aber trotzdem noch kümmern.

Dateivorbereitung

Unbearbeitete Studio-Frames sind selten direkt reif für die Webseite. Mit diesen drei Schritten machst du sie startklar.

1. Nummeriere die Frames in der richtigen Reihenfolge. Verwende Formate mit führenden Nullen (frame-01.webp … frame-36.webp), damit der Viewer sie zuverlässig nacheinander lädt.
2. Beschneide und richte jeden Frame absolut identisch aus. Jedes leichte Verschieben zwischen den Frames äußert sich später als nerviges Wackeln im Spin.
3. Komprimiere jeden Frame einzeln. Die meisten Stores überspringen diesen Schritt – dabei ist genau das der wichtigste Schutz für deinen Page Speed.

Moderne Formate komprimieren besser als JPEG. WebP-Bilder sind bei gleicher Qualität etwa 30 % kleiner als JPEGs, mit AVIF kannst du oft noch weiter runtergehen.⁴ Für Produktbilder ist eine Qualitätsstufe im Bereich von 75-85 ideal, um Details beizubehalten und das Gewicht zu minimieren.⁴

Rechne das mal für ein ganzes Set durch: 36 Frames à 300 KB ergeben 10,8 MB. Die gleichen 36 Frames auf 60-80 KB komprimiert bringen es auf gerade mal 2-3 MB.¹ Dieser Unterschied ist oft die Grenze zwischen einer schnellen und einer langsamen PDP.

Drei Wege, um deiner Shopify-PDP einen 360-Grad-Spin hinzuzufügen

Es gibt drei Wege. Sie unterscheiden sich im Setup-Aufwand, dem Speicherort des Codes und dem benötigten Input.

Methode 1: Native 3D- und AR-Medien in Shopify

Shopify unterstützt 3D-Modelle direkt in den Produkteinstellungen unter “Medien”. Du lädst ein Modell hoch, und das Theme rendert dieses über den model-viewer von Google. So können Käufer es direkt im Browser zoomen und rotieren.² AR wird über die Shopify-XR Library ermöglicht, welche “AR Quick Look” im iOS-Safari und den “Scene Viewer” unter Android bedient.²

Im Theme-Code werden die Medien ausgegeben, indem man in einer Loop durch product.media läuft und den passenden Liquid-Filter anwendet. Für ein 3D-Modell ist das der Filter model_viewer_tag.²

Der Trade-off liegt im benötigten Input. Native Medienkanäle verlangen zwingend ein 3D-Modell, keinen Foto-Spin. Wenn du Drehteller-Fotografien hast und kein modelliertes 3D-Asset, dann scheidet dieser Weg für dich aus. Die UX-Richtlinien von Shopify fordern zudem, dass 3D-Medien beim Laden vorerst standardmäßig inaktiv bleiben und während des Ladens einen Ladebalken anzeigen.⁵

Um ein Modell ohne Code-Eingriffe hinzuzufügen, lädst du es einfach im Adminbereich unter Produkte > (dein Produkt) > Medien hoch. Weitere Tutorials hierzu findest du unter Video zu einer Shopify-Produktgalerie hinzufügen und So aktualisierst du Produktbilder in Shopify.

Methode 2: Eine 360-Grad-Spin-App

Spin-Apps nehmen deine fortlaufende Fotoreihe und erzeugen daraus einen interaktiven Viewer, den du dann auf deiner Produktdetailseite platziert. Du lädst die Frames hoch, stellst Eigenschaften wie Zieh-Sensibilität und Autoplay ein, und bindest den Viewer über einen App-Block oder ein Embed in die Seite ein.

Der Vorteil ist das Tempo. Du sparst dir den Code und verlässt dich auf die App bei der Handhabung von Touch-Swipes auf mobilen Geräten und dem Frame-Tausch. Der Nachteil ist das übliche App-Problem: ein zusätzliches Skript auf deiner Produktseite, in den meisten Fällen monatliche Kosten, und Markup-Strukturen, über die du keine Kontrolle hast. Überprüfe bei jeder App unbedingt, was sie mit den Ladezeiten deiner PDP anrichtet, ehe du dich festlegst.

Methode 3: Ein Custom JavaScript-Spin-Viewer

Wenn du den Viewer in deinem eigenen Theme ohne Third-Party-Script haben möchtest, reicht für einen Custom Spinner schon wenig Code. Die Idee: Die Frame-Sequenz vorladen und dann den sichtbaren Frame austauschen, je nachdem, wie weit der Pointer gezogen wurde.

<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

    // Frames vorladen, damit der Wechsel sofort erfolgt, sobald der Viewer aktiv ist.
    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) // Pixel pro Frame
        if (step !== 0) {
            setFrame(current + step)
            startX = x
        }
    }

    el.addEventListener('pointerdown', (e) => {
        dragging = true
        startX = e.clientX
        preload() // Das komplette Set bei der ersten Interaktion laden, nicht beim Seitenaufruf
    })
    window.addEventListener('pointermove', (e) => onMove(e.clientX))
    window.addEventListener('pointerup', () => (dragging = false))
</script>

Zwei Details sorgen dafür, dass dieser Viewer reibungslos funktioniert. Pointer Events decken Maus und Touch in einem Code-Pfad ab. touch-action: pan-y auf dem Container ermöglicht es Käufern, die Seite weiterhin vertikal zu scrollen, während sie den Spin horizontal ziehen – was auf Mobilgeräten extrem wichtig ist.

Das Preloading bei der ersten Interaktion anstatt beim Laden der Seite hält das ressourcenintensive Frame-Set vom Critical Path fern. Der erste Frame ist ein normales Bild in der Galerie; der Rest wird erst geladen, wenn der Käufer mit dem Spin interagiert.

Das von Hand zu bauen bedeutet, Theme-Dateien zu bearbeiten. Wenn du den Viewer stattdessen lieber in einfachen Worten beschreiben möchtest und dir markengerechten, Shopify-nativen Code generieren lassen willst, übernimmt Fudge genau das für dich. Siehe auch unseren Guide zum Anpassen einer Shopify-Produktseite.

Mobile Drag und Touch

Gerade auf dem Smartphone entscheidet sich, ob der Spin-Viewer funktioniert oder bloß nervt. Zwei Konfliktzonen fordern eine Lösung.

• Horizontales Ziehen (Drag) vs. Vertikales Scrollen. Ohne touch-action: pan-y verwechselt das Browser-Wischen das vertikale Scrollen recht leicht mit der Spin-Geste oder umgekehrt. Das Setzen von touch-action signalisiert dem Browser unmissverständlich, welche Aktion dem Spin gebührt.
• Tippen vs. Ziehen. Ein einfaches kurzes Antippen (Tap) darf den Frame nicht gleich wechseln. Die Formel zur Schrittberechnung im Code oben ignoriert winzige Bewegungen absichtlich, sodass Taps den Frame einfach in Ruhe lassen.

Shopifys eigene Medienrichtlinien empfehlen, Medien auf Mobile standardmäßig auf inaktiv zu setzen. Erst der Shopper selber startet die Interaktion, und nicht die Page, die einfach seinen ersten Touch klaut.⁵ Das solltest du auch beim Custom Spinner einhalten: Zeige lediglich Frame 1 als normales Cover und starte die Swaps erst ab dem Moment, wo der Käufer nach links oder rechts zieht.

Performance: Halte den Spin aus dem Critical Path raus

Ein 360-Viewer ist eines der schwersten Objekte, das sich überhaupt auf einer PDP verbauen lässt. Ein unkomprimiertes Set aus 36 Bildern zügelt locker mal auf 10 bis 20 MB.¹ Falsch implementiert ruiniert das sofort deine Ladezeit. Behalte diese drei Grundregeln im Auge:

1. Komprimiere jeden Frame

Wurde weiter oben bereits angesprochen, ist aber der wichtigste Hebel, den du hast. Liefere stets WebP oder AVIF aus, welche bei identischer Qualität gegenüber JPEGs satte 30 % sparen.⁴ Dein Anspruch sind hier Einheiten im Zehner-Kilobyte-Bereich pro Bild, nicht im Hunderter-Bereich.¹

2. Lazy-Load für das Frame-Set

Nur der allererste Frame gehört in den initialen Page Load deiner Website. Alles andere hat erst dann nachzuladen, sobald die Nutzer damit interagieren oder in die Nähe des Viewports scrollen. Das web-native loading="lazy" schiebt nicht sichtbare Bilder automatisch ohne Skripte auf.³ Bei durch Drag ausgelösten Sets solltest du die Sequenz, genau wie im Code oben, jedoch stattdessen ab der ersten Interaktion laden lassen.

3. Schütze dein LCP

Verwende kein Lazy-Loading für dein LCP-Bild. web.dev drückt das sehr klar aus: Verwende für Bilder, die direkt zum Laden der Viewport-Ansicht sichtbar sein werden, niemals Lazy-Loading – besonders nicht für das LCP-Bild.³ Auf einer Produktseite ist das erste Galerie-LCP fast immer der Fall, also lade das erste Bild absolut regulär (eager) und überlass das Lazy-Loading nur den zusätzlichen Spin-Aufnahmen. Richte dazu auch stets width und height auf jedem Frame ein, um Layout Shifts zu umgehen.³

Wenn du breitere Tipps zur Perfomance von Produktdetailseiten brauchst, schau dir an, wie du ein Shopify Theme beschleunigst und wie du Lazy-Load für Videos in Shopify konfigurierst, was genau dieselbe Defer-until-needed-Praxis bei schweren Mediendateien anwendet.

Apps vs. Custom Code: Ein ehrlicher Vergleich

Keine der Routen schlägt pauschal die andere. Das hängt vom Skillset des Teams ab.

Eine 360-Grad-Spin-App ist die richtige Wahl, wenn du alles schnell am Laufen haben möchtest, keine Lust auf das Pflegen von Theme-Code hast, und das Ertragen eines weiteren App-Skriptes für die PDP okay für dich ist. Die App löst dir den Touch- und Frame-Swap sofort und verlässlich.

Custom Code ist dein bester Freund, wenn dir sauberes Markup im eigenen Theme wichtiger ist und du exakt bestimmen willst, wann die Einzelbilder laden. So weichst du nervigen Monatsgebühren und dritter Skriptsoftware aus. Im Gegenzug trägst du die Umsetzung und Instanthaltung im eigenen Team.

Und der reine 3D-Pfad steht ein bisschen für sich: Fühlt sich spitze an, verlangt aber klassische 3D-Modelle. Da lässt sich ein Foto-Ordner also ohnedies nicht einfach reinkippen.

Welche Route du auch immer einschlägst: Die Hierarchie innerhalb der Galerie entscheidet darüber, welches Bildbild geladen wird. Vergleiche wie du Shopify-Produktbilder neu ordnest, um 100 % sicherzustellen, dass ausgerechnet auch der wichtigste LCP-Frame oben aufgestellt ist.

Zusammenfassung

Mit der 360-Grad-Produktfotografie transformierst du platte Galeriefotos in interaktiven Entdeckungsspaß. Klicke am Drehteller 24-72 Frames zusammen, komprimiere die Bilder extrem gut im Vorfeld, und lade sie in eine Media-App, ein Custom JS-Viewer Set oder durch natives 3D. Die reine Upload-Methode ist dabei weniger wichtig als die Disziplin bei der Performance: Drücke die Dateianzahl extrem nach unten, nutze Lazy-Loading für das Set, aber niemals für dein Start-LCP-Bild.¹³⁴

Und wenn du Theme-Bearbeitung einfach auslassen willst und dem Programm im reinen Text verraten willst was du baust, probier doch aus, wie der Fudge direkt nativen Liquid-Code auf die Produktseiten pflanzt.

FAQ