Docs  /  Integrationen  /  Shopify-Plugin installieren

Shopify-Plugin installieren

Zuletzt aktualisiert: 20. Oktober 2026

Mit der App configento.app aus dem Shopify App Store zeigst du deine Konfiguratoren direkt auf deinen Shopify-Produktseiten. Deine Kunden stellen ihr Produkt zusammen, sehen Preis und Produktbild bei jeder Auswahl und kaufen über den normalen Shopify-Checkout. Die Konfiguration steht im Warenkorb, im Checkout, in der Bestellung und in der Bestellbestätigung.

Im Shop läuft immer die Frontend-Engine V3 – unabhängig davon, was in der Komponente eingestellt ist. Was V3 anders macht als Legacy, steht in Frontend-Engine: Legacy oder V3.

Voraussetzungen

  • Ein Shopify-Shop mit einem Theme, das App-Blöcke unterstützt (Online Store 2.0, z. B. Dawn, Horizon, Sense, Refresh, Origin und die meisten aktuellen Themes).
  • Kein Shopify Plus nötig – die App funktioniert auf allen Shopify-Plänen.
  • Ein configento.app Konto brauchst du vorher nicht. Du kannst es bei der Einrichtung anlegen lassen oder ein bestehendes verbinden.

Installation

  1. Öffne im Shopify App Store die App configento.app und installiere sie.
  2. Bestätige die Berechtigungen, die Shopify dir anzeigt.
  3. Shopify öffnet die App danach im Shopify-Admin. Du findest sie später jederzeit unter deinen Apps als configento.app.

Oben rechts in der App führt der Link Anleitung zu diesem Artikel.

Die App im Überblick

Die App hat vier Reiter:

Reiter Wofür
Einrichtung Abo, Verbindung mit deinem configento.app Konto, Beispielkomponenten
Produkte Welches Produkt welche Komponente zeigt
Preise Währung, Steuer und Umrechnung zwischen configento.app und Shopify
Theme-Block Konfigurator und Warenkorb-Erweiterung im Theme einschalten, Bestellbestätigung anpassen

Produkte, Preise und Theme-Block sind erst nach der Verbindung mit einem Konto anklickbar. Danach trägt der Reiter Einrichtung ein Häkchen.

Die App erscheint in der Sprache, die du im Shopify-Admin eingestellt hast (Deutsch, Englisch, Spanisch oder Französisch, sonst Englisch). Fehlermeldungen aus dem Hintergrund – etwa „invalid or expired code“ – sind derzeit immer englisch.

Schritt 1: Plan auswählen

Ohne aktives Abo zeigt die App statt der Reiter den Hinweis Abo erforderlich: „Für diesen Shop ist kein aktives Configento-Abo hinterlegt. Wähle einen Plan, um den Konfigurator zu nutzen — die ersten 14 Tage sind kostenlos.“

Klicke auf Plan auswählen. Shopify öffnet die Plan-Seite, dort bestätigst du den Plan. Abgerechnet wird über deine Shopify-Rechnung. Das Abo schaltet den Leistungsumfang Professional frei.

Ohne aktives Abo lädt auch der Konfigurator im Shop nicht.

Schritt 2: configento.app Konto verbinden

Im Reiter Einrichtung fragt die App: Nutzt du Configento bereits?

Noch kein Konto

Klicke auf Nein — Konto jetzt anlegen. configento.app legt dein Konto an und schickt eine Einladung an die E-Mail-Adresse deines Shopify-Shops. Über die Einladung vergibst du dein Passwort für das Service-Portal. Das dauert meist nur einen Moment – klicke danach auf Neu laden.

Bestehendes Konto

Klicke auf Ja — ich habe schon ein Konto. Du brauchst einen 6-stelligen Verbindungscode:

  1. Öffne das Service-Portal (service.configento.app) und melde dich an.
  2. Klicke beim Dienst, dem der Shop zugeordnet werden soll, auf Verwalten. Der Admin öffnet sich.
  3. Gehe zu Einstellungen → Integrationen und scrolle zur Karte Shopify.
  4. Hast du mehrere Dienste, wähle unter Shopify-Shop mit Service Order verknüpfen den richtigen aus.
  5. Klicke auf Verbindungs-Code generieren. Der Verknüpfungs-Code ist 24 Stunden gültig (Gültig bis).
  6. Füge den Code in der App ein und klicke auf Verbinden.

