Flipbook in deinen Shopify-Store einbetten

Statische Produktbilder erzählen nur einen Teil der Geschichte. Wenn du einen Shopify-Store betreibst und Produktkataloge, Lookbooks, Größentabellen oder Markenmagazine in einem ansprechenderen Format präsentieren möchtest, ist das Einbetten eines interaktiven Flipbooks eine der effektivsten Methoden. Besucher können durch Seiten blättern wie in einem echten Buch — direkt in deinem Store, ohne die Seite zu verlassen.

Diese Anleitung führt dich durch das Einbetten eines FlipLink-Flipbooks in Shopify, vom Generieren des Einbettungscodes bis zur Platzierung auf Produktseiten und benutzerdefinierten Landingpages.

Warum Flipbooks auf Shopify nutzen

Shopify bietet dir leistungsstarke Werkzeuge für den Verkauf von Produkten, aber die nativen Inhaltsoptionen sind begrenzt, wenn es um mehrseitige visuelle Inhalte geht. Hier schließen Flipbooks die Lücke:

• Produktkataloge — Lass Kunden deinen gesamten Katalog mit Seitenumblätter-Animationen durchblättern, statt durch statische Raster zu scrollen
• Lookbooks — Mode-, Möbel- und Lifestyle-Marken können saisonale Kollektionen als immersive digitale Lookbooks präsentieren
• Größentabellen — Ersetze umständliche PDF-Downloads durch eine eingebettete, interaktive Größentabelle, die Kunden direkt auf der Produktseite durchblättern können
• Markenmagazine — Teile Markengeschichten, Blicke hinter die Kulissen oder redaktionelle Beiträge direkt in deinem Store
• Großhandelspreislisten — Biete B2B-Käufern eine elegante Möglichkeit, Preise zu durchstöbern, ohne ein separates Portal

Flipbooks halten Besucher länger bei der Stange, reduzieren Absprungraten und präsentieren deine Produkte in einem Format, das sich hochwertig anfühlt.

Schritt 1: Erstelle dein Flipbook

Bevor du etwas einbetten kannst, brauchst du ein Flipbook. Falls du noch keines erstellt hast:

1. Registriere dich unter go.fliplink.me
2. Lade dein PDF hoch — einen Produktkatalog, ein Lookbook oder ein beliebiges mehrseitiges Dokument
3. FlipLink wandelt es automatisch in ein interaktives Flipbook mit realistischen 3D-Seitenumblätter-Animationen um
4. Passe das Aussehen an, füge CTA-Buttons hinzu, die auf deine Shopify-Produkte verlinken, und konfiguriere die Freigabeeinstellungen

Sobald dein Flipbook veröffentlicht ist, kannst du den Einbettungscode abrufen.

Schritt 2: Einbettungscode abrufen

FlipLink stellt für jedes veröffentlichte Flipbook einen Standard-Iframe-Einbettungscode bereit:

1. Öffne dein Flipbook im FlipLink-Dashboard
2. Klicke auf den Teilen-Button
3. Wähle den Einbetten-Tab
4. Kopiere den Iframe-Code

Der Einbettungscode sieht etwa so aus:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Du kannst den height-Wert je nach Layout deines Shopify-Themes anpassen. Für die meisten Themes funktioniert eine Höhe zwischen 500 und 700 Pixeln gut.

Einen tieferen Einblick in die Iframe-Einbettungsoptionen findest du in unserer Anleitung zum Einbetten eines Flipbooks mit Iframe.

Schritt 3: Auf einer Shopify-Produktseite einbetten

Das Hinzufügen eines Flipbooks zu einer bestimmten Produktseite ist eine großartige Möglichkeit, eine statische Größentabelle oder ein Produktdatenblatt zu ersetzen oder zu ergänzen.

Mit dem Shopify-Theme-Editor

