Mit dem Shopify-Plugin bindest du deinen configento.app Konfigurator direkt in deine Shopify-Produktseiten ein. Kunden konfigurieren, sehen den Preis in Echtzeit und kaufen über den normalen Shopify-Checkout — ohne den Shop zu verlassen.
Voraussetzungen
- Shopify-Shop mit einem Online Store 2.0-Theme (z. B. Dawn, Sense, Refresh, Origin oder aktuelle Premium-Themes). Legacy-Themes ohne JSON-Templates werden nicht unterstützt.
- Aktiver configento.app Account
- Mindestens eine Konfigurator-Komponente im configento.app Backend (
admin.configento.app)
Kein Shopify Plus nötig — das Plugin funktioniert auf allen Shopify-Plänen.
Installation
- Im Shopify App Store nach „Configento Configurator" suchen.
- App hinzufügen klicken.
- Berechtigungsbildschirm bestätigen.
- Shopify leitet automatisch in den Embedded Admin des Plugins weiter.
Erstkonfiguration
Nach der Installation öffnet sich der Embedded Admin direkt im Shopify-Backend (als eingebettete Ansicht).
Schritt 1 — configento.app Account verknüpfen
- Im Service-Portal (
service.configento.app) einloggen. - „Shopify-Verbindung anlegen" → configento.app generiert einen 6-stelligen Onboarding-Code (gültig 15 Minuten).
- Den Code im Shopify Embedded Admin eingeben → Verknüpfen.
- Status wechselt auf „Verknüpft mit: \<dein Account>".
Hinweis: Die Verknüpfung ist 1-zu-1 (ein Shopify-Shop ↔ ein configento.app Account). Soll der Shop später mit einem anderen Account verknüpft werden, muss die App deinstalliert und neu installiert werden.
Schritt 2 — Produkt mit Konfigurator-Komponente verknüpfen
Im Embedded Admin → Tab „Produkte":
- Liste aller Shopify-Produkte mit aktueller Konfigurator-Zuordnung wird angezeigt.
- Pro Produkt: Dropdown mit allen verfügbaren configento.app Komponenten auswählen.
- Die Auswahl wird sofort als Metafeld am Produkt gespeichert.
Alternative: Das Metafeld kann auch direkt im Shopify Admin gesetzt werden: Produkt öffnen → Metafelder → Namespace configento, Key component_id, Typ single_line_text_field, Wert = Komponenten-ID (numerisch, z. B. 10244).
Schritt 3 — Theme App Block platzieren
Damit der Konfigurator auf der Produktseite erscheint, muss der Block einmal im Theme aktiviert werden:
- Im Embedded Admin auf „Theme-Block einbauen" klicken.
- Shopify öffnet den Theme-Editor und fügt den Konfigurator-Block automatisch in die Produktseiten-Vorlage ein.
- Wichtig: Den Block per Drag-and-Drop zwischen Produktbeschreibung und Preis-Element ziehen.
- Speichern.
Block-Einstellungen im Theme-Editor:
| Einstellung | Standard | Bedeutung |
|---|---|---|
| Configento Backend URL | https://admin.configento.app |
Nur ändern wenn justSelling explizit einen anderen Host nennt |
| CSS-Selektor des Theme-Preises | leer | Auto-Detection funktioniert für die meisten Themes — nur bei individuellen Themes ausfüllen |
| Konfigurator automatisch über dem Preis platzieren | an | Schiebt den Block beim Laden vor das Preis-Element, unabhängig von der Position im Theme-Editor |
| Zusammenfassung der Konfiguration anzeigen | aus | Blendet eine textuelle Zusammenfassung unter dem Konfigurator ein |
| Lade-Text | leer | Automatische Sprachwahl (DE/EN/ES/FR), bei Bedarf überschreibbar |
Was passiert beim Kauf?
- Kunde öffnet die Produktseite — der Konfigurator lädt automatisch für alle verknüpften Produkte.
- Kunde wählt seine Konfiguration — der Preis im Theme aktualisiert sich in Echtzeit.
- Kunde klickt „In den Warenkorb" — die Konfiguration wird gespeichert und die gewählten Eigenschaften erscheinen im Warenkorb als Bundle.
- Checkout und Bezahlung laufen über den normalen Shopify-Checkout — alle Zahlungsarten, Rabattcodes und Shopify-Funktionen stehen unverändert zur Verfügung.
Mehrsprachigkeit
Das Plugin unterstützt Deutsch, Englisch, Spanisch und Französisch. Der Storefront-Konfigurator folgt automatisch der Sprache des Shopify-Shops (Shopify Markets / Locale-Selector). Andere Sprachen fallen auf Englisch zurück.
Bearbeiten einer gespeicherten Konfiguration
Das Plugin aktiviert automatisch einen „Bearbeiten"-Link auf der Cart-Seite. Käufer können damit zur Produktseite zurücknavigieren und ihre Konfiguration anpassen — solange der Checkout noch nicht abgeschlossen ist. Dieses Verhalten kann im Theme-Editor unter „App-Einbettungen" deaktiviert werden.
Troubleshooting
Konfigurator wird nicht angezeigt:
| Symptom | Ursache | Fix |
|---|---|---|
| Bereich komplett leer | Theme App Block nicht aktiviert | Embedded Admin → „Theme-Block einbauen" |
| Lade-Text bleibt stehen | Komponenten-ID fehlt oder ist ungültig | Embedded Admin → „Produkte" → Komponente zuweisen |
| Fehlermeldung nach 8 Sekunden | configento.app Cloud nicht erreichbar | status.configento.app prüfen |
Falscher Preis im Warenkorb:
| Symptom | Ursache | Fix |
|---|---|---|
| Kein Aufschlag im Warenkorb | Cart-Transform-Function nicht aktiv | Embedded Admin neu öffnen (triggert Reaktivierung) |
| Preisunterschied Produktseite vs. Warenkorb | Währungs-/Steuerbrücke falsch konfiguriert | Pricing-Tab im Embedded Admin prüfen |
Verknüpfung schlägt fehl:
| Symptom | Ursache | Fix |
|---|---|---|
| „Code ungültig oder abgelaufen" | Code älter als 15 Minuten | Im configento.app Service-Portal neuen Code generieren |
| „Shop bereits verknüpft" | Verknüpfung besteht zu anderem Account | App deinstallieren und neu installieren |