Zo voeg je in 2026 een Shopify Buy Button toe aan elke website

Met de Shopify Buy Button kun je productvermeldingen, een ingebouwd winkelwagentje en een veilige checkout toevoegen aan vrijwel elke webpagina, of je site nu gebouwd is met WordPress, Squarespace, Wix of een ander platform dat aangepaste HTML ondersteunt.

Shopify is niet alleen geschikt voor gevestigde e-commercebedrijven. Iedereen die projecten wil monetariseren⁠, of het nu bloggers, kunstenaars, schrijvers, ontwerpers, podcasters of influencers zijn⁠, kan profiteren van online verkopen.

Als je al bezoekers trekt naar een blog, portfolio of persoonlijke website, heeft die aandacht waarde. Maar zonder koopmogelijkheid op de pagina moeten bezoekers je winkel apart zoeken. De Shopify-koopknop haalt die extra stap weg door de checkout te plaatsen waar je publiek al is.

Maar het opzetten van een online winkel kost tijd en het omleiden van webverkeer kan het afrekenproces ingewikkeld maken, wat een negatieve invloed kan hebben op je verkopen. De oplossing? Voeg de Shopify Buy Button aan je website toe.

Wat is een Shopify Buy Button?

Een Shopify Buy Button is een insluitbare koopknop en productkaart waarmee klanten je producten vanaf elke webpagina kunnen kopen, zonder eerst naar een aparte webshop te gaan. Shopify genereert de code waarmee je productdetails, afbeeldingen en een checkoutoptie op je website toont.

Je kunt een Shopify Buy Button maken voor één product of voor een hele collectie producten. Bezoekers zien het product, klikken op de knop en ronden hun aankoop af via de veilige checkout van Shopify.

De Buy Button werkt rechtstreeks samen met je Shopify-admin. Daardoor kun je bestellingen beheren, voorraad bijhouden en klantgegevens op één plek bekijken, ook als je producten op meerdere websites worden getoond.

Je kunt de knop aanpassen aan de stijl van je website, zoals kleuren, lettertype, grootte, indeling en klikgedrag. Zo kun je bijvoorbeeld bepalen of klanten een product eerst aan een winkelwagentje toevoegen, direct naar de checkout gaan of eerst een pop-up met productdetails zien.

Waar gebruik je een Shopify Buy Button?

De Shopify Buy Button is vooral handig op plekken waar bezoekers al interesse tonen. Je brengt het winkelwagentje naar de klant toe, in plaats van de klant naar een aparte winkelpagina te sturen.

Blogposts en contentpagina’s

Een Buy Button in een blogpost maakt de stap van lezen naar kopen kleiner. Schrijf je bijvoorbeeld een artikel over een nieuw product, een handleiding of een cadeau-inspiratiepagina, dan kunnen lezers direct vanuit die content kopen.

Landingspagina’s

Landingspagina’s voor productlanceringen, seizoensacties of advertentiecampagnes werken goed met Buy Buttons. De pagina is al ingericht rond één actie, en de Buy Button geeft bezoekers een directe route naar de checkout.

Partner- en affiliatewebsites

Als influencers, affiliates of mediapartners je producten op hun eigen sites uitlichten, kunnen zij met een Buy Button een werkende koopoptie tonen. Betalingen, bestellingen en afhandeling blijven via je Shopify-admin lopen.

Portfolio’s en persoonlijke websites

Voor makers zoals kunstenaars, ontwerpers, podcasters en muzikanten is een Buy Button een eenvoudige manier om werk te verkopen zonder een aparte webshop te bouwen of bestaande content te verplaatsen.

E-mailcampagnes, nieuwsbrieven en social media

Sommige e-mailtools ondersteunen ingesloten HTML, waardoor je een Buy Button in een campagne kunt gebruiken. Je kunt ook linken naar een pagina met een Buy Button via een direct message, nieuwsbrief of socialmediapost.

Pop-ups en promotionele overlays