Danach zeigt der Reiter Einrichtung „Mit Configento-Kunde … verknüpft.“

Wichtig: Das Shopify-Abo ist ein eigener Dienst in deinem Kundenkonto. Verbindest du ein bestehendes Konto, legt das Service-Portal dafür einen neuen Dienst mit einem eigenen, zunächst leeren Arbeitsbereich an; die App arbeitet danach mit diesem Arbeitsbereich. Deine bisherigen Komponenten bleiben in ihrem Dienst. Brauchst du sie im Shop, exportierst du sie dort und importierst sie im neuen Arbeitsbereich mit ZIP importieren (siehe Erste Komponente anlegen).

Ein Shop ist immer mit genau einem Konto verbunden. Soll er zu einem anderen gehören, deinstalliere die App und installiere sie neu.

Schritt 3: Beispielkomponenten (optional)

Ist dein Arbeitsbereich noch leer, fragt der Reiter Einrichtung: „Sollen wir vier Beispielkomponenten anlegen?“ Mit Ja, anlegen bekommst du vier Komponenten – kombiniertes Produktbild, Kombimerkmale mit Formeln, ein Regelwerk und grafische Icons. Sie werden automatisch veröffentlicht; das dauert einen Moment. Danach kannst du sie im Reiter Produkte zuordnen und im Admin wie jede andere Komponente bearbeiten oder löschen.

Eigene Komponenten legst du im Admin an, den du aus dem Service-Portal mit Verwalten öffnest. Zuordnen kannst du nur veröffentlichte Komponenten – siehe Erste Komponente anlegen.

Schritt 4: Produkte zuordnen

Im Reiter Produkte:

  1. Suche unter Produkt hinzufügen nach dem Produktnamen.
  2. Wähle in der Zeile des Produkts die Komponente (Komponente wählen…) und klicke auf +.
  3. Das Produkt erscheint oben unter Produkte mit Konfigurator. Dort wechselst du die Komponente oder entfernst die Zuordnung mit −.

Änderungen werden sofort gespeichert. Shopify hält Shop-Seiten einige Minuten im Cache – eine neue Zuordnung erscheint deshalb mit kurzer Verzögerung.

Direkt nach der Installation baut Shopify einen Index für die Zuordnungen auf. Solange zeigt der Reiter „Shopify baut den Produktindex für diese App auf.“ und listet noch keine Produkte. Bereits gemachte Zuordnungen bleiben erhalten. Lade die Seite nach einigen Minuten neu oder klicke auf Erneut prüfen.

Ohne die App zuordnen: Die Zuordnung ist ein Produkt-Metafeld. Im Shopify-Admin findest du es am Produkt als Configento Component ID (Namespace configento, Key component_id). Als Wert trägst du die ID einer veröffentlichten Komponente ein. Produkte ohne diesen Wert zeigen keinen Konfigurator.

Schritt 5: Theme einrichten

Im Reiter Theme-Block schaltest du zwei Dinge ein – einmal pro Theme. Neben jedem Punkt steht, ob er in deinem veröffentlichten Theme Aktiv oder Nicht aktiviert ist.

Konfigurator-Block

  1. Klicke auf Konfigurator-Block einbauen. Shopify öffnet den Theme-Editor mit der Produktvorlage und fügt den Block Configento Configurator hinzu.
  2. Shopify setzt neue Blöcke ans Ende. Das macht nichts: Mit der Einstellung Konfigurator automatisch über dem Preis platzieren (Standard: an) springt der Konfigurator beim Laden direkt vor den Preis. Alternativ ziehst du den Block über den Button „In den Einkaufswagen“.
  3. Speichern.

Einstellungen des Blocks im Theme-Editor:

Einstellung Standard Bedeutung
Configento-Backend-URL https://admin.configento.app Nur ändern, wenn Configento dir ausdrücklich einen anderen Host nennt
CSS-Selector des Theme-Preises (optional) leer Leer = automatische Erkennung (Dawn, Sense, Refresh, Origin, Horizon und die meisten Premium-Themes). Mehrere Selektoren durch Komma trennen
CSS-Selector der Produktbild-Galerie (optional) leer Leer = automatische Erkennung (Dawn und davon abgeleitete Themes). Dort ersetzt das kombinierte Produktbild das Produktfoto, solange die Komponente Bildebenen liefert
Konfigurator automatisch über dem Preis platzieren an Schiebt den Block beim Laden vor das Preiselement, egal wo er im Theme-Editor steht
Zusammenfassung der Konfiguration anzeigen aus Zeigt unter dem Konfigurator eine Zusammenfassung der Auswahl. An die Bestellung geht sie in jedem Fall
Lade-Text (leer lassen für automatische Sprachwahl) leer Leer = „Konfigurator wird geladen …“ in der Sprache des Shops (DE, EN, ES, FR, sonst Englisch)

