Manuelle Installation

Dieses Tag ist die ganze Integration. Ersetze den Schlüssel durch deinen, füge es einmal ein und ändere sonst nichts: kein zusätzliches Attribut an deinen Produkten, kein eigener Button, keine Produkt-ID.


<script
  src="https://www.cabina.io/widget.iife.js"
  crossorigin="anonymous"
  async
  data-api-key="cab_live_DEIN_SCHLUESSEL">
</script>

Füge kein integrity-Attribut hinzu. Die Bundle-Adresse ist nicht versioniert: ein festgeschriebener Hash würde den Browser das Skript bei unserem nächsten Release ablehnen lassen — lautlos, und ohne dass wir dich warnen könnten.

Setz es irgendwo in <head> oder direkt vor </body>. Beides funktioniert: das Skript ist async und wartet selbst auf die Seite.

Wo es hingehört, Plattform für Plattform

Shopify

Themes

Geh in deiner Shopify-Verwaltung auf Onlineshop → Themes.

Code bearbeiten

Öffne beim aktiven Theme das Menü ⋯ und wähle Code bearbeiten.

theme.liquid

Öffne layout/theme.liquid.

Einfügen

Füge das Tag direkt vor dem schließenden </head>-Tag ein.

Speichern

Speichern. Die Änderung ist sofort aktiv — es gibt kein Theme zu veröffentlichen.

Shopify gibt auf jeder Produktseite ein Open-Graph-Bild aus, das Kleidungsstück wird also ohne weiteres Zutun gefunden.

WooCommerce

Für WooCommerce gibt es ein Plugin: es übernimmt die Arbeit des Tags und überlebt Theme-Wechsel.

Plugin herunterladen

Lade cabina-woocommerce.zip herunter. Es braucht WordPress 6.5 oder neuer, mit aktivem WooCommerce.

Hochladen

Gehe in WordPress auf Plugins → Installieren → Plugin hochladen, wähle die Datei, klicke auf Jetzt installieren und dann auf Aktivieren.

Konfigurieren

Gehe auf Einstellungen → Cabina und füge deinen Schlüssel cab_live_… ein: du findest ihn im Cabina-Dashboard auf der Seite Installation, Tab WooCommerce.

Fertig

Der Button erscheint auf den Produktseiten. Nichts ins Theme einzufügen.

Alternativ kommt das Tag ins Theme:

Ein Snippet-Plugin

Installiere in WordPress ein Code-Snippet-Plugin (WPCode, Code Snippets) — oder nutze dein Child-Theme.

Snippet anlegen

Lege ein Snippet an, das im Site-Header läuft, und füge dort das Tag ein.

Oder das Child-Theme

Mit einem Child-Theme: in functions.php am wp_head-Hook einhängen.

Prüfen

Speichern und eine Produktseite öffnen.

WooCommerce gibt kein og:image aus, solange kein SEO-Plugin aktiv ist. Cabina weicht dann auf das Galeriebild aus — siehe Das Bild des Kleidungsstücks.

Wix

Bei Wix wird kein Tag eingefügt: Die App steht im Wix App Market, und das ist der einzige Weg.

App Market

Öffne in deinem Wix-Dashboard den App Market und such nach «Cabina».

Hinzufügen

Füge die App hinzu und autorisiere die Website: Der API-Schlüssel wird automatisch eingerichtet, du kopierst nichts.

Veröffentlichen

Veröffentliche die Website: Bei Wix ist nichts live, bevor du veröffentlichst. Der Button erscheint auf den Produktseiten von Wix Stores, platziert von der App.

PrestaShop

Für PrestaShop gibt es ein Modul: Es übernimmt die Arbeit des Tags und überlebt einen Theme-Wechsel.

Modul herunterladen

Lade cabina.zip herunter. Es läuft auf PrestaShop 8 und 9.

Hochladen

Geh im Back-Office auf Module, klick auf Modul hochladen und zieh die Datei hinein.

Konfigurieren

Klick auf Konfigurieren und füge deinen Schlüssel cab_live_… ein: Du findest ihn im Cabina-Dashboard auf der Seite Installation, Tab PrestaShop.

Fertig

Der Button erscheint auf deinen Produktseiten. Nichts ins Theme einzufügen, kein Cache zu leeren.

Wenn du lieber kein Modul installierst, kommt das Tag ins Theme:

Theme & Logo

Geh auf Design → Theme & Logo und öffne die Theme-Dateien (oder nutze FTP).

head.tpl

Öffne templates/_partials/head.tpl in deinem aktiven Theme.

Einfügen

Füge das Tag vor dem schließenden {/block} des head-Blocks ein.

Cache leeren

Speichern, dann den Cache unter Erweiterte Parameter → Leistung leeren.