1. Gehe zu Onlineshop → Themes in deiner Shopify-Verwaltung
2. Klicke bei deinem aktiven Theme auf Anpassen
3. Navigiere zur Produktseitenvorlage
4. Füge einen neuen Abschnitt hinzu — wähle Custom Liquid (oder Custom HTML, je nach Theme)
5. Füge den Iframe-Einbettungscode in das Codefeld ein
6. Positioniere den Abschnitt dort, wo das Flipbook erscheinen soll (unterhalb der Produktbeschreibung ist eine häufige Wahl)
7. Klicke auf Speichern

Metafields für dynamisches Einbetten nutzen

Wenn du verschiedene Flipbooks auf verschiedenen Produktseiten haben möchtest, nutze Shopify-Metafields:

1. Erstelle ein Produkt-Metafield namens flipbook_url (Typ: URL)
2. Füge für jedes Produkt die Flipbook-Einbettungs-URL in das Metafield ein
3. Verwende in deinem Custom-Liquid-Abschnitt:

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

Dieser Ansatz hält dein Theme sauber und ermöglicht dir, Flipbooks pro Produkt zu verwalten, ohne jedes Mal den Theme-Code zu bearbeiten.

Schritt 4: Auf einer benutzerdefinierten Shopify-Seite einbetten

Für eigenständige Seiten wie eine Katalog-Landingpage oder einen Markenmagazin-Bereich:

1. Gehe zu Onlineshop → Seiten in der Shopify-Verwaltung
2. Erstelle eine neue Seite oder bearbeite eine bestehende
3. Klicke im Seiteneditor auf den HTML anzeigen-Button (das <>-Symbol)
4. Füge den Iframe-Einbettungscode direkt in das HTML ein
5. Wechsle zurück zum visuellen Editor, um zu bestätigen, dass es korrekt aussieht
6. Speichere die Seite

Du kannst auch den Theme-Editor verwenden, um einen Custom-Liquid-Abschnitt zu jeder Seitenvorlage hinzuzufügen, was dir mehr Kontrolle über Platzierung und Styling gibt.

Schritt 5: Responsiv machen

Shopify-Themes variieren stark, und du möchtest, dass dein Flipbook sowohl auf dem Desktop als auch auf dem Smartphone gut aussieht. Umschließe den Iframe mit einem responsiven Container:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Der Wert padding-bottom: 75% erzeugt ein 4:3-Seitenverhältnis. Passe diesen Wert an die Seitenabmessungen deines Flipbooks an:

• 4:3-Verhältnis (Querformat): padding-bottom: 75%
• 16:9-Verhältnis (breit): padding-bottom: 56.25%
• 3:4-Verhältnis (Hochformat): padding-bottom: 133%

So wird sichergestellt, dass das Flipbook auf allen Bildschirmgrößen korrekt skaliert wird, ohne unschöne Scrollbalken oder abgeschnittene Inhalte.

Schritt 6: CTA-Buttons mit Produktverlinkung hinzufügen

Eine der leistungsstärksten Funktionen für Shopify-Stores ist das Hinzufügen von CTA-Buttons innerhalb deines Flipbooks, die direkt auf Produktseiten verlinken. Das verwandelt deinen Katalog von einem passiven Betrachtungserlebnis in ein aktives Einkaufswerkzeug.

Im FlipLink-Editor:

