Folge den genauen Schritten, um einen interaktiven Flipbook-Katalog auf einer WooCommerce-Produktseite zu platzieren: Wandle dein PDF um, kopiere den Einbettungscode, füge ihn in einen Produkt-Tab oder die Beschreibung ein, passe ihn für mobile Geräte an und verfolge, welche Seiten Kunden tatsächlich lesen.
Ein Kunde landet auf deiner Produktseite, gefällt ihm das Foto, und dann stellt er die Frage, die über den Verkauf entscheidet: "Was gibt es sonst noch in dieser Linie?" Ist die Antwort ein PDF-Download-Link, verschwinden die meisten. Ist die Antwort ein Katalog mit Umblättereffekt direkt unter der Produktbeschreibung, bleiben viele und stöbern weiter. Genau das kannst du mit Flipbooks AI und ein paar Minuten in deinem WooCommerce-Dashboard bauen.
Diese Anleitung führt dich durch den ganzen Ablauf: ein PDF in ein Flipbook umwandeln, den Einbettungscode holen, ihn auf einer Produktseite platzieren und die Layoutprobleme beheben, die auf Mobilgeräten gern auftauchen.
Ein PDF-Link erzwingt einen Download, öffnet einen eigenen Tab und unterbricht den Einkauf. Ein Flipbook lädt direkt auf der Seite, sodass der Besucher deinen Shop nie verlässt.
So schneiden die beiden Optionen in einem echten Shop ab:
| Funktion | PDF-Download-Link | Eingebettetes Flipbook |
|---|---|---|
| Öffnet sich auf der Produktseite | Nein | Ja |
| Seitenumblätter-Animation | Nein | Ja |
| Funktioniert gut auf Telefonen | Oft umständlich | Responsiv |
| Anklickbare Produktlinks | Manchmal | Ja |
| Statistiken pro Seite | Nein | Ja (Professional-Tarif) |
| Aktualisieren ohne Änderung der Seite | Nein | Ja |
💡 Profi-Tipp: Ein Flipbook ersetzt deine Produktgalerie nicht. Nutze es als zweite Ebene für Kunden, die die ganze Auswahl, Größen oder technische Datenblätter sehen wollen.
Kataloge verringern die Anzahl der Klicks zwischen "interessiert" und "in den Warenkorb gelegt". Kann ein Besucher zu einem passenden Artikel blättern, ohne die Seite zu verlassen, entfällt ein Entscheidungspunkt, an dem Leute sonst meist abspringen.
Du brauchst keinen Entwickler. Du brauchst vier Dinge:
Gute Quelldateien ergeben bessere Flipbooks. Exportiere dein PDF in einer sinnvollen Größe, idealerweise unter 50 MB, mit komprimierten, aber scharfen Bildern. Wo möglich, eine Produktidee pro Seite, denn Kunden blättern schnell und entscheiden in Sekunden.
✅ Best Practice: Nutze Doppelseiten im Querformat für Lookbooks und Seiten im Hochformat für Preislisten. Gemischte Ausrichtungen lassen den Betrachter springen.
Nicht jedes Produkt braucht einen Katalog. Setze ihn dort ein, wo er eine echte Frage beantwortet:
| Produkttyp | Anzuzeigender Katalog | Platzierung |
|---|---|---|
| Einzelnes Hauptprodukt | Katalog der gesamten Kollektion | Unter der Beschreibung |
| Variables Produkt | Katalog mit Größen- und Farbtabelle | Eigener Tab |
| Set oder Bundle | Katalog mit Inhalten und Optionen | Bereich der Kurzbeschreibung |
| Großhandelsartikel | Preislisten-Flipbook | Tab, sichtbar für angemeldete Käufer |
Dieser Teil dauert etwa fünf Minuten. Wenn du physische Waren verkaufst, ist der Produktkatalog-Generator ein guter Startpunkt, und der PDF-zu-Flipbook-Konverter übernimmt die eigentliche Umwandlung.
Jede Seite wird zu einer scharfen, zoombaren Doppelseite mit natürlichem Seitenumblättern.
Passe den Betrachter an deinen Shop an, damit er wie ein fester Teil wirkt und nicht wie ein nachträglicher Zusatz:
💡 Profi-Tipp: Verlinke jeden Katalogartikel mit seiner WooCommerce-Produkt-URL. Kunden blättern, tippen und landen direkt auf einer Seite, auf der sie kaufen können.
Öffne das Freigabe-Panel und lege fest, wer ihn sehen darf:
| Option | Verwenden, wenn |
|---|---|
| Öffentlicher Link | Der Katalog ist für jeden Besucher gedacht |
| Passwortschutz | Großhandels- oder Händlerpreise |
| Einbettungscode | Du willst ihn auf der Seite haben |
| Offline-Download | Käufer wollen eine Kopie für später |
Für eine Produktseite brauchst du den Einbettungscode. Kopiere ihn. Er sieht wie ein kurzer Schnipsel aus, der mit einem iframe-Tag beginnt. Das Tool Flipbook auf Website einbetten erklärt die Optionen genauer.
Es gibt drei zuverlässige Wege, die Einbettung zu platzieren. Wähle den, der zum Aufbau deines Themes passt.
Das ist der schnellste Weg.
Wenn du den Blockeditor nutzt, füge einen Block Benutzerdefiniertes HTML hinzu und füge den Code darin ein.
Tabs halten die Seite übersichtlich, denn das Flipbook lädt erst, wenn jemand es anfordert. Füge über die Theme-Optionen oder ein kleines Tab-Plugin einen eigenen Produkt-Tab hinzu. Nenne den Tab schlicht, etwa "Gesamter Katalog" oder "Größentabelle". Füge den Einbettungscode in den Inhalt des Tabs ein.
✅ Best Practice: Tabs laden beim ersten Aufruf schneller. Wenn sich dein Shop bereits schwer anfühlt, ist diese Methode die richtige Wahl.
Wenn derselbe Katalog auf zwanzig Produkten erscheinen soll, füge den Code nicht zwanzigmal ein. Erstelle in deinem Theme einen wiederverwendbaren Block oder einen einfachen Shortcode, der die Einbettung ausgibt, und setze ihn dann in jedes Produkt. Wenn du das Flipbook später ersetzt, aktualisierst du eine einzige Stelle.
| Methode | Kenntnisstand | Am besten für | Geschwindigkeit |
|---|---|---|---|
| Beschreibungseditor | Anfänger | Ein oder zwei Produkte | Am schnellsten |
| Eigener Tab | Fortgeschritten | Shops, die saubere Seiten wollen | Schnell |
| Shortcode oder wiederverwendbarer Block | Fortgeschritten | Viele Produkte, ein Katalog | Am schnellsten zu pflegen |
Mehr als die Hälfte des Shop-Traffics kommt über das Telefon, deshalb ist die mobile Ansicht kein Extra.
Ändere feste Pixelbreiten im Einbettungscode zu 100%, damit sich der Betrachter an den Bildschirm anpasst. Lege dann eine sinnvolle Höhe fest, auf dem Desktop etwa 500 bis 600 Pixel. Der Flipbook-Betrachter von Flipbooks AI ist mobil responsiv und wechselt auf schmalen Bildschirmen zur Einzelseitenansicht.
Lädt der Katalog spät, kann sich die Seite unter dem Daumen des Kunden verschieben. Reserviere Platz mit einem Wrapper, der ein festes Seitenverhältnis hat. Ein einfacher 16:9-Container löst das in den meisten Themes.
Öffne das Produkt auf deinem eigenen Telefon, einem Tablet und einem Laptop. Prüfe drei Dinge:
Auch eine einfache Einbettung kann Probleme machen. Hier sind die Fehler, über die Shopbesitzer am häufigsten berichten.
Dein Editor entfernt vielleicht das iframe. Wechsle in den Modus Benutzerdefiniertes HTML oder frage deinen Hoster, ob iframes erlaubt sind. Manche Sicherheits-Plugins blockieren sie standardmäßig.
Prüfe die Inhaltsbreite deines Themes. Ist die Spalte schmal, verschiebe den Katalog in einen Bereich über die volle Breite oder in einen Tab.
Komprimiere die Bilder im PDF, bevor du hochlädst. Aktiviere verzögertes Laden für das iframe, falls dein Theme das unterstützt, und bevorzuge die Tab-Methode.
| Problem | Wahrscheinliche Ursache | Schnelle Lösung |
|---|---|---|
| Leerer Bereich | iframe blockiert | Block Benutzerdefiniertes HTML verwenden |
| Abgeschnittene Seiten | Feste Breite im Code | Breite auf 100 % setzen |
| Langsames Laden | Schweres PDF | Zuerst Bilder komprimieren |
| Links funktionieren nicht | Falsche Produkt-URLs | Links im Editor noch einmal prüfen |
⚠️ Warnung: Füge die Einbettung nie in einen visuellen Editor-Tab ein, der HTML umschreibt. Er kann Tags stillschweigend löschen und dir einen kaputten Kasten hinterlassen.
Theorie ist nützlich, aber Beispiele zeigen, was möglich ist.
Ein Shop für modulare Regalsysteme setzt unter jedes Regalprodukt ein Kollektions-Flipbook. Kunden blättern durch Raumgestaltungen, entdecken den passenden Beistelltisch und klicken weiter, um beides zu kaufen. Der Möbelkatalog-Ersteller passt genau dafür.
Eine Boutique fügt jeder Kleiderseite ein saisonales Lookbook hinzu. Besucher stöbern durch Outfits, tippen auf die Schuhe auf dem Foto und landen auf der Produktseite der Schuhe. Interaktiver Lookbook-Designer macht diese anklickbare Ebene einfach, und der Modekatalog-Ersteller liefert ein passendes Layout.
Ein Geschenkegroßhändler legt eine passwortgeschützte Preisliste in einen Tab für registrierte Käufer. Endkunden sehen die Preise nie, Händler bekommen ein übersichtliches Flipbook. Beim Aufbau hilft Digitale Preisliste erstellen.
Sobald der Katalog live ist, wird es spannend. Mit dem Professional-Tarif siehst du, welche Seiten Leute öffnen, wie lange sie bleiben und wo sie abspringen. Details findest du unter Preise.
Bekommt Seite 12 die meiste Aufmerksamkeit, schiebe dieses Produkt auf die erste Doppelseite. Erreicht niemand die letzten zehn Seiten, streiche sie. Lade das PDF neu hoch, und die live eingebettete Version aktualisiert sich, ohne dass du WooCommerce anfassen musst.
💡 Profi-Tipp: Prüfe die Zahlen monatlich. Saisonale Kataloge veralten schnell, und eine kurze Auffrischung hält die Seite aktuell.
Einige Gewohnheiten trennen Shops, die von Katalogen profitieren, von solchen, die nur Unordnung erzeugen.
| Gewohnheit | Wirkung auf Kunden |
|---|---|
| Kurzer Katalog | Schnellere Entscheidungen |
| Starke erste Doppelseite | Mehr angesehene Seiten |
| Verlinkte Produkte | Weniger Klicks bis zum Kauf |
| Regelmäßige Updates | Mehr Vertrauen |
Flipbooks AI setzt niemals Wasserzeichen, sodass dein Katalog immer nach dir aussieht. Der Standard-Tarif und höher bietet unbegrenzte Flipbooks, was nützlich ist, wenn du für jede Kollektion einen eigenen Katalog betreibst.
Du hast jetzt alles, was du brauchst, um einen Katalog mit Umblättereffekt auf einer WooCommerce-Produktseite zu platzieren: ein sauberes PDF, einen Einbettungscode und eine von drei Platzierungsmethoden, die zu deinem Theme passen.
So geht es als Nächstes weiter:
Wähle eine Produktseite, füge heute den Katalog hinzu und beobachte, wie Kunden ihn nutzen. Bringt er Klicks, setze ihn im ganzen Shop ein. Wenn du skalieren willst, geh zu Tarife und Upgrades und wähle, was zu deinem Shop passt.
Wähle deine Sprache
