Dieser Artikel zeigt, wie du Shopify mit Onepage verbindest. Dieses Setup ermöglicht es dir, Produkte aus deinem Shopify-Shop auf deiner Onepage-Website anzuzeigen und über Shopify zu verkaufen.
Die Komponenten
Shopify: Das Shopsystem, in dem du deine Produkte verwaltest und Verkäufe abwickelst.
Claude: Das KI-Modell, das deine Website und den gewünschten Shop-Bereich erstellt.
Onepage-MCP: Die Verbindung, über die Claude deine Website in Onepage erstellen und bearbeiten kann.
Vorteile der Shopify-Anbindung
Die Verbindung kombiniert die flexible Seitenerstellung in Onepage mit der Produkt- & Bestellverwaltung von Shopify:
Zentrale Produktverwaltung: Du verwaltest Produkte, Preise & Verfügbarkeiten direkt in Shopify. Änderungen werden anschließend auf deiner Onepage-Website übernommen.
Flexible Produktauswahl: Über Produkt-Tags steuerst du, welche Produkte auf deiner Website angezeigt werden.
Shopify-Checkout: Deine Kund:innen schließen den Kauf über Shopify ab, während du Bestellungen weiterhin zentral in Shopify verwaltest.
Shopify mit Onepage verbinden: Schritt-für-Schritt-Anleitung
Befolge diese Schritte, um deinen Shopify-Shop mit Onepage zu verbinden:
📌 Hinweis: Die folgenden Schritte und Screenshots basieren auf dem Stand zum Zeitpunkt der Erstellung dieses Artikels. Die Benutzeroberfläche oder Bezeichnungen des Tools können sich inzwischen geändert haben. Sollten dir Abweichungen auffallen, empfehlen wir, die aktuellen Anleitungen im Tool zu prüfen, im Hilfe-Center des Anbieters nachzuschauen oder den Support des Anbieters zu kontaktieren.
Die aktuelle Anleitung findest du in der offiziellen Shopify-Dokumentation zum Headless-Vertriebskanal.
I. Shopify Headless einrichten
Schritt 1:
Öffne deinen Shopify-Adminbereich und navigiere zu „Vertriebskanäle“.
Schritt 2:
Suche nach dem Vertriebskanal „Headless“.
Schritt 3:
Wähle „Headless“ aus und installiere den Vertriebskanal in deinem Shopify-Shop.
Schritt 4:
Öffne den installierten Headless-Vertriebskanal.
Schritt 5:
Klicke auf „Storefront hinzufügen“ und erstelle eine neue Storefront für deine Onepage-Website.
Schritt 6:
Öffne die neue Storefront. Klicke im Bereich „Storefront API“ auf „Verwalten“.
Schritt 7:
Kopiere den öffentlichen Storefront-API-Zugriffstoken. Du benötigst ihn später für die Verbindung mit Onepage.
⚠️ Wichtig: Verwende ausschließlich den öffentlichen Zugriffstoken. Teile oder veröffentliche keinen privaten Zugriffstoken.
II. Shop-Bereich mit Claude erstellen
Schritt 1:
Öffne Claude und stelle sicher, dass das Onepage-MCP verbunden ist. Eine detaillierte Anleitung dazu findest du in diesem Artikel.
Schritt 2:
Starte einen neuen Chat und füge zuerst den vorbereiteten technischen Master-Prompt ein. Dieser weist Claude an, die aktuellen Onepage-Skills & Shopify-Schnittstellen zu prüfen.
Technischer Master-Prompt:
## STEP 0 — PRE-EXECUTION: SKILL DISCOVERY VIA ONEPAGE MCP Before writing a single line of code or making any architectural decisions, you MUST:
1. Call `Onepage:onepage_skill_list` to retrieve all available Onepage skills.
2. Read the returned list carefully — inspect each skill's `slug`, `title`, and `triggers` field.
3. Identify every skill whose triggers overlap with this project. Candidates will likely include but are not limited to: - Any skill mentioning React, vibe sections, or component apps - Any skill mentioning frontend design, CSS, or UI - Any skill mentioning site creation, page creation, or publishing - Any skill mentioning external APIs or data fetching - Any skill mentioning media, images, or assets
4. For each candidate skill identified in step 3, call `Onepage:onepage_skill_get` with its slug to retrieve the full skill body.
5. After reading all relevant skills in full, reason explicitly about which combination of skills defines the optimal build approach for this project. State your conclusions before proceeding: - Which skill governs the overall site/page scaffolding? - Which skill governs the React vibe section for the Shopify product grid? - Which skill governs frontend design tokens, CSS variables, and layout? - Are there any skill conflicts or sequencing constraints to respect? 6. Only after completing steps 1–5 should you proceed to Step 0.5. Do NOT skip this step. Do NOT assume you already know the correct Onepage workflow from prior context. Skills may have been updated, added, or reordered. Always read them fresh.
--- ## STEP 0.5 — SHOPIFY API REFERENCE CHECK Before writing any Shopify-related code, fetch and read the official documentation to ground every API call in the current spec:
1. Fetch https://shopify.dev/docs/api/storefront to confirm the current stable API version and authentication model.
2. Fetch https://shopify.dev/docs/api/storefront/latest/queries/products to verify the exact GraphQL query shape for product listings, including all available fields for title, description, handle, priceRange, featuredImage, tags, and variants.
3. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate to verify the correct mutation signature and required input shape before implementing cart creation.
4. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesAdd to verify the correct mutation signature for adding items to an existing cart. 5. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesRemove to verify the correct mutation signature for item removal. Use the returned documentation as the sole source of truth for all Shopify-related code. If anything stated elsewhere in this prompt conflicts with what shopify.dev returns, defer to shopify.dev without exception. Note the confirmed API version and use it consistently across all endpoint URLs. Only after completing steps 0 and 0.5 in full should you begin executing the project below.
Schritt 3:
Füge unter dem Master-Prompt deine Projektbeschreibung ein. Beschreibe dabei:
den gewünschten Seitenaufbau
die Produkt-Tags für die Produktauswahl
das Design & Layout
die gewünschten Filter- oder Warenkorb-Funktionen
das Verhalten auf Mobilgeräten
Schritt 4:
Lass Claude die Website über das Onepage-MCP erstellen. Warte, bis die Erstellung vollständig abgeschlossen ist.
III. Shopify-Zugangsdaten in Onepage eintragen
Schritt 1:
Öffne die erstellte Website unter beta.onepage.io und suche das React-Element, das den Shopify-Bereich steuert.
Schritt 2:
Trage die Domain deines Shopify-Shops ein, beispielsweise:
dein-shop.myshopify.com
Schritt 3:
Füge den zuvor kopierten öffentlichen Storefront-API-Zugriffstoken in das dafür vorgesehene Feld ein.
Schritt 4:
Prüfe, ob die vorgesehenen Produkte geladen werden und Warenkorb & Checkout funktionieren. Veröffentliche anschließend die Website.
🎉 Dein Shopify-Shop ist jetzt mit deiner Onepage-Website verbunden. Du kannst deine Produkte in Shopify verwalten und über Produkt-Tags steuern, welche davon auf deiner Website angezeigt werden. 🎉
Praxisbeispiel: Headless-Shopify-Website erstellen
In diesem Beispiel erstellt Claude eine vollständige Headless-Shopify-Website für die KI-Beratungsagentur „NEXUS.AI“. Die Produktdaten werden direkt aus Shopify geladen und in einen individuell gestalteten Shop-Bereich eingebunden.
Der verwendete Prompt
Füge nach dem technischen Master-Prompt folgende Projektbeschreibung ein:
"Nutze das Onepage-MCP, um eine vollständige Headless-Shopify-Website für eine KI-Beratungsagentur namens „NEXUS.AI“ zu erstellen.
Die Website soll echte Produktdaten aus Shopify laden und die ersten zwölf Produkte in einer responsiven Produktübersicht anzeigen. Jede Produktkarte soll ein Bild, den Produkttitel, eine kurze Beschreibung, den Preis & die zugehörigen Produkt-Tags enthalten.
Beim Klick auf ein Produktbild soll sich eine Detailansicht öffnen. Dort werden das Produktbild, die vollständige Beschreibung, der Preis, die verfügbaren Varianten & ein Warenkorb-Button angezeigt.
Erstelle außerdem einen Warenkorb, in dem Produkte hinzugefügt, entfernt & in ihrer Menge angepasst werden können. Der Checkout soll anschließend über Shopify erfolgen.
Die Website soll folgende Bereiche enthalten:
a. Navigation
b. Hero-Sektion
c. Vergleich zwischen Web 2.0 & Web 3.0
d. Shopify-Produktübersicht
e. Produktdetailansicht
f. Vorstellung der Agentur
g. Kontaktbereich
h. Footer
Verwende für das Design einen futuristischen „Neural Noir & Holographic Web3“-Stil mit dunklen Hintergründen, Cyan- & Violetttönen, leuchtenden Rahmen, Glaseffekten & dezenten Animationen.
Erstelle die Website vollständig responsiv als React-Element. Die Shopify-Store-URL & der öffentliche Storefront API-Zugriffstoken sollen über die Einstellungen des Elements eingetragen werden können.
Prüfe vor der Umsetzung die aktuellen Onepage-Skills & die offizielle Shopify-Dokumentation. Verwende für alle Shopify-Abfragen die aktuell unterstützte Storefront API-Version."
2. Die Verarbeitung: Claude prüft zunächst die verfügbaren Onepage-Skills und die aktuelle Shopify-Dokumentation. Anschließend nutzt Claude das Onepage-MCP, um die Seitenstruktur, das Design & das Shopify-React-Element direkt im Onepage-Projekt zu erstellen.
Während der Umsetzung kannst du Claude jederzeit Änderungen mitteilen, beispielsweise:
Farben oder Schriftarten anpassen
Sektionen hinzufügen oder entfernen
das Produktlayout verändern
Animationen reduzieren
Warenkorb-Funktionen ergänzen
3. Das Ergebnis: Nach Abschluss erhältst du den Link zum erstellten Onepage-Projekt. Die Website enthält eine Shopify-Produktübersicht, Produktdetailansichten, einen Warenkorb & die Weiterleitung zum Shopify-Checkout.
Öffne anschließend das Shopify-React-Element und hinterlege deine Store-URL sowie den öffentlichen Storefront API-Zugriffstoken. Sobald die Verbindung hergestellt ist, werden die Produktdaten direkt aus deinem Shopify-Shop geladen.
⚠️ Wichtig: Während der Beta-Phase kannst du Seiten, die Claude über den Onepage-MCP-Workflow erstellt hat, ausschließlich über beta.onepage.io öffnen & bearbeiten.
Verwende dafür nicht app.onepage.io, da die generierte Seite dort möglicherweise nicht geladen wird und ein dauerhafter Ladebildschirm erscheint. Nutze daher immer den Beta-Link.
Häufig gestellte Fragen (FAQ)
Warum benötige ich den Shopify Headless-Vertriebskanal?
Warum benötige ich den Shopify Headless-Vertriebskanal?
Der Headless-Vertriebskanal stellt die Verbindung zur Storefront API her. Dort erstellst du deine Storefront, verwaltest die Zugriffsrechte & erhältst den öffentlichen Zugriffstoken.
Warum werden keine Shopify-Produkte angezeigt?
Warum werden keine Shopify-Produkte angezeigt?
Prüfe, ob:
die Store-URL korrekt eingetragen ist
der öffentliche Zugriffstoken gültig ist
die Produkte im Headless-Vertriebskanal veröffentlicht sind
die verwendeten Produkt-Tags mit dem Filter im React-Element übereinstimmen
die Produkte aktiv & verfügbar sind
Wo finde ich meine erstellte Website?
Wo finde ich meine erstellte Website?
Du findest die Website in deinem Onepage-Account. Während der Beta-Phase musst du MCP-generierte Seiten über beta.onepage.io öffnen & bearbeiten. Verwende dafür nicht den regulären Editor unter app.onepage.io.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