1. Öffne dein Flipbook zur Bearbeitung
2. Wähle eine Seite, auf der du einen Call-to-Action hinzufügen möchtest
3. Füge einen CTA-Button mit Text wie „Jetzt kaufen" oder „Produkt ansehen" hinzu
4. Setze den Link auf deine Shopify-Produkt-URL (z. B. https://deinstore.myshopify.com/products/produkt-handle)
5. Wiederhole dies für jedes im Katalog gezeigte Produkt

Wenn Kunden durch dein eingebettetes Flipbook blättern und etwas Interessantes sehen, bringt sie ein Klick direkt zur Produktseite, um es in den Warenkorb zu legen. Das verkürzt den Weg von der Entdeckung zum Kauf erheblich.

Schritt 7: Domain-Whitelisting einrichten

Wenn du einschränken möchtest, wo dein Flipbook eingebettet werden darf — beispielsweise nur in deinem Shopify-Store und nirgendwo sonst — nutze das Domain-Whitelisting.

1. Öffne in deinem FlipLink-Dashboard die Flipbook-Einstellungen
2. Navigiere zum Bereich Domain-Whitelisting
3. Füge deine Shopify-Domain hinzu (z. B. deinstore.com und deinstore.myshopify.com)
4. Speichere die Einstellungen

Das verhindert, dass Wettbewerber oder nicht autorisierte Websites deinen Flipbook-Inhalt einbetten. Das ist besonders wichtig für Großhandelskataloge oder exklusive Lookbooks, die du außerhalb deines Stores nicht öffentlich zugänglich machen möchtest.

Tipps für den Flipbook-Erfolg auf Shopify

Optimiere dein PDF vor dem Hochladen. Komprimiere die Bilder in deinem Quell-PDF, um die Dateigrößen überschaubar zu halten. Leichtere Flipbooks laden schneller, was für mobile Käufer mit langsameren Verbindungen wichtig ist.

Verwende aussagekräftige Seitentitel. Das Inhaltsverzeichnis von FlipLink zieht die Struktur aus deinem PDF. Gut organisierte Kapitel helfen Kunden, schnell zu bestimmten Produktkategorien zu springen.

Teste auf verschiedenen Geräten. Prüfe dein eingebettetes Flipbook auf Desktop, Tablet und Smartphone in der Vorschau, bevor du veröffentlichst. Die responsiven Shopify-Themes decken die meisten Fälle ab, aber überprüfe, ob der responsive Wrapper mit deinem spezifischen Theme funktioniert.

Verfolge das Engagement. Die FlipLink-Analyse zeigt dir, welche Seiten die meisten Aufrufe erhalten und wie lange Besucher auf jeder Doppelseite verweilen. Nutze diese Daten, um zu verstehen, welche Produkte oder Abschnitte bei deinem Publikum ankommen, und passe dein Katalog-Layout entsprechend an.

Halte Inhalte aktuell. Aktualisiere dein Flipbook, wenn du neue Produkte hinzufügst oder saisonale Aktionen durchführst. Der Einbettungscode bleibt gleich — aktualisiere einfach das Flipbook in deinem FlipLink-Dashboard und die Änderungen erscheinen sofort in deinem Shopify-Store. Du musst den Theme-Code nicht erneut anfassen.

Verlinke Flipbooks aus E-Mail-Kampagnen. Über das Einbetten in deinen Store hinaus teile direkte Links zu deinen Flipbook-Katalogen in Marketing-E-Mails und Social-Media-Beiträgen. Die Freigabe- und Verteilungsoptionen von FlipLink machen es einfach, Traffic von mehreren Kanälen zurück in deinen Shopify-Store zu leiten.

Mehr zum Einbetten von PDFs und Flipbooks auf Websites im Allgemeinen findest du in unserer Anleitung zum Einbetten eines PDF auf einer Website. Wenn du einen Produktkatalog von Grund auf erstellst, schau dir an, wie man einen digitalen Produktkatalog erstellt.

Beginne mit dem Einbetten von Flipbooks in deinem Shopify-Store

Das Einbetten eines Flipbooks in Shopify dauert nur wenige Minuten und verändert grundlegend, wie Kunden mit deinen Produktinhalten interagieren. Ob saisonales Lookbook, umfassender Produktkatalog oder einfache Größentabelle — interaktive Flipbooks schaffen ein Einkaufserlebnis, das statische Bilder und PDFs schlicht nicht bieten können.

Erstelle dein kostenloses Flipbook und bette es noch heute in deinen Shopify-Store ein. Schau dir unsere Preisseite an, um zu sehen, wie FlipLink zu deinem Geschäft passt.