Der Konfigurator übernimmt Schrift, Farben und Eckenradien aus Themes der Dawn-Familie.

Warenkorb-Erweiterung „Configento Cart“

Configento Cart ist eine App-Einbettung. Sie zeigt im Warenkorb und in der Warenkorb-Schublade für jede konfigurierte Position das Bild der Konfiguration, die Auswahl des Käufers und einen Link Bearbeiten. Außerdem gibt sie das Bild der Konfiguration an Checkout, Bestellung und Bestellbestätigung weiter.

App-Einbettungen sind in Shopify ausgeschaltet, bis du sie einschaltest – die App kann das nicht selbst.

  1. Klicke auf Configento Cart aktivieren. Shopify öffnet den Theme-Editor mit bereits eingeschalteter Einbettung.
  2. Speichern.

Der Schalter gilt pro Theme. Nach einem Theme-Wechsel oder einer Neuinstallation der App schaltest du ihn erneut ein. Ist er aus, warnt der Reiter: „„Configento Cart“ ist in deinem veröffentlichten Theme nicht aktiviert.“

Ohne Configento Cart funktioniert der Kauf trotzdem – Preis und Konfiguration stimmen. Warenkorb, Checkout und Bestellung zeigen dann aber das Produktfoto statt des Bilds der Konfiguration, und es gibt keinen Bearbeiten-Link.

Schritt 6: Bild in der Bestellbestätigung (optional)

Die Bestellbestätigung per E-Mail enthält die Konfiguration automatisch. Das Produktbild darin kommt aber aus der Mail-Vorlage deines Shops, und die kann eine App nicht ändern. Damit statt des Produktfotos das Bild der Konfiguration erscheint, passt du die Vorlage einmal an. Der Reiter Theme-Block führt dich unter Konfigurationsbild in der Bestellbestätigung (optional) durch die Schritte und bietet die Texte zum Kopieren an:

  1. Bestellbestätigung bearbeiten öffnet den Code der Vorlage.
  2. Suche im Code (Strg+F / Cmd+F) nach dieser Zeile: {% if parent_line_item and parent_line_item.image %}
  3. Ersetze jedes Vorkommen dieser Zeile durch den folgenden Block. Die Standardvorlage enthält die Zeile mehrmals, einmal pro Lieferabschnitt.
{%- comment -%} Configento: show the configuration's combined image {%- endcomment -%}
{%- assign configento_image = '' -%}
{%- for configento_part in line_item_group.components -%}
  {%- for configento_prop in configento_part.properties -%}
    {%- if configento_prop.first == '_configento_image' -%}{%- assign configento_image = configento_prop.last -%}{%- endif -%}
  {%- endfor -%}
{%- endfor -%}
{% if configento_image != blank %}
  <img src="{{ configento_image }}{% if configento_image contains '?' %}&{% else %}?{% endif %}width=120&height=120&crop=center" align="left" width="60" height="60" class="order-list__product-image" alt="">
{% elsif parent_line_item and parent_line_item.image %}
  1. Speichere die Vorlage. Die nächste Bestellbestätigung zeigt das Bild der Konfiguration.

Findest du die Zeile nicht, wurde deine Vorlage angepasst. Dann setzt dein Entwickler oder der Configento-Support den Block an die Stelle, an der das Produktbild eines Bundles ausgegeben wird.

Eigene Domain freigeben

Bei der Verbindung trägt die App die Shopify-Adresse deines Shops (….myshopify.com) automatisch als freigegebene Domäne ein. Läuft dein Shop unter einer eigenen Domain, trägst du sie selbst ein: im Admin unter Einstellungen → Domänen mit Domäne hinzufügen, Modus Produktion. Sonst lädt der Konfigurator auf dieser Domain nicht. Mehr dazu: Globale Einstellungen.

Preise, Währung und Steuern

