# Voeg commerce toe aan de site die je al hebt. > Eén async scripttag maakt van elke site een winkel. Werkt op WordPress, Webflow, Ghost, Carrd, Framer, statische HTML, React / Next.js / Vue. Geen herbouw, geen plugin, geen themawissel. Eén async scripttag, een paar HTML-containers en je bestaande site wordt een winkel. Werkt op WordPress, Webflow, Ghost, Carrd, Framer, gewone HTML of elk cms waarin je scripttags kunt plakken. Geen herbouw. Geen plugin. Geen themawissel. [Start gratis proefperiode](https://app-v3.shoprocket.io/signup?lang=nl)[Bekijk het snippet](#the-snippet) 14 dagen gratis proberen Geen creditcard nodig 0% platformkosten Werkt in elk abonnement 1 Regel om in te sluiten Elke Website Volledig Mandje & kassa 0% Platformkosten ● Het probleem ## Je hebt een site. Je wilt erop verkopen. Niet hem opnieuw bouwen. De meeste commerceplatforms willen dat je je huidige site inruilt voor die van hen. WordPress vraagt om WooCommerce. Wix wil Wix Stores. Squarespace wil Squarespace Commerce. Shopify wil alles op hun stack. Jij wilde een winkel, geen migratieproject. 01 ### Je site werkt al. Je merk, content, blog, animaties, SEO. Het werk dat je al hebt gedaan. Niets daarvan hoeft te veranderen om een kassa toe te voegen. 02 ### Je cms is het probleem niet. WordPress is prima. Webflow is prachtig. Ghost is perfect voor content. Carrd is snel. Geen van allen zou je moeten dwingen weg te gaan omdat ze commerce niet standaard aankunnen. 03 ### Je winkel hoort in je site te leven. Niet op een apart subdomein, niet als doorverwijzing naar een gehost mandje. De productpagina is van jou, het afrekenen gebeurt erin en de klant verlaat de pagina nooit. ● Hoe het werkt ## Drie regels HTML. Vier widgettypes. Plak het loaderscript één keer. Zet HTML-containers neer waar je commerce wilt laten verschijnen. De widget koppelt zichzelf automatisch aan elke container die hij bij het renderen vindt. De installatie ### Eén scripttag. Async. Niet blokkerend. De scripttag komt in de head van de site, vlak voor de afsluitende body-tag of in de headersjabloon van je cms. Hij laadt async en houdt je pagina dus nooit op bij het renderen. Bij het laden zoekt hij op de pagina elk HTML-element met een data-shoprocket-attribuut en koppelt daar de bijpassende widget aan. Staan er geen widgetelementen op de pagina, dan start hij toch het zwevende mandje, zodat winkelknoppen elders op je site blijven werken. - ✓ Async laden, geen invloed op LCP of CLS - ✓ Koppelt automatisch elk data-shoprocket-element op de pagina - ✓ Zwevend mandje start sitebreed, ook op pagina's zonder widgets ● Widgettypes ## Vier vormen, allemaal op dezelfde pagina. Kies wat je nodig hebt waar je het nodig hebt. Een homepage kan een widget met een uitgelicht product hebben, een eigen winkelpagina een volledige catalogus en een artikel een inline embed van één product. Allemaal op dezelfde site, allemaal uit dezelfde winkel. 01 ### Catalogus. Een volledig productraster met filters, categorieën en zoeken. Zet het op je /shop-pagina en klanten bladeren door je hele winkel. 02 ### Product. Eén productkaart met prijs, varianten en een knop voor in het mandje. Zet hem inline in een artikel of op een landingspagina naast je verhaal. 03 ### Mandje. Het mandje zelf, als paginawidget. Of laat het zwevende mandje het sitebreed afhandelen, het script start dat automatisch. 04 ### Kassa. Mandje, adressen, verzending en besteloverzicht, allemaal in je pagina. De laatste betaalstap verwijst door naar de verwerker voor PCI-conformiteit en brengt de klant terug naar je site. ● Werkt waar je woont ## Als er een scripttag in kan, sluit Shoprocket in. Specifiek getest en gedocumenteerd voor de onderstaande builders. In de praktijk werkt het overal waar je HTML kunt plakken. 01 ### WordPress. Zelf gehost of WordPress.com. Elk thema, elke paginabuilder (Elementor, Gutenberg, Divi enzovoort). Geen WooCommerce nodig. Geen plugin om te onderhouden. 02 ### Webflow. Gebruik het Embed-element waar je de winkel wilt. Houd je Webflow CMS-abonnement, geen Ecommerce-upgrade nodig. 03 ### Ghost. HTML-kaart in elke post of pagina. Ghost is ideaal voor makers die content naast producten uitbrengen. 04 ### Carrd, Framer, Notion. Builders voor één pagina en design-first. Werkt met Carrd Pro Standard-embeds, Framer-codecomponenten en Notion via Super.so / HeyNotion-wrappers. 05 ### Statische HTML & JAMstack. Cloudflare Pages, Netlify, Vercel, gewone statische HTML, elke Jekyll- / Hugo- / Astro- / 11ty-build. Plak het snippet en ga. 06 ### React, Next.js, Vue, Svelte. Installeer het npm-pakket \`@shoprocket/widget\` voor een nauwe frameworkintegratie. Importeer de component en koppel hem waar je de winkel wilt. ● Prestaties ## Je Core Web Vitals blijven groen. Het hele punt van commerce die je overal kunt insluiten is dat je site zich blijft gedragen als je site. In cijfers ### Async script, gecachte configuratie, snelle koppeling. Het loaderscript wordt async geleverd, dus LCP blijft onaangetast. De winkelconfiguratie wordt opgehaald uit onze API en aan de edge gecachet (1 uur TTL), zodat herhaalde paginaweergaven niet opnieuw opvragen. De widget rendert in de gereserveerde container, dus er is geen layoutverschuiving. Sites die voor de embed groen scoorden op Lighthouse, blijven groen. - ✓ Async scripttag: geen invloed op LCP of CLS - ✓ Winkelconfiguratie gecachet aan de edge, bij herhaalde weergaven geleverd vanaf het CDN - ✓ Gereserveerde koppelcontainers betekenen geen cumulatieve layoutverschuiving ● Veelgestelde vragen ## Vragen over embedden, beantwoord. Wat mensen vragen voordat ze het snippet plakken. Waar draaien het mandje en de kassa eigenlijk? + Mandje, adressen en verzendkeuze draaien allemaal in de embed op je pagina, niemand verlaat je site tijdens het bladeren en kiezen. De laatste betaalstap verwijst door naar je gekoppelde betalingsverwerker (Stripe, PayPal) voor PCI-conformiteit en brengt de klant terug naar je site voor de orderbevestiging. Zo werkt elke moderne betaalflow; anders doen alsof zou oneerlijk zijn. Kan ik meerdere widgets op dezelfde pagina hebben? + Ja. De loader doorzoekt de pagina op elk element met een data-shoprocket-attribuut en koppelt er elk aan. Eén pagina kan een carrousel met uitgelichte producten hebben, daaronder een catalogusraster en ergens anders een inline kassa. Allemaal uit dezelfde winkel. Maakt het mijn site trager? + Geen noemenswaardige invloed. Het loaderscript is async en houdt het renderen van je pagina dus niet op. De winkelconfiguratie wordt aan de edge gecachet, dus terugkerende bezoekers vragen niet opnieuw op. Widgets worden in gereserveerde containers gekoppeld, dus er is geen cumulatieve layoutverschuiving. Haalde je site Core Web Vitals voorheen, dan haalt hij ze nog steeds. Wat als ik React / Next.js / Vue gebruik? + Installeer direct het npm-pakket \`@shoprocket/widget\`. Importeer de component, koppel hem waar je de winkel nodig hebt en geef props mee voor de configuratie. Dat geeft fijnmazige controle die embedden met een scripttag niet biedt. Hoe zit het met Wix en Squarespace? + Squarespace werkt prima. Gebruik het Code Block-element in het Core-abonnement of hoger, plak het snippet en klaar. Wix zet elke embed van derden in een iframe in een sandbox, wat het afrekenen kapotmaakt, dus we raden het niet aan; het eerlijke antwoord voor Wix-gebruikers is de gehoste winkel van Shoprocket of overstappen naar een builder die echte embeds toestaat. Zie onze aparte Wix-pagina voor de drie wegen vooruit. Kan ik mijn eigen domein gebruiken? + Ja. De widget draait op het domein waarop de hostpagina staat. Je producten, mandje en kassa leven allemaal op je-site.nl. Geen apart Shoprocket-subdomein, geen doorverwijzingen. Klanten merken niet dat er een derde partij achter de commercelaag zit. Hoe pas ik het uiterlijk van de widget aan? + De widget erft de CSS van je site voor de lay-outcontext (containerbreedtes, typografische basis). Voor de commerce-UI zelf kies je uit meer dan 40 thema's plus een licht / donker kleurenschema via data-attributen op het koppelelement. Voor diepere aanpassing stel je CSS-variabelen in in de stylesheet van je site en de widget pakt ze op. Wat als ik meerdere embedconfiguraties voor verschillende pagina's heb? + Maak meerdere embedconfiguraties in je Shoprocket-dashboard, elk met een eigen ID, thema en functieset. Laat elke HTML-container naar de juiste embed-ID wijzen. Een homepage kan een compacte embed met uitgelichte producten tonen, terwijl een eigen winkelpagina een volledige catalogusembed gebruikt, allemaal uit dezelfde winkel. Heeft Shoprocket echt 0% platformkosten? + Ja. Je betalingsverwerker (Stripe, PayPal enzovoort) rekent nog steeds zijn standaard verwerkingskosten, dat zijn de kosten van het verplaatsen van geld, maar Shoprocket voegt daar niets aan toe. 0% platformkosten geldt voor elk abonnement, inclusief elke installatie van de embed-overal. ## Jouw site. Nu met commerce. 14 dagen gratis proberen. Geen creditcard. Plak het snippet, lanceer een winkel, houd de site. [Start gratis proefperiode](https://app-v3.shoprocket.io/signup?lang=nl)[Praat met ons](https://v3.shoprocket.io/nl/contact.md) --- - HTML version: https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website - Language: Nederlands (nl) - Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.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), [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)