Shopify-Storyblok-Integration

Redaktion mit Vorschau. Shop bleibt Shop.Für Teams, die Landingpages selbst bauen wollen und dabei sehen möchten, wie die Seite aussieht, ohne Entwicklung für jede Kampagne.

Wann sich die Kombination lohnt

Der häufigste Auslöser für Storyblok ist nicht das Inhaltsmodell, sondern die Arbeitsweise: Redakteure wollen Seiten zusammenstellen und dabei sehen, was entsteht. Der visuelle Editor mit Live-Vorschau ist der eigentliche Grund für die Entscheidung, nicht die Schnittstelle darunter.

Für Shopify heißt das eine klare Aufteilung: Storyblok liefert Bausteine und Seiten, Shopify liefert Katalog, Preise und Checkout. Produkte werden im Editor referenziert, nicht beschrieben. Solange diese Grenze hält, ist die Kombination stabil und für das Marketing spürbar schneller als das Shop-Backend.

Welche Objekte laufen in welche Richtung

Inhalte fließen ins Frontend, Produktdaten kommen aus Shopify. Transaktionale Objekte bleiben unberührt.

Objekt	Richtung	Führendes System	Hinweis
Inhalte	→ Shopify	Storyblok	Seiten und wiederverwendbare Bausteine, je Sprache und Markt.
Medien	→ Shopify	Storyblok	Bilder und Videos aus der Medienablage des CMS.
Artikel	Shopify →	Shopify	Nur als Referenz. Im Editor wird ein Shopify-Produkt ausgewählt.
Preise	kein Sync	-	Preise bleiben vollständig in Shopify.
Bestand	kein Sync	-	Bestand ist kein Content-Thema.
Aufträge	kein Sync	-	Bestellungen laufen am CMS vorbei.

Welches Integrationsmuster trägt

Inhaltsblöcke im Shopify-Theme
Shopify bleibt die Storefront, einzelne Seitentypen holen ihre Inhalte aus Storyblok. Der schnellste Weg, wenn nur Landingpages und Kampagnen betroffen sind und Produktseiten unverändert bleiben.
Eigene Storefront mit Vorschau
Die Storefront wird eigenständig gebaut, Storyblok liefert Inhalte samt Live-Vorschau, Shopify Katalog und Checkout. Hier entfaltet der visuelle Editor seine volle Stärke, mit einem eigenen Frontend als Preis.
Veröffentlichung statt Live-Abruf
Inhalte bei der Freigabe in Shopify schreiben statt bei jedem Aufruf zu laden. Das hält die Ladezeit stabil und macht die Storefront unabhängig von der Verfügbarkeit des CMS.

Typische Fallstricke

Vorschau ohne echtes Frontend
Die Live-Vorschau ist nur so gut wie die Komponenten dahinter. Wenn Storyblok-Bausteine und Shopify-Sektionen unterschiedlich aussehen, sehen Redakteure etwas anderes als der Kunde, und das Vertrauen ins Werkzeug ist schnell weg.
Bausteine ohne Grenzen
Ein Baukasten ohne Regeln erzeugt Seiten, die alles können und nichts aussagen. Wenige, klar definierte Bausteine mit festen Varianten halten Design und Ladezeit im Griff und lassen sich später erweitern.
SEO-Felder ohne Zuständigkeit
Wenn niemand festlegt, ob Titel und Beschreibung aus dem CMS oder aus Shopify kommen, entstehen leere oder doppelte Angaben. Diese Zuständigkeit gehört ins Modell, nicht in die Absprache.

Häufige Fragen

Muss ich für Storyblok mein Theme aufgeben?

Nein. Ausgewählte Seitentypen können Inhalte aus Storyblok beziehen, während der Rest des Shops unverändert bleibt. Eine eigene Storefront wird erst nötig, wenn die volle Live-Vorschau über alle Seiten hinweg gefordert ist.

Wie werden Produkte in Inhalten verwendet?

Über eine Produktauswahl im Editor, die auf ein Shopify-Produkt verweist. Preis, Verfügbarkeit und Produkttexte kommen zur Laufzeit aus Shopify. So bleibt genau eine Quelle für Produktdaten bestehen.

Bleibt die Seite dabei schnell?

Wenn Inhalte bei der Freigabe übertragen oder zwischengespeichert werden, ja. Ein Live-Abruf bei jedem Seitenaufruf kostet dagegen messbar Zeit und macht die Storefront von einem zweiten System abhängig.

Wie viele Bausteine brauchen wir?

Weniger als gedacht. Fünf bis zehn gut definierte Bausteine mit festen Varianten decken die meisten Kampagnenseiten ab. Jeder zusätzliche Baustein erhöht Pflegeaufwand und das Risiko, dass Seiten auseinanderlaufen.

Was ist mit mehreren Sprachen?

Storyblok kann Inhalte je Sprache führen, Shopify übersetzt Produktdaten. Wichtig ist eine saubere Zuordnung von CMS-Sprache zu Shopify-Markt inklusive hreflang, sonst zeigt die Kampagnenseite andere Sprachlogik als der restliche Shop.

Shopify-Contentful-IntegrationFür Marken mit eigenständigem Content-Team, das Landingpages und Kampagnen pflegen will, ohne im Shop-Backend zu arbeiten.Integration ansehen Shopify-Sanity-IntegrationFür Teams, die redaktionelle Inhalte eng mit dem Katalog verzahnen wollen und dafür Shopify-Produkte direkt im CMS sehen möchten.Integration ansehen Shopify-Akeneo-IntegrationFür Marken mit vielen Attributen, Sprachen oder Kanälen, die Produktinformationen nicht länger im Shop-Backend und in Tabellen doppelt führen wollen.Integration ansehen

Systemintegration: Muster und DatenhoheitDie übergreifende Sicht auf ERP, PIM, WMS und Middleware.