Docs  /  Integrationen  /  Shopify-Plugin installieren

Shopify-Plugin installieren

Zuletzt aktualisiert: 01. Januar 2026

Mit dem Shopify-Plugin bindest du deinen configento.app Konfigurator direkt in deine Shopify-Produktseiten ein. Kunden konfigurieren ihr Produkt, sehen Preis und Produktbild in Echtzeit und kaufen über den normalen Shopify-Checkout — ohne den Shop zu verlassen. Die Konfiguration erscheint im Warenkorb, im Checkout, in der Bestellung und in der Bestellbestätigung.

Voraussetzungen

  • Shopify-Shop mit einem Online Store 2.0-Theme (z. B. Horizon, Dawn, Sense, Refresh, Origin oder aktuelle Premium-Themes). Legacy-Themes ohne JSON-Templates werden nicht unterstützt.
  • Kein Shopify Plus nötig — das Plugin funktioniert auf allen Shopify-Plänen.
  • Ein configento.app Konto ist keine Voraussetzung: Du kannst es während der Einrichtung direkt anlegen lassen oder ein bestehendes Konto verbinden.

Installation

  1. Im Shopify App Store nach „Configento Configurator" suchen.
  2. App hinzufügen klicken.
  3. Den Berechtigungsbildschirm bestätigen.
  4. Shopify öffnet danach automatisch die App im Shopify-Admin (Embedded Admin).

Überblick: der Embedded Admin

Die App öffnest du jederzeit im Shopify-Admin unter Apps › configento.app. Sie hat vier Reiter:

Reiter Wofür
Einrichtung Abo, Verbindung mit deinem configento.app Konto, Beispielkomponenten
Produkte Welche Shopify-Produkte welchen Konfigurator zeigen
Preise Währung, Steuer und Umrechnung zwischen configento.app und Shopify
Theme-Block Konfigurator und Warenkorb-Erweiterung im Theme aktivieren, Bestellbestätigung anpassen

Die Reiter Produkte, Preise und Theme-Block sind erst nach der Verbindung verfügbar.

Schritt 1 — Plan auswählen

Ohne aktives Abo zeigt der Reiter Einrichtung den Hinweis „Abo erforderlich". Klicke auf „Plan auswählen" und bestätige den Plan in Shopify. Die ersten 14 Tage sind kostenlos. Die Abrechnung läuft über deine Shopify-Rechnung.

Ein monatliches Kontingent für die KI-Funktionen ist im Plan enthalten — es fallen keine weiteren Kosten an.

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 dir eine Einladung per E-Mail, über die du dein Passwort setzt. Das dauert einen Moment; lade die Seite danach neu.

Bestehendes Konto: Klicke auf „Ja — ich habe schon ein Konto" und hole dir einen 6-stelligen Verbindungs-Code:

  1. Das Configento-Serviceportal (service.configento.app) öffnen und anmelden.
  2. Beim Dienst, der mit dem Shop verbunden werden soll, auf „Verwalten" klicken.
  3. Im Admin Einstellungen › Integrationen öffnen.
  4. Zur Karte Shopify scrollen. Wenn du mehrere Configento-Konten hast, das Konto wählen, dem dieser Shop gehören soll, dann „Verbindungs-Code generieren" klicken.
  5. Den Code kopieren, in der App einfügen und „Verbinden" klicken.

Der Code ist 24 Stunden gültig. Nach der Verbindung zeigt der Reiter Einrichtung ✓ und den verbundenen Account.

Hinweis: Ein Shopify-Shop ist mit genau einem configento.app Konto verbunden. Soll der Shop später zu einem anderen Konto gehören, deinstalliere die App und installiere sie neu.

Schritt 3 — Beispielkomponenten (optional)

