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 wischt, um das Produkt zu drehen. Ein gängiges Setup sind 36 Bilder 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 Fotosequenz.²
• Für flache Foto-Spins hast du die Wahl zwischen einer 360-Spin-App oder einem benutzerdefinierten JavaScript-Viewer. Apps sind schneller einsatzbereit; Custom Code hält das Markup in deinem Theme.
• Performance ist das eigentliche Risiko. Ein hochauflösendes Set mit 36 Bildern kann 10-20 MB groß werden. Komprimiere also jedes Bild und nutze Lazy-Loading für den Viewer.¹
• Nutze niemals Lazy-Loading für dein LCP-Bild. Das erste Galeriebild, das der Käufer sieht, sollte sofort geladen werden.³

Um 360-Grad-Produktfotografie zu Shopify hinzuzufügen, nimmst du 24-72 Bilder auf einem Drehteller auf, komprimierst sie als WebP und zeigst sie mit einer Spin-App oder einem kleinen Custom-JavaScript-Viewer an. Shopifys native 3D-Medien benötigen ein 3D-Modell, keine Fotos.

360-Grad-Produktfotografie zeigt ein Produkt aus jedem Winkel in einem einzigen interaktiven Viewer. Der Käufer zieht nach links oder rechts, oder die Bilder drehen sich automatisch, und das Produkt scheint zu rotieren. Auf einer Shopify-Produktseite (PDP) ersetzt dies das bloße Raten durch eine vollständige Ansicht des Artikels.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und mit hunderten Shopify-Stores gearbeitet. Wir entwickeln Fudge, den AI Operator für Shopify-Stores, mit einer 4.9-Bewertung im Shopify App Store 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 ohne Drittanbieter-Skript in deinem eigenen Theme haben willst, brauchst du für einen Custom Spinner nur wenig Code. Die Idee: Lade die Bildsequenz vor und tausche dann das sichtbare Bild aus, je nachdem, wie weit der Zeiger (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="Produkt 360-Ansicht, Bild 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

    // Lade Bilder vor, 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 Bild
        if (step !== 0) {
            setFrame(current + step)
            startX = x
        }
    }

    el.addEventListener('pointerdown', (e) => {
        dragging = true
        startX = e.clientX
        preload() // Lade das gesamte Set bei der ersten Interaktion, nicht beim Laden der Seite
    })
    window.addEventListener('pointermove', (e) => onMove(e.clientX))
    window.addEventListener('pointerup', () => (dragging = false))
</script>

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

Das Vorladen (Preloading) bei der ersten Interaktion statt beim Laden der Seite hält das schwere Bild-Set aus dem Critical Path heraus. Das erste Bild ist ein normales Bild in der Galerie; der Rest wird erst geladen, wenn der Käufer den Spin berührt.

Die Bild-URLs setzen voraus, dass deine Dateien ihre Namen unter Inhalte > Dateien behalten. Shopify könnte einen Upload umbenennen, wenn eine Datei mit demselben Namen bereits existiert, überprüfe also die URL jedes Bildes nach dem Hochladen.

Das Ganze von Hand zu bauen bedeutet, Theme-Dateien zu bearbeiten. Wenn du den Viewer lieber in einfachen Worten beschreiben und dir on-brand, Shopify-nativen Code generieren lassen willst: Genau das macht Fudge über seinen Store Editor – als Entwurf, den du an einem Live-Produkt testen kannst, bevor du ihn veröffentlichst.

Für den Rest der Produktseite, schau dir unseren Guide zum Anpassen einer Shopify-Produktseite an.

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

Keiner der Wege ist pauschal besser. Es hängt von deinem Team ab.

Eine 360-Spin-App ist die richtige Wahl, wenn du den Viewer schnell live haben willst, du keinen Theme-Code pflegen möchtest und es für dich in Ordnung ist, der PDP ein weiteres App-Skript hinzuzufügen. Die App übernimmt den Bildwechsel und die Touch-Steuerung für dich.

Custom Code ist die richtige Wahl, wenn du das Viewer-Markup in deinem eigenen Theme haben willst, dir genaue Kontrolle darüber wichtig ist, wann Bilder laden, und du laufende App-Gebühren sowie ein extra Drittanbieter-Skript vermeiden möchtest. Der Preis dafür ist der Code und seine Pflege.

Die native 3D-Lösung ist nochmal etwas anderes: Sie bietet Käufern echtes 3D und AR, wo es passt, erfordert aber ein 3D-Modell, keine Fotos, und ist daher kein direkter Ersatz für einen Foto-Spin.

Egal für welchen Weg du dich entscheidest, die Reihenfolge deiner Galerie ist immer noch entscheidend dafür, welches Bild zuerst geladen wird. Sieh dir an, wie du Produktbilder in Shopify neu anordnest, um sicherzustellen, dass dein LCP-Bild dasjenige ist, das die Käufer zuerst sehen.

FAQ