Den Reiter Preise musst du meist nicht anfassen. Die App liest Währung und Steueranzeige deines Shops bei jedem Aufruf live aus Shopify und rechnet passend um. Der Reiter zeigt unter Währung & Steuer beide Seiten nebeneinander: Configento (Preisquelle) und Shopify (Storefront, live).

  • Steuer: Zeigt dein Shop Preise ohne Steuer, kommen die Aufpreise netto in den Shop, und Shopify rechnet die Steuer an der Kasse auf. Zeigt dein Shop Preise mit Steuer, rechnet die App mit dem Steuersatz, den Shopify für dieses Produkt berechnet. Ist der nicht zu ermitteln, bleiben die Preise auf der Basis, auf der sie in der Komponente angelegt sind.
  • Währung: Nutzen beide Seiten dieselbe Währung, wird nichts umgerechnet („Beide Seiten nutzen EUR. Keine Umrechnung nötig.“). Bei unterschiedlichen Währungen nimmt die App den Wechselkurs aus Shopify Markets.
  • Manueller Umrechnungskurs: Wird nur verwendet, wenn Shopify Markets keinen Kurs liefert. Bei gleicher Währung bleibt er wirkungslos, und der Reiter weist darauf hin. Mit Manuellen Wert entfernen löschst du ihn.

Der Aufpreis im Warenkorb entspricht dem Betrag, den der Konfigurator auf der Produktseite anzeigt.

Was der Käufer sieht

  1. Produktseite: Der Konfigurator lädt mit dem Produkt. Bis er bereit ist, ist der Button zum Warenkorb gesperrt – so landet kein Produkt ohne Konfiguration im Warenkorb. Preis und – sofern die Komponente Bildebenen hat – das kombinierte Produktbild in der Galerie folgen jeder Auswahl.
  2. In den Warenkorb: Die Konfiguration wird gespeichert und die Position mit dem vollen Preis angelegt. Das Bild der Konfiguration kommt etwa eine halbe Minute später dazu (über Configento Cart).
  3. Warenkorb: Bild der Konfiguration, die Auswahl und der Link Bearbeiten. Der Link führt zurück zur Produktseite mit der bisherigen Auswahl; nach dem erneuten Hinzufügen ersetzt die neue Konfiguration die alte Position.
  4. Checkout: Eine Position mit dem Titel „Produkt – Wert, Wert, …“. Aufgeklappt zeigt sie die Bestandteile: das Produkt zum Grundpreis und Konfiguration mit dem Aufpreis. Zahlungsarten, Rabattcodes und andere Shopify-Funktionen bleiben unverändert.
  5. Bestellbestätigung: Die Position mit der Konfiguration im Titel und ihren Bestandteilen – mit Bild der Konfiguration, wenn du Schritt 6 umgesetzt hast.

Die Bestellung im Shopify-Admin

Eine konfigurierte Bestellung zeigt ihre Bestandteile: das Produkt zum Grundpreis und die Position Konfiguration mit dem Aufpreis. Die Auswahl des Käufers steht als Eigenschaften an der Position Konfiguration.

Was die App in deinem Shop anlegt

  • Zwei Entwurfsprodukte „Konfiguration“ (Name in der Hauptsprache deines Shops: Konfiguration, Configuration, Configuración): Sie tragen den Aufpreis im Warenkorb – eines für versandpflichtige, eines für nicht versandpflichtige Produkte. Im Shop sind sie nicht sichtbar. Nicht löschen, veröffentlichen oder umbenennen.
  • Bilder der Konfigurationen (configento-….png) in den Dateien deines Shops. Warenkorb und Checkout zeigen nur Bilder von Shopify selbst, deshalb legt die App jedes Konfigurationsbild dort ab.
  • Metafelder: Configento Component ID an zugeordneten Produkten und Shop-Metafelder für die beiden Aufpreis-Produkte.

Berechtigungen: Die App liest und schreibt Produkte (Zuordnung, Aufpreis-Produkte), Warenkorb-Transformationen (Aufpreis), Entwurfsbestellungen (nur zur Berechnung des Steuersatzes, es entstehen keine Entwürfe) und Dateien (Konfigurationsbilder) und liest die Sprachen deines Shops. Kommt mit einem Update eine Berechtigung hinzu, bestätigst du sie beim nächsten Öffnen der App.