Ist dein Konto noch leer, bietet die App an, vier Beispielkomponenten anzulegen. Sie zeigen ein kombiniertes Produktbild, Kombinationsmerkmale mit Formeln, ein Regelwerk und grafische Icons. Du kannst sie wie jede andere Komponente bearbeiten, veröffentlichen oder löschen. Die Beispiele werden automatisch veröffentlicht; das dauert einen Moment.

Eigene Komponenten legst du im configento.app Admin an (admin.configento.app). Einem Produkt zuordnen kannst du nur veröffentlichte Komponenten.

Schritt 4 — Produkte zuordnen

Im Reiter Produkte:

  1. Unter „Produkt hinzufügen" nach dem Produktnamen suchen.
  2. Die gewünschte Komponente auswählen und mit + hinzufügen.
  3. Das Produkt erscheint oben unter „Produkte mit Konfigurator". Dort kannst du die Komponente wechseln oder die Zuordnung mit − entfernen.

Änderungen werden sofort gespeichert. Shopify hält Shop-Seiten einige Minuten im Cache — eine neue Zuordnung ist deshalb unter Umständen erst nach kurzer Zeit auf der Produktseite sichtbar.

Alternative: Die Zuordnung ist ein Produkt-Metafeld und lässt sich auch direkt am Produkt im Shopify-Admin setzen: Namespace configento, Key component_id, Typ single_line_text_field, Wert = Komponenten-ID (z. B. 10244).

Schritt 5 — Theme einrichten

Im Reiter Theme-Block aktivierst du zwei Dinge — einmalig pro Theme. Der Reiter zeigt für beide, ob sie im veröffentlichten Theme aktiv sind, und warnt, wenn etwas fehlt.

Konfigurator-Block

  1. „Konfigurator-Block einbauen" klicken. Shopify öffnet den Theme-Editor mit der Produktseiten-Vorlage und fügt den Block Configento Configurator hinzu.
  2. Shopify setzt neue Blöcke ans Ende. Mit der Einstellung „Konfigurator automatisch über dem Preis platzieren" (Standard: an) springt der Konfigurator beim Laden trotzdem direkt vor den Preis. Alternativ den Block per Drag-and-Drop über den Button „In den Warenkorb" ziehen.
  3. Speichern.

Block-Einstellungen 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 leer Automatische Erkennung für die meisten Themes; nur bei eigenwilligen Themes ausfüllen
CSS-Selector der Produktbild-Galerie leer Automatische Erkennung; das kombinierte Produktbild ersetzt dort das Produktfoto, solange der Konfigurator Bildebenen liefert
Konfigurator automatisch über dem Preis platzieren an Schiebt den Block beim Laden vor das Preis-Element
Zusammenfassung der Konfiguration anzeigen aus Blendet eine Textzusammenfassung der Auswahl unter dem Konfigurator ein
Lade-Text leer Automatische Sprachwahl (DE/EN/ES/FR), bei Bedarf überschreibbar

Warenkorb-Erweiterung „Configento Cart"

Die Warenkorb-Erweiterung 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 „Bearbeiten"-Link.

App-Einbettungen sind in Shopify ausgeschaltet, bis du sie einschaltest — eine App kann das nicht für dich tun. So geht's:

  1. „Configento Cart aktivieren" klicken. Shopify öffnet den Theme-Editor mit bereits eingeschalteter Einbettung.
  2. Speichern.

Wichtig: Der Schalter gilt pro Theme. Nach einem Theme-Wechsel oder einer Neuinstallation der App musst du ihn im neuen Theme erneut setzen.

Ohne die Warenkorb-Erweiterung funktioniert der Kauf vollständig — Preis, Konfiguration und Checkout sind korrekt. Nur zeigt der Warenkorb deines Themes dann das normale Produktfoto und keinen Bearbeiten-Link.

Schritt 6 — Bestellbestätigung (optional)