Buy Buttons kunnen ook worden gebruikt in pop-ups of promotionele overlays. Dat is handig voor tijdelijke aanbiedingen, uitgelichte producten of acties die verschijnen na scrollen, bij exit intent of na een bepaalde tijd op de pagina.

Tip: Gebruik Buy Buttons vooral op externe websites, blogs en losse contentpagina’s. Op pagina’s die al onderdeel zijn van je Shopify-webshop, kunnen ze overlappen met het bestaande checkoutproces.

De koopknop van Shopify op je website

1. Voeg de Shopify Buy Button toe aan je website
2. Maak een Shopify Buy Button aan voor je website
3. Voeg de embedcode van de Shopify Buy Button toe aan je website

1. Voeg de koopknop van Shopify aan je website toe

Begin met inloggen op je Shopify-winkel. Als je de Buy Button ziet staan onder je verkoopkanalen in het menu aan de linkerkant, kun je doorgaan naar stap 2.

Ga naar stap 2 als je het Buy Button verkoopkanaal al in je winkel ziet staan.

Op desktop

1. Ga naar de pagina van het Buy Button verkoopkanaal in de Shopify App Store (je kunt deze pagina ook bereiken via "Instellingen" > "Bezoek de Shopify App Store" en dan zoeken naar "Buy Button").
2. Klik op "App toevoegen", en vervolgens op "Verkoopkanaal toevoegen" op het volgende scherm.
3. Zet de app vast in je beheerdersmenu voor snelle toegang (optioneel). Als je dat niet doet, kun je de app altijd terugvinden door op ‘Verkoopkanalen’ te klikken en vervolgens ‘Buy Button’ te selecteren uit je geïnstalleerde kanalen.

Op mobiel

1. Open de Shopify-app op je mobiele apparaat en selecteer "Winkel" in het menu onderaan.
2. Naast "Verkoopkanalen" selecteer je "Kanaal toevoegen" (op iPhone) of + (op Android).
3. Selecteer "Buy Button" uit de lijst met opties en tik vervolgens op "Voeg Buy Button toe."

2. Maak een Shopify-koopknop aan voor je website

Als je het Buy Button-verkoopkanaal hebt toegevoegd, ben je klaar om je Shopify-koopknop voor je website te maken. Navigeer naar je Buy Button-pagina door te klikken op "Buy Button" (als je het in je navigatie hebt vastgezet) of door naar "Instellingen" > "Apps en verkoopkanalen" > "Buy Button" te gaan.

Daar klik je op "Maak een Buy Button aan."

Je kunt Buy Buttons maken voor een enkel product of voor een hele collectie producten. Op het volgende scherm word je gevraagd welke optie je wilt kiezen. Klik erop en zoek het product of de collectie die je wilt gebruiken om je Shopify Buy Button aan te maken.

Als je een Buy Button voor een collectie maakt, kun je een volledige productlijn in één embed tonen. Dat is vaak overzichtelijker dan meerdere losse productknoppen op dezelfde pagina.

Zorg ervoor dat het selectievakje is aangevinkt en klik op "Selecteer."

Als je je selectie hebt gemaakt, ga je naar de Buy Button-editor, waar je het uiterlijk van je Shopify Buy Button kunt aanpassen aan de stijl van je website.

Hoe je je Shopify Buy Button kunt aanpassen aan je website

In de Buy Button-editor zie je een aantal opties aan de linkerkant voor het aanpassen van het uiterlijk van je Buy Button. Aan de rechterkant zie je een voorbeeld van hoe je Shopify Buy Button eruit gaat zien op je website.

Pas de opties aan de linkerkant aan naar wens. Je voorbeeld wordt automatisch bijgewerkt, zodat je meteen kunt zien hoe je Shopify Buy Button eruit gaat zien op je website. Je kunt ook zien hoe je Buy Button eruit gaat zien op desktop- en mobiele schermen door op de desktop- of mobiele pictogrammen bovenaan de editor te klikken.

Hier is een overzicht van de opties die je kunt aanpassen:

• Productvariant: Selecteer welke varianten van het product je beschikbaar wilt maken via de Buy Button. Standaard zijn alle varianten geselecteerd.
• Indeling: Kies tussen "Basis", "Klassiek" en "Volledig zicht". Aan de rechterkant zie je een voorbeeld van elke indeling wanneer je deze selecteert uit het keuzemenu "Indeling". Elke indeling bepaalt hoeveel productinformatie naast de knop wordt getoond.
• Actie bij klikken: Kies tussen "Voeg product toe aan winkelwagentje", "Direct naar afrekenen" of "Open productdetails". De optie "Voeg product toe aan winkelwagentje" creëert een winkelwagentje aan de rechterkant van je scherm. Bezoekers kunnen dan verder browsen en meer producten toevoegen voordat ze afrekenen. De optie "Direct naar afrekenen" creëert een knop "Koop nu" die de gebruiker direct naar de afrekenpagina leidt (let op dat klanten met deze optie niet meer dan één item aan hun winkelwagentje kunnen toevoegen). De optie "Open productdetails" creëert een knop "Bekijk product" die een pop-up opent met productinformatie, varianten, afbeeldingen en een knop "Voeg toe aan winkelwagentje".
• Knopstijl: Hier kun je de kleuren, het lettertype, de grootte en de hoekvorm van je Shopify Buy Button aanpassen aan de stijl van je website.
• Indeling: Het menu Indeling stelt je in staat om fijnere aanpassingen aan de indeling van je knop te maken. Je kunt letterkleuren, knoptekst, uitlijning, grootte en typografie-instellingen aanpassen.
• Winkelwagentje: Hier kun je de instellingen van je winkelwagentje-widget aanpassen, inclusief tekst en kleuren. Je kunt ook een veld voor bestelnotities toevoegen om speciale instructies van klanten te verzamelen. Let op dat deze optie grijs is als je de indeling "Direct naar afrekenen" gebruikt, omdat er dan geen winkelwagentje-widget gebruikt wordt.
• Gedetailleerde pop-up: Als je "Open productdetails" selecteert onder "Actie bij klikken", kun je de tekst, kleuren en typografie-opties voor de pop-up in deze sectie aanpassen.
• Geavanceerde instellingen: Hier kun je aanpassen hoe je afrekenproces aan je gebruiker wordt gepresenteerd. Je kunt kiezen voor "Open pop-upvenster" (wat een pop-up afrekenproces creëert dat sluit wanneer de bestelling is voltooid), of "Omleiden in dezelfde tab" (wat de gebruiker naar je Shopify-afrekenpagina stuurt en hen terugbrengt naar je website zodra de transactie is voltooid).

Vergeet niet dat het aanpassen van deze instellingen geen invloed heeft op Shopify Buy Buttons die al in een website zijn geïntegreerd. Wijzigingen gelden alleen voor nieuwe Buy Buttons die je daarna maakt. Wil je een bestaande knop aanpassen, dan moet je nieuwe code genereren en de oude embedcode op je website vervangen.

Wanneer je tevreden bent met je ontwerp, klik je op de "Volgende" knop in de rechterbovenhoek.

3. Voeg de embedcode van de Buy Button toe aan de HTML van je website

Wanneer je op "Volgende," klikt, wordt de embedcode voor je Shopify Buy Button automatisch gegenereerd voor je website. Klik op de "Kopieer code" knop als je deze op een webpagina wilt embedden, of op de "Blijf aanpassen" knop als je terug wilt naar de Buy Button-editor om aanpassingen te maken.

De code die je hier hebt gekopieerd, kan in de HTML van elke webpagina worden geplakt. Het zal een Shopify Buy Button en, afhankelijk van je instellingen, een winkelwagentje creëren die direct verbinding maakt met je Shopify-admin, zodat je bestellingen vanaf elke website daar kunt beheren en verwerken.

Het proces van het toevoegen van de embedcode varieert afhankelijk van hoe je wilt dat de Shopify Buy Button eruitziet en welke websitebouwer en thema’s je gebruikt voor je website. Sommige platforms hebben een apart HTML-blok of code-widget, terwijl andere vereisen dat je rechtstreeks in de broncode van de pagina werkt.

