# Bring Commerce auf die Website, die du schon hast. > Ein asynchrones Script-Tag macht jede Website zum Shop. Funktioniert mit WordPress, Webflow, Ghost, Carrd, Framer, statischem HTML, React / Next.js / Vue. Kein Neubau, kein Plugin, kein Theme-Wechsel. Ein asynchrones Script-Tag, ein paar HTML-Container, und deine bestehende Website wird zum Shop. Funktioniert mit WordPress, Webflow, Ghost, Carrd, Framer, reinem HTML oder jedem CMS, in das du Script-Tags einfügen kannst. Kein Neubau. Kein Plugin. Kein Theme-Wechsel. [Kostenlos testen](https://app-v3.shoprocket.io/signup?lang=de)[Das Snippet ansehen](#the-snippet) 14 Tage kostenlos testen Keine Kreditkarte 0% Plattformgebühren Funktioniert in jedem Tarif 1 Zeile zum Einbetten Jede Website Voll Warenkorb & Kasse 0% Plattformgebühren ● Das Problem ## Du hast eine Website. Du willst darauf verkaufen. Nicht sie neu bauen. Die meisten Commerce-Plattformen wollen, dass du deine jetzige Website gegen ihre tauschst. WordPress verlangt WooCommerce. Wix will Wix Stores. Squarespace will Squarespace Commerce. Shopify will das Ganze auf seinem Stack. Du wolltest einen Shop, kein Migrationsprojekt. 01 ### Deine Website funktioniert schon. Deine Marke, dein Content, dein Blog, deine Animationen, dein SEO. Die Arbeit, die du schon gemacht hast. Nichts davon sollte sich ändern müssen, nur um eine Kasse hinzuzufügen. 02 ### Dein CMS ist nicht das Problem. WordPress ist in Ordnung. Webflow ist schön. Ghost ist perfekt für Inhalte. Carrd ist schnell. Keines davon sollte dich zum Verlassen zwingen, nur weil es Commerce nicht nativ beherrscht. 03 ### Dein Shop sollte in deiner Website leben. Nicht auf einer separaten Subdomain, nicht als Weiterleitung zu einem gehosteten Warenkorb. Die Produktseite gehört dir, die Kasse läuft darin, und der Kunde verlässt sie nie. ● So funktioniert es ## Drei Zeilen HTML. Vier Widget-Typen. Füge das Loader-Script einmal ein. Setze HTML-Container dorthin, wo Commerce erscheinen soll. Das Widget bindet jeden, den es findet, beim Rendern automatisch ein. Die Installation ### Ein Script-Tag. Asynchron. Nicht blockierend. Das Script-Tag kommt in den Head der Website, kurz vor das schließende Body-Tag oder in das Header-Template deines CMS. Es lädt asynchron und blockiert nie das Rendern deiner Seite. Beim Laden durchsucht es die Seite nach jedem HTML-Element mit einem data-shoprocket-Attribut und bindet dort das passende Widget ein. Gibt es auf der Seite keine Widget-Elemente, startet es trotzdem den schwebenden Warenkorb, damit Shop-Buttons an anderer Stelle deiner Website weiter funktionieren. - ✓ Asynchrones Laden, keine Auswirkung auf LCP oder CLS - ✓ Bindet jedes data-shoprocket-Element auf der Seite automatisch ein - ✓ Schwebender Warenkorb startet seitenweit, auch auf Seiten ohne Widgets ● Widget-Typen ## Vier Formen, alle auf derselben Seite. Wähle, was du brauchst, wo du es brauchst. Eine Startseite kann ein Widget für ein Highlight-Produkt haben, eine eigene Shop-Seite ein volles Sortiment und ein Artikel eine Einzelprodukt-Einbettung im Text. Alles auf derselben Website, alles aus demselben Shop. 01 ### Sortiment. Volles Produktraster mit Filtern, Kategorien und Suche. Setze es auf deine /shop-Seite, und Kunden stöbern in deinem ganzen Shop. 02 ### Produkt. Eine einzelne Produktkarte mit Preis, Varianten und In-den-Warenkorb-Button. Setze sie im Text eines Artikels oder auf einer Landingpage neben einen Pitch. 03 ### Warenkorb. Der Warenkorb selbst, als Seiten-Widget. Oder lass den schwebenden Warenkorb seitenweit übernehmen, das Script startet ihn automatisch. 04 ### Kasse. Warenkorb, Adressen, Versand und Bestellübersicht alles in deiner Seite. Der letzte Zahlungsschritt leitet aus PCI-Gründen zum Zahlungsdienstleister weiter und bringt den Kunden zurück auf deine Website. ● Funktioniert dort, wo du bist ## Wenn es ein Script-Tag erlaubt, lässt sich Shoprocket einbetten. Gezielt getestet und dokumentiert für die Baukästen unten. In der Praxis geht es überall, wo du HTML einfügen kannst. 01 ### WordPress. Selbst gehostet oder WordPress.com. Jedes Theme, jeder Page-Builder (Elementor, Gutenberg, Divi usw.). Kein WooCommerce nötig. Kein Plugin zu pflegen. 02 ### Webflow. Nutze das Embed-Element dort, wo der Shop hin soll. Behalte deinen Webflow-CMS-Tarif, kein Ecommerce-Upgrade nötig. 03 ### Ghost. HTML-Karte in jedem Beitrag oder jeder Seite. Ghost ist ideal für Creator, die Inhalte neben Produkten ausliefern. 04 ### Carrd, Framer, Notion. Einseiter und designorientierte Baukästen. Funktioniert mit Carrd-Pro-Standard-Einbettungen, Framer-Code-Komponenten und Notion über die Wrapper Super.so / HeyNotion. 05 ### Statisches HTML & JAMstack. Cloudflare Pages, Netlify, Vercel, reines statisches HTML, jeder Jekyll- / Hugo- / Astro- / 11ty-Build. Snippet einfügen und los. 06 ### React, Next.js, Vue, Svelte. Installiere das npm-Paket \`@shoprocket/widget\` für enge Framework-Integration. Importiere die Komponente, binde sie dort ein, wo der Shop hin soll. ● Performance ## Deine Core Web Vitals bleiben grün. Der ganze Sinn von Commerce, der sich überall einbetten lässt, ist, dass deine Website sich weiter wie deine Website verhält. In Zahlen ### Asynchrones Script, gecachte Konfiguration, schnelles Einbinden. Das Loader-Script wird asynchron ausgeliefert, LCP bleibt also unberührt. Die Shop-Konfiguration wird aus unserer API geholt und an der Edge gecacht (1 Stunde TTL), wiederholte Seitenaufrufe fragen also nicht neu ab. Das Widget rendert in den reservierten Container, es gibt also keinen Layout-Shift. Websites, die vor der Einbettung bei Lighthouse grün waren, bleiben es auch danach. - ✓ Asynchrones Script-Tag: null Auswirkung auf LCP oder CLS - ✓ Shop-Konfiguration an der Edge gecacht, bei wiederholten Aufrufen vom CDN ausgeliefert - ✓ Reservierte Einbinde-Container bedeuten keinen kumulativen Layout-Shift ● Häufige Fragen ## Fragen zur Einbettung, beantwortet. Was Leute fragen, bevor sie das Snippet einfügen. Wo laufen Warenkorb und Kasse eigentlich? + Warenkorb, Adressen und Versandauswahl laufen alle in der Einbettung auf deiner Seite, niemand verlässt deine Website beim Stöbern und Auswählen. Der letzte Zahlungsschritt leitet aus PCI-Gründen zu deinem verbundenen Zahlungsdienstleister (Stripe, PayPal) weiter und bringt den Kunden für die Bestellbestätigung zurück auf deine Website. So funktioniert jeder moderne Zahlungsablauf; etwas anderes vorzugeben wäre unehrlich. Kann ich mehrere Widgets auf derselben Seite haben? + Ja. Der Loader durchsucht die Seite nach jedem Element mit einem data-shoprocket-Attribut und bindet jedes ein. Eine einzelne Seite kann ein Karussell mit Highlight-Produkten, darunter ein Sortimentsraster und irgendwo anders eine eingebettete Kasse haben. Alles aus demselben Shop. Verlangsamt es meine Website? + Keine nennenswerte Auswirkung. Das Loader-Script ist asynchron und blockiert das Rendern deiner Seite nicht. Die Shop-Konfiguration wird an der Edge gecacht, wiederkehrende Besucher fragen also nicht neu ab. Widgets binden sich in reservierte Container ein, es gibt also keinen kumulativen Layout-Shift. Hat deine Website die Core Web Vitals vorher bestanden, besteht sie sie auch danach. Und wenn ich React / Next.js / Vue nutze? + Installiere direkt das npm-Paket \`@shoprocket/widget\`. Importiere die Komponente, binde sie dort ein, wo du den Shop brauchst, und übergib Props zur Konfiguration. Das gibt dir feine Kontrolle, die Script-Tag-Einbettung nicht bietet. Wie sieht es mit Wix und Squarespace aus? + Squarespace funktioniert gut. Nutze das Code-Block-Element im Core-Tarif oder höher, füge das Snippet ein, fertig. Wix kapselt jede Drittanbieter-Einbettung in einem iframe, was die Kasse kaputt macht, deshalb empfehlen wir es nicht; die ehrliche Antwort für Wix-Nutzer ist der gehostete Shoprocket-Shop oder der Wechsel zu einem Baukasten, der echte Einbettungen erlaubt. Siehe unsere eigene Wix-Seite für die drei Wege nach vorn. Kann ich meine eigene Domain nutzen? + Ja. Das Widget läuft auf der Domain, auf der die Host-Seite liegt. Deine Produkte, dein Warenkorb und deine Kasse liegen alle unter your-site.com. Keine separate Shoprocket-Subdomain, keine Weiterleitungen. Kunden merken nicht, dass hinter der Commerce-Schicht ein Drittanbieter steckt. Wie passe ich das Aussehen des Widgets an? + Das Widget erbt das CSS deiner Website für den Layout-Kontext (Container-Breiten, Typografie-Basis). Für die Commerce-Oberfläche selbst wählst du aus 40+ Themes plus helles / dunkles Farbschema über Data-Attribute am Einbinde-Element. Für tiefere Anpassung setzt du CSS-Variablen in der Stylesheet deiner Website, und das Widget übernimmt sie. Was, wenn ich mehrere Einbettungs-Konfigurationen für verschiedene Seiten habe? + Lege im Shoprocket-Dashboard mehrere Einbettungs-Konfigurationen an, jede mit eigener ID, eigenem Theme und eigenem Funktionsumfang. Richte jeden HTML-Container auf die passende Einbettungs-ID aus. Eine Startseite kann eine kompakte Einbettung mit Highlight-Produkten zeigen, während eine eigene Shop-Seite eine volle Sortiments-Einbettung nutzt, alles im selben Shop. Sind es bei Shoprocket wirklich 0% Plattformgebühren? + Ja. Dein Zahlungsdienstleister (Stripe, PayPal usw.) berechnet weiterhin seine übliche Bearbeitungsgebühr, das sind die Kosten fürs Bewegen von Geld, aber Shoprocket schlägt nichts obendrauf. 0% Plattformgebühren gilt für jeden Tarif, auch für jede Installation zum Überall-Einbetten. ## Deine Website. Jetzt mit Commerce. 14 Tage kostenlos testen. Keine Kreditkarte. Snippet einfügen, einen Shop starten, die Website behalten. [Kostenlos testen](https://app-v3.shoprocket.io/signup?lang=de)[Sprich mit uns](https://v3.shoprocket.io/de/kontakt.md) --- - HTML version: https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen - Language: Deutsch (de) - Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)