Die Bestellbestätigung per E-Mail enthält die Konfiguration automatisch (siehe unten). Das Produktbild in der Mail kommt allerdings aus der Mail-Vorlage deines Shops, und Apps können diese Vorlage nicht ändern. Damit statt des Produktfotos das Bild der Konfiguration erscheint, passt du die Vorlage einmalig an. Der Reiter Theme-Block führt dich durch diese Schritte und bietet dir die Textbausteine zum Kopieren an:

  1. „Bestellbestätigung bearbeiten" öffnet den Code der Vorlage (im Shopify-Admin: Einstellungen › Benachrichtigungen › Kundenbenachrichtigungen › Bestellbestätigung › Code bearbeiten).
  2. Im Code (Strg+F / Cmd+F) nach dieser Zeile suchen: {% if parent_line_item and parent_line_item.image %}
  3. Jedes Vorkommen dieser Zeile durch den folgenden Block ersetzen (auch im Reiter Theme-Block zum Kopieren). 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. Die Vorlage speichern.

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 Bild eines Bundles ausgegeben wird.

Preise, Währung und Steuern

Den Reiter Preise musst du normalerweise nicht anfassen — die App liest Währung und Steueranzeige deines Shops live aus Shopify und rechnet automatisch um:

  • Steuer: Zeigt dein Shop Preise ohne Steuer (z. B. „Steuern werden an der Kasse berechnet"), rechnet die App Brutto-Preise aus configento.app in Netto-Preise um; Shopify schlägt die Steuer an der Kasse auf. Zeigt dein Shop Preise inklusive Steuer, verwendet die App den Steuersatz, den Shopify für das Produkt berechnet.
  • Währung: Nutzen configento.app und dein Shop dieselbe Währung, wird nichts umgerechnet. Bei unterschiedlichen Währungen verwendet die App den Wechselkurs aus Shopify Markets.
  • Manueller Kurs: Nur nötig, wenn Shopify keinen Kurs liefert. Ein eingetragener Kurs wird bei gleicher Währung ignoriert — der Reiter weist dann darauf hin; mit „Manuellen Wert entfernen" löschst du ihn.

Der Preis auf der Produktseite, im Warenkorb und an der Kasse ist dadurch immer derselbe.

Was der Käufer sieht

  1. Produktseite: Der Konfigurator lädt automatisch. Preis und — sofern die Komponente Bildebenen hat — das kombinierte Produktbild in der Galerie aktualisieren sich bei jeder Auswahl.
  2. In den Warenkorb: Die Konfiguration wird gespeichert, das Bild der Konfiguration wird für Warenkorb, Checkout und Bestellung bereitgestellt. Das dauert wenige Sekunden.
  3. Warenkorb: Die Position zeigt das Bild der Konfiguration, die Auswahl und einen „Bearbeiten"-Link zurück zur Produktseite (mit Warenkorb-Erweiterung, siehe Schritt 5).
  4. Checkout: Eine Position mit dem Titel „Produkt – Auswahl, Auswahl, …" und dem Bild der Konfiguration. Aufgeklappt zeigt sie die Bestandteile: das Produkt zum Grundpreis und „Konfiguration" mit dem Aufpreis. Alle Zahlungsarten, Rabattcodes und Shopify-Funktionen stehen unverändert zur Verfügung.
  5. Bestellbestätigung: Eine Position mit der Konfiguration im Titel, dem Gesamtpreis und den Bestandteilen — mit Konfigurationsbild, wenn du Schritt 6 umgesetzt hast.

Die Bestellung im Shopify-Admin

Shopify zeigt eine konfigurierte Bestellung mit ihren Bestandteilen: das Produkt zum Grundpreis und die Position „Konfiguration" mit dem Aufpreis. Die vollständige Auswahl des Käufers steht als Eigenschaften an der Position „Konfiguration" (z. B. „Welches Modell?: Linea • Welches Glas?: Klarglas"), beide Positionen verweisen per „Teil von" auf den Titel mit der Konfiguration.

Was die App in deinem Shop anlegt

  • Zwei Entwurfsprodukte „Konfiguration" (Name je nach Shop-Sprache): Sie tragen den Aufpreis der Konfiguration im Warenkorb — eines für versendete, eines für nicht versendete Produkte, damit ein konfiguriertes Produkt in Bestellung und Mail eine einzige Position bleibt. Sie sind nicht im Shop sichtbar. Nicht löschen, veröffentlichen oder umbenennen — fehlen sie, legt die App sie automatisch neu an.
  • Bilder der Konfigurationen (configento-….png) in den Dateien deines Shops. Shopify zeigt in Warenkorb und Checkout nur Bilder aus dem eigenen CDN; deshalb legt die App jedes Konfigurationsbild dort ab.
  • Metafelder: configento.component_id an Produkten (Zuordnung) und Shop-Metafelder für die Aufpreis-Produkte.

Berechtigungen: Die App liest und schreibt Produkte (Zuordnung, Aufpreis-Produkte), Entwurfsbestellungen (Steuersatz-Berechnung), Warenkorb-Transformationen (Aufpreis) und Dateien (Konfigurationsbilder) und liest die Sprachen deines Shops. Kommt mit einem Update eine neue Berechtigung hinzu, bestätigst du sie beim nächsten Öffnen der App.

Mehrsprachigkeit

Das Plugin unterstützt Deutsch, Englisch, Spanisch und Französisch. Der Konfigurator im Shop folgt automatisch der Sprache des Shopify-Shops (Shopify Markets / Sprachauswahl); andere Sprachen fallen auf Englisch zurück. Der Embedded Admin folgt der Sprache deines Shopify-Admins.

Fehlerbehebung

Konfigurator wird nicht angezeigt:

Symptom Ursache Lösung
Bereich komplett leer Konfigurator-Block nicht im Theme Reiter Theme-Block → „Konfigurator-Block einbauen"
Lade-Text bleibt stehen Produkt keiner veröffentlichten Komponente zugeordnet Reiter Produkte → Komponente zuordnen
Neue Zuordnung noch nicht sichtbar Shopify-Seitencache Einige Minuten warten, Seite neu laden
Fehlermeldung nach 8 Sekunden configento.app Cloud nicht erreichbar status.configento.app prüfen

Warenkorb und Checkout:

Symptom Ursache Lösung
Warenkorb zeigt Produktfoto statt Konfiguration, kein „Bearbeiten"-Link Warenkorb-Erweiterung im aktiven Theme aus (z. B. nach Theme-Wechsel) Reiter Theme-Block → „Configento Cart aktivieren" → speichern
Kein Aufschlag im Warenkorb Warenkorb-Transformation nicht aktiv App im Shopify-Admin neu öffnen (aktiviert sie erneut)
Preisunterschied Produktseite vs. Warenkorb Währung/Steuer Reiter Preise prüfen; manuellen Kurs bei gleicher Währung entfernen
Konfigurationsbild fehlt im Warenkorb/Checkout Neue Berechtigung „Dateien" noch nicht bestätigt App öffnen und die angefragten Berechtigungen bestätigen

Bestellbestätigung:

Symptom Ursache Lösung
Produktfoto statt Konfigurationsbild Mail-Vorlage nicht angepasst Schritt 6
Zeile zum Ersetzen nicht gefunden Vorlage wurde angepasst Entwickler oder Configento-Support

Verbindung schlägt fehl:

Symptom Ursache Lösung
Code ungültig oder abgelaufen Code älter als 24 Stunden oder vertippt Im Serviceportal einen neuen Code generieren
Shop bereits verbunden Der Shop ist schon mit einem anderen Konto verbunden App deinstallieren und neu installieren
„Abo erforderlich" Kein aktiver Plan Reiter Einrichtung → „Plan auswählen"

Nächste Schritte

← Alle Artikel 14 Tage kostenlos testen