Hieronder vind je de stappen die je moet volgen om een Shopify Buy Button te integreren op je Shopify-winkel website of blog, een Squarespace-website of een WordPress-blog:

Voeg de embedcode toe aan een pagina of blogpost

Je Shopify-website heeft al productpagina's en een winkelwagentje ingebouwd, maar soms zijn er situaties waarin je een Buy Button direct op een pagina of blogpost wilt toevoegen voor extra gemak.

Wanneer je bijvoorbeeld een blogpost schrijft over een nieuw uitgebracht product, wil je misschien lezers een makkelijke manier bieden om direct vanuit de post te kopen, in plaats van ze naar een aparte pagina te sturen.

In dit geval volg je deze stappen:

1. Ten eerste, volg de bovenstaande stappen om de Buy Button embedcode te kopiëren.
2. Vanuit je Shopify-admin, ga naar "Online winkel" > "Blogposts" of "Online winkel" > "Pagina's," afhankelijk van of je het toevoegt aan een blogpost of pagina.
3. Selecteer de blogpost of pagina waaraan je de Buy Button wilt toevoegen.
4. In het "Inhoud" venster, selecteer de "<>" knop om over te schakelen van de bewerkingsweergave naar de HTML-weergave.

5. Plak de embedcode die je eerder hebt gekopieerd in de HTML-editor waar je wilt dat deze verschijnt. Klik op "Opslaan."

Zodra je je pagina of blogpost hebt opgeslagen, wordt je Buy Button aan de pagina toegevoegd. Als je wilt zien hoe het eruitziet zonder te publiceren, selecteer dan "Voorbeeld" (of "Bekijk pagina" als je het aan een pagina toevoegt) in de rechterbovenhoek van de pagina-editor.

Buy Button-script-tags toevoegen

Bij sommige websitebouwers moet je de scripttags afzonderlijk in de header van je website plaatsen. De overige code zet je in de body van de pagina, op de plek waar je de Buy Button wilt weergeven.

Zo doe je dat:

1. Kopieer zowel het <div>- als het <script>-element.
2. Open de header van de pagina waarop je de Buy Button wilt plaatsen.
3. Plak de <script>-code in de header van de pagina.
4. Haal het script-element uit de code en plaats het afzonderlijk in de <div>-code op de pagina waarop je de knop wilt weergeven. De code ziet er ongeveer zo uit:

5. Sla je wijzigingen op en bekijk een voorbeeld van de pagina om te controleren of de Buy Button correct wordt weergegeven.

Tip: Bekijk voor specifieke instructies voor WordPress, Squarespace of Wix de handleiding in het Shopify Helpcentrum over het toevoegen van Buy Button-insluitcode.

Voeg e-commerce toe aan je website met een Shopify Buy Button

Shopify Buy Buttons helpen verkopers om klanten te bereiken op iedere website of platform. Het gemak van direct verkopen aan klanten zonder ze naar een andere pagina te sturen vermindert frictie en kan helpen om de verkoop te verhogen.

Voor winkeleigenaren kan een strategisch geplaatste Buy Button op een blogpagina klanten een makkelijke manier bieden om producten te kopen zonder de pagina te verlaten waarop ze zich bevinden.

Voor bloggers, kunstenaars, schrijvers, ontwerpers, podcasters, influencers en iedereen die geld met zijn of haar passie wil verdienen, bieden Shopify-koopknoppen een eenvoudige manier om gebruik te maken van Shopify's e-commerce platform zonder een hele nieuwe website te bouwen.

Met aanpasbare stijlen, kleuren en functionaliteiten stellen Shopify Buy Buttons je in staat om elke pagina of website om te toveren tot een volwaardige online winkel.

Omdat alle Buy Button-bestellingen terugkomen in je Shopify-admin, heb je geen extra tools nodig om bestellingen, voorraad en klantgegevens op verschillende plekken bij te houden. Dat maakt de Buy Button vooral handig voor ondernemers die al een publiek hebben op bestaande websites en daar direct verkoop aan willen toevoegen.