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
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
Benutzerdefinierter Code
Geh in deinem Wix-Dashboard auf Einstellungen → Benutzerdefinierter Code.
Hinzufügen
Klick auf Benutzerdefinierten Code hinzufügen, füge das Tag ein und nenne es „Cabina”.
Wohin
Unter „Code zu Seiten hinzufügen” wähle Alle Seiten, und platziere es im Head.
Veröffentlichen
Übernehmen, dann die Website veröffentlichen: bei Wix ist nichts live, bevor du veröffentlichst.
Wix baut Produktseiten aus einer eigenen Vorlage: landet der Button unten auf der
Seite, nimm data-cabina-target (siehe unten).
PrestaShop
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.
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.
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.
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
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 .