Abrechnung und KI-Tokens

  • Das Abo läuft über Shopify und erscheint auf deiner Shopify-Rechnung. Im Service-Portal steht der Dienst ohne Dienst umstellen und Dienst kündigen – siehe Service-Portal.
  • KI-Tokens: Ein monatliches Kontingent für den KI-Assistenten ist im Abo enthalten. Zusätzliche Tokens kannst du für einen über Shopify gebuchten Dienst nicht kaufen. Mehr zu Tokens: KI-Tokens.

Deinstallieren und neu installieren

Eine Kündigung gibt es in Shopify nicht als eigenen Knopf: Mit der Deinstallation der App endet das Abo, Shopify rechnet nicht weiter ab, und der Dienst im Service-Portal wird beendet.

Bei der Deinstallation entfernt Shopify alles, was der App am Shop gehört – Einbettungen, Warenkorb-Transformation, Shop-Metafelder. Die Zuordnungen an deinen Produkten bleiben stehen.

Nach einer Neuinstallation:

  1. wählst du wieder einen Plan,
  2. verbindest du wieder ein Konto (das kann auch ein anderes sein),
  3. schaltest du Configento Cart im Reiter Theme-Block erneut ein,
  4. prüfst du im Reiter Produkte die Zuordnungen. Hast du ein anderes Konto verbunden, gehören die alten Komponenten-IDs nicht mehr dazu – ordne neu zu.

Fehlersuche

  1. Auf der Produktseite erscheint gar nichts – das Produkt hat keine Komponente zugeordnet, oder der Konfigurator-Block fehlt in der Produktvorlage. Prüfe den Reiter Produkte und im Reiter Theme-Block den Status von Konfigurator-Block. Eine frische Zuordnung braucht wegen des Shopify-Caches einige Minuten.
  2. „Configurator could not be loaded.“ – der Konfigurator konnte nicht starten (die Meldung ist immer englisch). Ursachen: kein aktives Abo, der Shop ist mit keinem Konto verbunden, oder configento.app hat nicht innerhalb von 8 Sekunden geantwortet.
  3. „Komponente konnte nicht geladen werden (HTTP 401)“ – der Shop läuft unter einer eigenen Domain, die nicht freigegeben ist. Siehe Eigene Domain freigeben.
  4. „Komponente konnte nicht geladen werden (HTTP 404)“ oder mit einem anderen Code – die zugeordnete Komponente ist nicht veröffentlicht oder gehört nicht zum verbundenen Konto. Ordne im Reiter Produkte eine veröffentlichte Komponente zu.
  5. Der Button „In den Warenkorb“ bleibt kurz grau – Absicht: Er ist gesperrt, bis der Konfigurator bereit ist, höchstens 20 Sekunden.
  6. Warenkorb zeigt das Produktfoto, kein „Bearbeiten“ – Configento Cart ist im veröffentlichten Theme aus, etwa nach einem Theme-Wechsel. Reiter Theme-Block → Configento Cart aktivieren → speichern.
  7. Checkout oder Bestellung zeigen das Produktfoto – ebenfalls Configento Cart prüfen. Das Bild kommt erst etwa eine halbe Minute nach dem Hinzufügen; wer sofort zur Kasse geht, sieht unter Umständen noch das Produktfoto. Fehlt das Bild dauerhaft, öffne die App und bestätige angefragte Berechtigungen.
  8. Kein Aufpreis im Warenkorb – die Warenkorb-Transformation ist nicht aktiv. Öffne die App im Shopify-Admin; hilft das nicht, wende dich an den Configento-Support. Lösche außerdem keines der beiden Produkte „Konfiguration“.
  9. Preis auf der Produktseite anders als im Shop erwartet – Reiter Preise prüfen: Steueranzeige und Währung beider Seiten, bei gleicher Währung einen manuellen Kurs entfernen.
  10. Bestellbestätigung zeigt das Produktfoto – die Mail-Vorlage ist nicht angepasst (Schritt 6).
  11. „invalid or expired code“ beim Verbinden – der Code ist älter als 24 Stunden, schon benutzt oder vertippt. Generiere im Admin einen neuen.
  12. „shop already linked“ – der Shop ist schon mit einem Konto verbunden. Für ein anderes Konto: App deinstallieren und neu installieren.
  13. „Abo erforderlich“ – kein aktiver Plan. Plan auswählen.
  14. „Diese Sitzung konnte nicht autorisiert werden.“ – lade die Seite neu. Bleibt die Meldung, deinstalliere die App und installiere sie neu.

Nächste Schritte

← Alle Artikel 14 Tage kostenlos testen