Eine praxisnahe Anleitung, wie du interaktive Flipbooks in deinen Shopify-Shop einfügst. Vom Erstellen des Einbettungscodes bis zur Platzierung auf Produktseiten, Kollektionen oder Landingpages: Dieser Artikel behandelt jede Methode, jedes Tool und jede Strategie, mit denen dein Shopify-Shop mit Umblätterkatalogen und Lookbooks auffällt.
Wenn du Produkte online verkaufst, entscheidet oft nur eines darüber, ob aus einem Besucher, der stöbert, ein Käufer wird: wie gut du zeigst, was du anbietest. Ein interaktives Flipbook in deinem Shopify-Shop schließt diese Lücke schnell. Ein Flipbooks AI-Flipbook verwandelt jeden PDF-Katalog, jedes Lookbook oder jede Broschüre in ein Seitenumblättern-Erlebnis, das direkt in deinem Shop sitzt, ganz ohne App-Installation.
Dieser Artikel führt dich durch den gesamten Ablauf, vom Erstellen deines Flipbooks bis zum Einfügen des Einbettungscodes in dein Shopify-Theme.
Statische Produktraster sind bei den meisten Shopify-Shops der Standard. Doch statische Raster zwingen Kunden, Dutzende einzelne Produktseiten nacheinander anzuklicken. Ein Flipbook lässt Käufer eine ganze Kollektion in Sekunden durchblättern, so wie sie einen gedruckten Katalog durchblättern würden.
Besucher, die mit einem Flipbook interagieren, bleiben länger auf deiner Seite. Die Umblätteranimation erzeugt einen greifbaren, fesselnden Rhythmus, der die Augen in Bewegung hält. Längere Besuche bedeuten mehr gesehene Produkte und mehr Kaufabsicht.
Ein Flipbook ist schon an sich ein Ziel. Wenn ein Besucher auf einer Seite mit eingebettetem Katalog landet, gibt es sofort etwas zu tun. Diese Interaktion senkt die Wahrscheinlichkeit, dass er die Seite verlässt, bevor er dein Sortiment erkundet hat.
Jedes Flipbook, das auf Flipbooks AI erstellt wird, ist vollständig responsiv. Derselbe Einbettungscode, der auf einem Desktop funktioniert, wird auch auf einem 375px breiten Telefonbildschirm sauber dargestellt. Eine eigene mobile Version ist nicht nötig.
| Vorteil | Statisches Produktraster | Interaktives Flipbook |
|---|---|---|
| Blätter- und Stöbertempo | Langsam, viele Klicks | Schnell, per Wischgeste |
| Sitzungsdauer | Durchschnittlich | Überdurchschnittlich |
| Visuelle Wirkung | Gering | Hoch |
| Mobiles Erlebnis | Abhängig vom Theme | Immer konsistent |
| Einrichtungszeit | Eingebaut | Unter 30 Minuten |
Bevor du dein Shopify-Theme anfasst, bereite drei Dinge vor.
Das Flipbook beginnt als PDF. Das kann ein Produktkatalog, ein saisonales Lookbook, eine Speisekarte, eine Broschüre oder sogar eine Preisliste sein. Falls du noch keins hast, gestalte es in Canva, Adobe InDesign oder mit einem beliebigen PDF-Exportprogramm. Die Auflösung zählt: Exportiere mit mindestens 150 DPI, damit die Seiten scharf dargestellt werden.
Du brauchst ein Konto auf Flipbooks AI, um dein Flipbook hochzuladen und zu hosten. Die Plattform übernimmt das gesamte Hosting, die CDN-Auslieferung und die Erstellung des Einbettungscodes. Du musst keine Dateien selbst hosten und keinen externen Speicher einrichten.
Du brauchst Zugriff auf das Shopify-Admin, konkret auf den Bereich Online-Shop > Themes > Code bearbeiten oder auf den Abschnittseditor mit Drag-and-Drop. Beide Wege werden unten ausführlich erklärt.
💡 Dupliziere dein aktives Shopify-Theme, bevor du Code änderst. So hast du einen sicheren Rückkehrpunkt, falls etwas nicht wie erwartet dargestellt wird.
Flipbooks AI ist das Tool, das den Einbettungscode erzeugt, den dein Shopify-Shop braucht. Hier ist der Schritt-für-Schritt-Ablauf.
Die Plattform erstellt automatisch eine Umblätter-Version deines PDFs mit weichen Umblätteranimationen und einem responsiven Betrachter.
Sobald das PDF hochgeladen ist, richte das Flipbook auf dein Markenbild aus:
✅ Verwende für die Werkzeugleiste den exakten Hexcode deiner Shop-Farbe. So wirkt der Übergang zwischen Flipbook-Betrachter und der umgebenden Seite nahtlos.
Bevor du den Einbettungscode kopierst, lege den Zugang fest:
⚠️ Passwortschutz und Analysen sind Funktionen des Professional-Tarifs. Sieh dir die Preisseite an, wenn du diese Möglichkeiten für deinen Shop brauchst.
Sobald dein Flipbook auf Flipbooks AI veröffentlicht ist:
Flipbooks AI bietet zwei Einbettungsformate für unterschiedliche Shopify-Layouts:
| Format | Am besten für | Anpassung |
|---|---|---|
| iFrame | Einfache, schnelle Platzierung | Breite, Höhe, Eckenradius |
| Script (responsiv) | Layouts in voller Breite, flexibles Verhalten | Skaliert mit dem übergeordneten Container |
Für die meisten Anwendungsfälle in Shopify ist die iFrame-Einbettung am einfachsten zu handhaben. Die responsive Script-Einbettung eignet sich besser für Hero-Bereiche auf der Startseite in voller Breite.
Ein typisches iFrame-Snippet sieht so aus:
<iframe src="https://flipbooksai.com/embed/your-flipbook-id"
width="100%"
height="600px"
frameborder="0"
allowfullscreen>
</iframe>
Lege width="100%" fest und wähle eine Höhe, die zu deinem Layout passt. Für Produktkatalogseiten funktionieren auf dem Desktop 550 bis 700 Pixel Höhe gut.
Wo du das Flipbook platzierst, hängt davon ab, was es enthält und für wen es gedacht ist.
Ein saisonales Lookbook oder ein Katalog mit Neuheiten auf der Startseite vermittelt sofort die Markengeschichte. Besucher, die auf deiner Startseite landen, erhalten ein sofortiges visuelles Erlebnis. Der Interaktiver Lookbook-Designer erstellt Inhalte, die genau für diese Platzierung gemacht sind.
Ein Möbelgeschäft kann einen Katalog nach Räumen direkt auf einer Kollektionsseite einbetten. Kunden, die die Kollektion „Wohnzimmer“ durchstöbern, sehen dort den vollständigen Raumkatalog. So müssen sie nicht erst einzelne Produkte öffnen, um das ganze Bild zu bekommen. Der Kostenloser digitaler Katalog-Ersteller verarbeitet PDFs mit vielen Seiten und Produkten und stellt sie sauber dar.
Erstelle eine eigenständige Shopify-Seite, nenne sie „Unser Katalog“ oder „Saison-Lookbook“ und bette das Flipbook als Hauptinhalt ein. Diese Seite lässt sich aus der Navigationsleiste, in E-Mail-Kampagnen oder auf Social-Media-Profilen verlinken.
💡 Erstelle in Shopify eine eigene
/catalog-Seite und verlinke sie aus deiner Hauptnavigation. Sie dient wiederkehrenden Kunden als dauerhafte Anlaufstelle zum Stöbern.
Das ist die schnellste Methode und erfordert keine Code-Bearbeitung.
Die meisten modernen Shopify-Themes, darunter Dawn, Debut, Prestige und Brooklyn, unterstützen benutzerdefinierte HTML-Blöcke von Haus aus.
Für die Platzierung eines Flipbooks auf einer bestimmten Inhaltsseite:
<> von Rich Text zur Ansicht HTML.⚠️ Wechsle vor dem Einfügen immer in die HTML-Ansicht. Wenn du in der Rich-Text-Ansicht einfügst, wird der rohe iFrame-Code als sichtbarer Text auf der Seite angezeigt, statt das Flipbook darzustellen.
Für eine dauerhafte Platzierung in einem Abschnitt, der auf mehreren Seiten erscheint:
.liquid-Vorlagendatei, zum Beispiel sections/main-collection-product-grid.liquid.⚠️ Änderungen an Liquid-Dateien wirken sich auf jede Seite aus, die diese Vorlage verwendet. Teste immer auf einem duplizierten Theme, bevor du an deinem Live-Shop etwas änderst.
Welchen Tarif du wählst, bestimmt, welche Funktionen dein eingebettetes Flipbook in deinem Shopify-Shop unterstützt.
| Funktion | Free | Standard | Professional |
|---|---|---|---|
| Anzahl der Flipbooks | 1 | Unbegrenzt | Unbegrenzt |
| Wasserzeichen | Ja | Nein | Nein |
| Eigenes Branding | Nein | Ja | Ja |
| Passwortschutz | Nein | Nein | Ja |
| Analyse-Dashboard | Nein | Nein | Ja |
| Offline-Downloads | Nein | Nein | Ja |
| Einbetten auf der Website | Ja | Ja | Ja |
| Formulare zur Kontaktgewinnung | Nein | Nein | Ja |
| Video und Audio auf Seiten | Nein | Ja | Ja |
| Responsiv für mobile Geräte | Ja | Ja | Ja |
Für die meisten Shopify-Shop-Betreiber ist der Standard-Tarif die richtige Wahl. Er entfernt Wasserzeichen, erlaubt unbegrenzt viele Flipbooks und unterstützt volles eigenes Branding, damit der Betrachter zur visuellen Identität deines Shops passt. Der Professional-Tarif ergänzt Analysen und Kontaktgenerierung, was sich lohnt, wenn du nachvollziehen willst, welche Katalogseiten die meisten Klicks und Conversions bringen.
Eine Modemarke kann ihr saisonales Lookbook als PDF hochladen, auf einer eigenen Shopify-Seite einbetten und aus Instagram-Profilen sowie E-Mail-Kampagnen verlinken. Wer das Flipbook durchblättert, sieht die ganze redaktionelle Geschichte und klickt dann weiter zu einzelnen Produktseiten. Der Lookbook-Flipbook-Ersteller ist genau für diesen Ablauf gemacht, mit Layouts, die für Modefotografie optimiert sind.
Ein Möbelhändler mit 300 oder mehr Produkten kann nicht sinnvoll alles in einem Standard-Kollektionsraster von Shopify zeigen. Ein eingebetteter PDF-Katalog, nach Raumtyp geordnet, lässt Kunden das gesamte Sortiment durchstöbern, ohne den Shop zu verlassen. Besucher, die im Katalog finden, was sie suchen, kaufen deutlich eher als Besucher, die sich ohne Vorwissen durch einzelne Produktseiten klicken.
Restaurants, die Saucen, Kochboxen oder Markenartikel über Shopify verkaufen, können ihre komplette Karte oder ihr Rezeptbuch als Flipbook einbetten. Der Restaurantkarten-Flipbook-Ersteller erstellt ein Flipbook im Karten-Layout, das sich auf jeder Shopify-Seite sauber einbettet und das Markenerlebnis neben den physischen Produkten stärkt.
B2B-Shops, die über Shopify verkaufen, können ein passwortgeschütztes Flipbook mit Großhandelspreisen erstellen. Käufer erhalten einen teilbaren Link, der eine professionelle Preisliste im Markenlook öffnet. Keine PDF-Anhänge in E-Mails, keine statischen Tabellen, keine veralteten Screenshots. Die Digitale Preisliste erstellen ist genau für diesen Anwendungsfall gebaut.
Ein Detail, das wichtiger ist, als die meisten Shop-Betreiber erwarten: das Wischverhalten auf dem Smartphone. Flipbooks AI-Einbettungen sind für Touch optimiert. Auf dem Telefon ziehen Kunden Seiten nach links oder rechts, um sie umzublättern, dieselbe Geste, die sie auf dem Smartphone sonst überall verwenden. Kein umständliches Zoomen mit zwei Fingern nötig. Die Einbettung skaliert automatisch auf die Bildschirmbreite, sodass ein iFrame mit 100 % Breite in Shopify auf jedem Gerät den Telefonbildschirm korrekt ausfüllt.
Teste das Flipbook nach dem Einbetten auf einem echten Telefon und nicht nur, indem du das Browserfenster am Desktop verkleinerst. Manche Shopify-Themes setzen zusätzliche Container-Abstände, die die iFrame-Größe auf dem Smartphone beeinflussen. Füge max-width: 100% in das benutzerdefinierte CSS ein, falls das Flipbook auf kleineren Bildschirmen überläuft.
Ein Flipbook in deinen Shopify-Shop einzubauen dauert vom Anfang bis zum Ende unter 30 Minuten. Der Gewinn ist ein Stöbererlebnis, das sich eher wie ein echter Laden anfühlt als wie eine Produktdatenbank. Kunden, die einen Katalog durchblättern, verbringen mehr Zeit mit deiner Marke, sehen pro Besuch mehr Produkte und gehen mit einem stärkeren Eindruck davon, was du verkaufst.
Die Schritte sind klar: Erstelle dein Flipbook auf Flipbooks AI, kopiere den Einbettungscode und füge ihn in einen HTML-Block, den Seiteneditor oder eine Liquid-Vorlage von Shopify ein. Die Einbettung funktioniert mit jedem Shopify-Theme und braucht keine App oder kein Plugin von Drittanbietern.
Bereit, dein eigenes zu bauen? Erstelle dein erstes Flipbook kostenlos und binde es noch heute in deinen Shop ein. Durchstöbere alle verfügbaren Tools und Vorlagen, um das passende Format für deinen Katalog, dein Lookbook oder deine Broschüre zu finden. Wenn du volles Branding aktivieren und Wasserzeichen entfernen willst, sieh dir die Preispläne an und wähle die passende Stufe für deinen Shop.
Wähle deine Sprache