Jedes andere Theme

Vorlage finden

Finde die Vorlage, die den <head> jeder Seite erzeugt — der Dateiname ändert sich je nach Plattform.

Einfügen

Füge das Tag irgendwo in <head> ein, oder direkt vor </body>.

Nur einmal

Füge es nur einmal ein. Eine zweite Kopie stoppt sich selbst und warnt in der Konsole, aber sie gehört trotzdem entfernt.

Neu laden

Lade eine Produktseite neu.

Cabina braucht keine Vorlagenvariable, keine Produkt-ID und kein zusätzliches Markup. Ein <script>-Tag ist die ganze Integration.

Woran du erkennst, dass es geklappt hat

Öffne eine Produktseite. Cabina findet deinen Kaufblock und setzt seinen Button direkt darunter — du schreibst dafür kein Markup.

Eine Produktseite: der Cabina-Button sitzt direkt unter dem Button „In den Warenkorb".

Der Button übernimmt Text und Farbe aus deinen Dashboard-Einstellungen und erbt die Schrift deines Themes.

Kein Button? Öffne die Browser-Konsole — Cabina sagt in einer Zeile, warum. Weiter zur Fehlerbehebung.

Den Button verschieben

Cabina sucht den Kaufblock über die Liste unten, der Reihe nach, und fügt seinen Button direkt nach dem ersten Treffer ein.

Ankerpunkt	Typische Plattform
`.product-form__buttons`	Shopify
`form[action*="/cart/add"] .product-form__submit`	Shopify
`form[action*="/cart/add"]`	Shopify
`form.cart`	WooCommerce
`.single_add_to_cart_button`	WooCommerce
`.product-add-to-cart`	PrestaShop
`#add-to-cart-or-refresh`	PrestaShop

Bei einem individuellen Theme passt meist keiner davon. Dann wird der Button ans Seitenende gehängt — unter den Footer, außer Sicht. Kaputt ist nichts; er steht nur an der falschen Stelle.

Ein Theme, das Cabina nicht erkennt: der Button ist ganz unten auf der Seite gelandet, unter dem Footer.

Die Abhilfe ist ein leeres Element in deiner Produktvorlage, genau dort, wo du den Button haben willst:


<div data-cabina-target></div>

Dieses Attribut schlägt jeden Ankerpunkt von oben, und der Button wird innerhalb des Elements platziert, nicht daneben.

Dasselbe Theme nach dem Hinzufügen von data-cabina-target: der Button steht wieder unter „In den Warenkorb".

Das Bild des Kleidungsstücks

Cabina liest das Kleidungsstück direkt von deiner Produktseite. Es versucht der Reihe nach: og:image, dann twitter:image, dann das erste Bild, das auf einen dieser Selektoren passt:

Galerie-Selektor	Typische Plattform
`.woocommerce-product-gallery__image img`	WooCommerce
`img.wp-post-image`	WooCommerce
`.wp-block-woocommerce-product-image img`	WooCommerce
`.product__image img`	Shopify
`.product-image img`	Shopify
`.product-photo img`	Shopify
`.product-single__photo img`	Shopify
`[data-product-image] img`	Shopify
`.product-featured-image img`	Shopify
`.product-gallery img`	Shopify
`.product-img img`	Shopify
`.product__media img`	Shopify
`.main-product-image img`	Shopify

Findet keiner der drei ein Bild, erscheint der Button trotzdem und die Anprobe scheitert mittendrin. Es ist die eine Störung, die deine Kundschaft vor dir bemerkt.

Die allgemeine Abhilfe, auf jeder Plattform gültig, ist ein Open-Graph-Bild in deiner Produktvorlage:


<meta property="og:image" content="https://dein-shop.de/bilder/produkt.jpg">

Es lohnt sich ohnehin: dasselbe Tag nutzen Facebook, WhatsApp und Slack für die Vorschau deiner Produktlinks.

Was deine Kundschaft sieht

Die Cabina-Umkleidekabine offen über einer Produktseite: sie fragt nach einem Foto oder einem fertigen Modell.

Nichts verlässt das Gerät, bevor die Einwilligung angehakt ist, und die fertigen Modelle brauchen überhaupt kein Foto.

Der Button-Text ist deiner, im Dashboard gewählt: er ist keine Übersetzung von Cabina. Die Oberfläche der Umkleidekabine folgt dagegen sehr wohl der Sprache der Seite.

Für KI-Agenten

Derselbe Vertrag, für eine Maschine geschrieben und als reines Markdown ausgeliefert — ohne Screenshots, dafür mit Entscheidungsbaum und den Befehlen, um eine Installation vom Terminal aus zu prüfen: cabina.io/en/docs/agent.md .