---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/apps/shopify-anbinden"
locale: de
meta:
"og:title": "Academy App"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Apps](https://academy.laioutr.com/bereiche/apps)
- [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)
- [Shopify anbinden](https://academy.laioutr.com/apps/shopify-anbinden)
# Shopify anbinden
Die Shopify-App verbindet einen Shopify-Shop über Storefront API, Customer Account API und Admin API mit Laioutr. Produkte, Kollektionen, Warenkorb, Menüs, Inhalte und Kundenlogin kommen direkt aus Shopify.
## Bevor du startest
- Tarif
- Jeder Laioutr-Plan, dazu ein Shopify-Abo
- Rolle
- Developer-Rolle in der Umgebung
- Dauer
- 10 Min.
### Voraussetzungen
- Admin-Zugang zum Shopify-Shop
- Headless-Vertriebskanal in Shopify
- Callback-URL der Laioutr-Storefront für den Kundenlogin
Zuletzt geprüft am 15. Oktober 2026
Bindet Shopify als Commerce-Backend an: Produkte, Kollektionen, Warenkorb mit Rabattcodes, Menüs, Blog, Inhaltsseiten und Vorschlagssuche über die Storefront API, Kundenlogin und Adressen über die Customer Account API, Shopify-Dateien in der Studio-Mediathek über die Admin API.
[Entwicklerdokumentation](https://docs.laioutr.com/apps/app-docs/shopify)
## So funktioniert es
1. Headless-Kanal installieren und Storefront API Token erzeugenWo: Shopify Admin · Rolle: Shop-Admin · Dauer: 10 min
2. Customer Account API mit Client type Confidential und Callback-URL einrichtenWo: Shopify Admin · Rolle: Shop-Admin · Dauer: 10 min
3. Custom App mit Admin-API-Scopes anlegen und Token erzeugenWo: Shopify Admin · Rolle: Shop-Admin · Dauer: 10 min
4. App im Katalog installierenWo: Laioutr Cockpit, Apps · Rolle: Developer · Dauer: 2 min
5. Werte unter Configuration eintragen, testen und speichernWo: Laioutr Cockpit, Configuration · Rolle: Developer · Dauer: 5 min
6. Umgebung deployen und Daten in Studio prüfenWo: Laioutr Cockpit und Studio · Rolle: Developer, Content Manager · Dauer: 10 min
## Konfiguration
| Feld | Zweck | Woher | Pflicht | Pro Environment |
| --- | --- | --- | --- | --- |
| `shopId` | Shop-Kennung zum Aufbau der Customer-Account-API-Adressen. | Shop-Domain im Format store-id.myshopify.com. | Ja | Ja |
| `storeDomain` | Domain für Storefront- und Admin-API-Aufrufe. | Shop-Domain im Format store-id.myshopify.com. | Ja | Ja |
| `privateAccessKey` | Storefront API private access token für Produkte, Kollektionen, Warenkorb und Inhalte. | Shopify Admin, Vertriebskanal Headless. | Ja | Ja |
| `adminAccessToken` | Admin API Token für die Mediathek und zusätzliche Daten. | Shopify Admin, Settings > Apps and sales channels > Develop apps, Custom App mit den nötigen Scopes. | Ja | Ja |
| `customerAccountApiClientId` | OAuth2 Client ID für den Kundenlogin. | Shopify Admin, Customer Account API, Anwendung mit Client type Confidential. | Ja | Ja |
| `customerAccountApiClientSecret` | OAuth2 Client Secret derselben Anwendung, nur serverseitig genutzt. | Shopify Admin, Customer Account API. | Ja | Ja |
| `redirectUri` | Callback-URL für den OAuth2-Login, identisch mit dem Eintrag in Shopify. | Von Laioutr für die Storefront bereitgestellt. | Ja | Ja |
| `analyticsIds` | Optional: sendet Analytics-Zielen einfache IDs statt Shopify-GIDs. | Projektentscheidung, standardmäßig aus. | Nein | Ja |
## Häufige Fehler
- Der Kundenlogin bricht nach der Weiterleitung zu Shopify ab.
- **Ursache:** Die Callback-URL in der Customer Account API weicht von redirectUri ab, oder der Client type ist nicht Confidential.
- **Lösung:** Beide URLs exakt angleichen und den Client type auf Confidential setzen.
- Die Mediathek in Studio zeigt keine Shopify-Dateien.
- **Ursache:** Admin API Token fehlt oder der Custom App fehlen Scopes wie read_files und write_files.
- **Lösung:** Scopes in der Custom App ergänzen, neuen Token erzeugen und unter Configuration eintragen.
- Die Vorschau bleibt ohne Produkte.
- **Ursache:** storeDomain hat nicht das Format store-id.myshopify.com oder der Storefront Token ist falsch.
- **Lösung:** Werte korrigieren und mit Test connection prüfen.
- Neue Zugangsdaten zeigen keine Wirkung auf der Storefront.
- **Ursache:** Gespeicherte Einstellungen gelten erst ab dem nächsten Deployment der Umgebung.
- **Lösung:** Die Umgebung mit Deploy neu bauen.
Mit der Shopify-App wird Shopify zum Commerce-Backend der Laioutr-Storefront. Die App liest Produkte, Kollektionen, Warenkörbe, Menüs, Blogbeiträge und Inhaltsseiten über die **Storefront API**. Über die **Customer Account API** melden sich Kundinnen und Kunden mit ihrem Shopify-Konto an, verwalten Adressen und setzen Passwörter zurück. Ein Token für die **Admin API** öffnet die Shopify-Dateien in der Mediathek von Studio.
Orchestr übersetzt alle Shopify-Daten in das einheitliche Datenmodell von Laioutr. Sections für Produktlisten, Produktdetailseiten, Warenkorb und Suche funktionieren dadurch ohne Shopify-spezifische Anpassung, auch Rabattcodes im Warenkorb und die Vorschlagssuche kommen aus Shopify.
Im Shopify-Shop selbst ist kein Code anzupassen. Es braucht nur einige Werte aus dem Shopify Admin, die das Shop-Team selbst einträgt oder an den Implementierungspartner übergibt.
## Schritt für Schritt
1. 1 ### Schritt 1: Headless-Kanal einrichten
Im Shopify Admin unter **Apps and sales channels** den Kanal **Headless** installieren und darin einen **Storefront API private access token** erzeugen.
2. 2 ### Schritt 2: Kundenlogin vorbereiten
Die **Customer Account API** aktivieren, eine Anwendung mit **Client type** **Confidential** anlegen, Client ID und Client Secret notieren und die Callback-URL der Storefront eintragen.
3. 3 ### Schritt 3: Mediathek freischalten
Unter **Settings** > **Apps and sales channels** > **Develop apps** eine Custom App mit Admin-API-Zugriff anlegen, mindestens die Scopes `read_files`, `write_files`, `read_themes`, `write_themes` und `read_online_store_navigation` vergeben und einen Admin API Token erzeugen.
4. 4 ### Schritt 4: App installieren
Im Cockpit unter **Apps** im Reiter **Ecommerce** die App Shopify mit **Install** zum Projekt hinzufügen.
5. 5 ### Schritt 5: Werte eintragen und testen
Im Umgebungsmenü **Configuration** öffnen, die Werte eintragen, mit **Test connection** prüfen und mit **Save settings** speichern.
6. 6 ### Schritt 6: Deployen und prüfen
Die Umgebung mit **Deploy** neu bauen und danach in Studio prüfen, ob Produkte und Kategorien in der Vorschau erscheinen.
## Ergebnis prüfen
Der Verbindungstest meldet Erfolg, die Produktdetailseite in Studio zeigt Produkte aus Shopify, die Mediathek listet Shopify-Dateien, und eine Testanmeldung auf der Storefront führt über Shopify zurück in das Kundenkonto.
## Häufige Fragen
Muss im Shopify-Shop Code geändert werden?
Nein. Für die Anbindung reichen der Headless-Kanal, die Customer Account API und eine Custom App mit Admin-API-Zugriff.
Welche Callback-URL gehört in die Customer Account API?
Die URL, die Laioutr für die Storefront bereitstellt. Die URL muss in Shopify und im Feld `redirectUri` der App exakt gleich lauten.
Ist die Admin API zwingend?
Für Produkte und Warenkorb reicht die Storefront API. Der Admin API Token wird für die Mediathek in Studio und zusätzliche Daten gebraucht und ist für den vollen Funktionsumfang vorgesehen.
Werden Märkte und Übersetzungen aus Shopify genutzt?
Ja. Die Shopify-App berücksichtigt Märkte und Übersetzungen aus Shopify, sodass mehrsprachige Storefronts die gepflegten Inhalte zeigen.
## Passend dazu
- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.
Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Zugangsdaten eintragen und Verbindung testen](https://academy.laioutr.com/artikel/zugangsdaten-eintragen-und-verbindung-testen)5 Min.
Zugangsdaten einer App werden je Umgebung unter Configuration eingetragen, mit Test connection geprüft und mit Save settings gespeichert. Wirksam werden sie mit dem nächsten Deployment.
- [Echte Daten in Studio prüfen](https://academy.laioutr.com/artikel/echte-daten-in-studio-pruefen)5 Min.
Studio zeigt in der Vorschau echte Daten aus den angebundenen Apps. Auf dynamischen Seiten wie der Produktdetailseite wählt das Feld Preview Data, welches Produkt die Vorschau zeigt.
- [Medien in Cockpit und Studio verwalten](https://academy.laioutr.com/artikel/medien-in-cockpit-und-studio-verwalten)5 Min.
Bilder, Videos und Audiodateien werden zentral in der Media Library unter Content in Cockpit verwaltet. In Studio wählt der Medienwähler Dateien aus allen verbundenen Bibliotheken, etwa aus dem Shop-System, und lädt neue hoch, wo die Bibliothek es erlaubt.
- [Warenkorb in der Storefront einrichten und prüfen](https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten)5 Min.
Der Warenkorb öffnet sich als seitliches Panel (Cart Sheet) mit Positionen, Gutscheinfeld, Fortschritt bis zum Gratisversand und Summen; zusätzlich gibt es eine eigene Warenkorbseite. Preise, Rabatte, Versandkosten und der Weg zur Kasse kommen vom Commerce-Backend.
## In einer Lektion lernen
- [Commerce-Apps anbinden](https://academy.laioutr.com/lektionen/entwickler-commerce-apps-anbinden)12 Min.
- [Shopify verbinden](https://academy.laioutr.com/lektionen/live-gang-shopify-verbinden)8 Min.
## [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)
In diesem Leitfaden suchen
1. [Shopify anbinden](https://academy.laioutr.com/apps/shopify-anbinden)10 Min.
2. [Shopware mit Checkout-Plugin anbinden](https://academy.laioutr.com/apps/shopware-mit-checkout-plugin-anbinden)12 Min.
3. [VTEX anbinden](https://academy.laioutr.com/apps/vtex-anbinden)8 Min.
4. [Sylius anbinden](https://academy.laioutr.com/apps/sylius-anbinden)8 Min.
5. [JTL-Wawi anbinden](https://academy.laioutr.com/apps/jtl-wawi-anbinden)8 Min.
6. [B2B Sellers für Shopware anbinden](https://academy.laioutr.com/apps/b2b-sellers-fuer-shopware-anbinden)8 Min.
7. [Magento 2 anbinden](https://academy.laioutr.com/apps/magento-2-anbinden)10 Min. In Vorbereitung
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/apps/shopify-anbinden",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/apps/shopify-anbinden"
]
}
]
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "Commerce-Systeme",
"item": "https://academy.laioutr.com/leitfaeden/commerce-systeme",
"position": 3
},
{
"@type": "ListItem",
"name": "Shopify anbinden",
"item": "https://academy.laioutr.com/apps/shopify-anbinden",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Muss im Shopify-Shop Code geändert werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Für die Anbindung reichen der Headless-Kanal, die Customer Account API und eine Custom App mit Admin-API-Zugriff.
"
}
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Welche Callback-URL gehört in die Customer Account API?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die URL, die Laioutr für die Storefront bereitstellt. Die URL muss in Shopify und im Feld redirectUri der App exakt gleich lauten.
"
}
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Ist die Admin API zwingend?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Für Produkte und Warenkorb reicht die Storefront API. Der Admin API Token wird für die Mediathek in Studio und zusätzliche Daten gebraucht und ist für den vollen Funktionsumfang vorgesehen.
"
}
},
{
"@id": "https://academy.laioutr.com/apps/shopify-anbinden#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Werden Märkte und Übersetzungen aus Shopify genutzt?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Die Shopify-App berücksichtigt Märkte und Übersetzungen aus Shopify, sodass mehrsprachige Storefronts die gepflegten Inhalte zeigen.
"
}
}
]
}
```