Hoe voeg ik de Shopify Buy Button toe aan mijn website?

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!

Met de Shopify Buy Button kun je iedere website in een online winkel veranderen, of deze nu gebouwd is met Wordpress, Squarespace, Wix, of welk ander platform dan ook.

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

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!

Begin met de Shopify Buy Button in drie stappen

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 Shopify Buy Button toe aan je website

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.

Na het vernieuwen van de pagina, zou je de Shopify Buy Button moeten zien staan onder "Verkoopkanalen" in het menu aan de linkerkant van de website. Zorg ervoor dat je het kanaal vastzet in je navigatie voor snellere toegang in de toekomst.

Alt text: Geanimeerde gif die laat zien hoe het Buy Button verkoopkanaal wordt vastgezet in Shopify Admin 

Als je de Shopify Buy Button niet vastzet, kun je het opnieuw vinden door te klikken op "Verkoopkanalen" en vervolgens "Buy Button" onder 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 Buy Button aan voor je website

Als je het Buy Button verkoopkanaal hebt toegevoegd, ben je klaar om je Shopify Buy Button 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.

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".
• 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. 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 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 en typografie-instellingen aanpassen.
• Winkelwagentje: Hier kun je de instellingen van je winkelwagentje-widget aanpassen, inclusief tekst en kleuren. 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. Neem de tijd en zorg ervoor dat de Buy Button naar wens is opgemaakt voordat je doorgaat naar de volgende stap.

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 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.

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 embedcode toe aan een website of blogpost op je Shopify-winkel

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.

Voeg een Buy Button toe aan een Squarespace-website

Op Squarespace kun je je Shopify Buy Button toevoegen aan individuele berichten of aan menu's op de homepage van je website. Om een Shopify Buy Button toe te voegen aan een Squarespace-website:

1. Volg je eerst de bovenstaande stappen om de Buy Button embedcode te kopiëren.
2. Log in op je Squarespace-dashboard en open de pagina waar je een Buy Button wilt toevoegen.
3. Beweeg de muis over het "Pagina-inhoud" gebied van het pagina-element waar je de Buy Button wilt laten verschijnen en klik op "Bewerken."
4. Selecteer het invoegpunt waar je de embedcode wilt toevoegen.
5. Uit het "Inhoudsblokken" menu, onder de "Meer" sectie, selecteer "Code."
6. Zorg ervoor dat "HTML" is geselecteerd uit het vervolgkeuzemenu in de rechterbovenhoek, en plak vervolgens de Buy Button embedcode in het "Code" veld.
7. Klik op "Toepassen."

Houd er rekening mee dat sommige aangepaste Squarespace-thema's meer geavanceerde kennis van HTML vereisen voor aanpassingen. In dergelijke gevallen is het het beste om rechtstreeks contact op te nemen met een ontwikkelaar voor hulp bij het toevoegen van aangepaste code aan je website.

Voeg een Shopify Buy Button toe aan een WordPress-website

Om een Shopify Buy Button toe te voegen aan een bericht op je WordPress.org-website:

1. Eerst volg je de bovenstaande stappen om de Buy Button embedcode te kopiëren.
2. Vanuit je WordPress-dashboard ga je naar je pagina-overzicht en selecteer je de pagina waaraan je een Buy Button wilt toevoegen.
3. Afhankelijk van de versie van de WordPress-editor die je gebruikt, voltooi je een van de volgende stappen:
   1. Als je de Classic Editor voor je WordPress-site gebruikt, klik dan op de "Tekst" tab in de editor om over te schakelen van de visuele weergave naar de tekstweergave.
   2. Als je de Block Editor voor je WordPress-site gebruikt, klik dan op de "+" knop, zoek en selecteer "Aangepaste HTML."
4. Plak de Buy Button embedcode in de ruimte waar je wilt dat deze verschijnt.
5. Klik op "Opslaan als concept," "Voorbeeld," of "Publiceren," afhankelijk van de actie die je wilt ondernemen.

Je kunt de embedcode ook aan een WordPress-menu toevoegen door de volgende stappen te volgen:

1. Eerst volg je de bovenstaande stappen om de Buy Button embedcode te kopiëren.
2. Vanuit je WordPress-dashboard klik je op "Weergave."
3. Selecteer "Aanpassen" om de thema-editor te openen, selecteer vervolgens "Widgets."
4. Selecteer het gebied waar je je Buy Button wilt toevoegen.
5. Klik op "Voeg een widget toe," en vervolgens "Tekst⁠".
6. Plak de Buy Button embedcode.
7. Klik op "Opslaan en publiceren."

Houd er rekening mee dat Shopify Buy Buttons compatibel zijn met websites op het WordPress.org-platform, maar niet met WordPress.com, vanwege beperkingen in HTML-aanpassingen.

Voeg een Buy Button toe aan Wix

Om een Shopify Buy Button aan je Wix-site toe te voegen, volg je deze stappen:

1. Eerst volg je de bovenstaande stappen om de Buy Button embedcode te kopiëren.
2. Vanuit je Wix-dashboard selecteer je de site van de "Mijn sites" pagina waar je de Buy Button aan wilt toevoegen, en selecteer vervolgens "Bewerk site."
3. In de Wix-website-editor klik je op "+," en vervolgens "Meer." Selecteer "HTML-code." Dit voegt een HTML-code-widget aan je pagina toe.
4. Klik op "Voer code in." In de "HTML-instellingen" pop-up, plak je Buy Button embedcode in het "Voeg hier code toe" veld.
5. Klik op "Toepassen."
6. Pas de grootte van de HTML-code-widget aan naar wens. Vergeet niet ervoor te zorgen dat het winkelwagentje-tabblad zichtbaar is als je een Buy Button met een winkelwagentje hebt geïntegreerd.
7. Wanneer je klaar bent met aanpassen, klik je op "Opslaan."

Het is het waard om te vermelden dat als je Buy Buttons voor meerdere producten wilt embedden, het het beste is om een Buy Button per collectie te embedden, in plaats van een Buy Button voor een enkel product. Als je meerdere Buy Buttons voor enkele producten embedt, zien bezoekers een apart winkelwagentje voor ieder product.

Shopify Buy Button script-tags toevoegen aan je website

In sommige gevallen eisen websitebouwers (zoals Unbounce) dat je <script> tags afzonderlijk in je header plakt, terwijl je de rest van de code in de body van je website plakt, waar je wilt dat de Shopify Buy Button verschijnt.

Om dit te doen, moet je het <script> element scheiden van het <div> element in je Buy Button embedcode. Je ziet het <div> element aan de bovenkant van de code. Het ziet er ongeveer zo uit:

<div></div>.

Het script-element (dat veel langer is) vormt de rest van de embedcode, beginnend met <script type="text/javascript"> en eindigend met </script>.

Als je deze elementen hebt gescheiden, volg dan deze stappen:

1. Open de header van de pagina voor de website waar je je Shopify Buy Button wilt embedden.
2. Kopieer en plak het <script> element, in zijn geheel, in de header van de pagina.
3. Sla je wijzigingen op.
4. Open nu de pagina-editor voor de pagina waar je je Shopify Buy Button wilt toevoegen.
5. Kopieer en plak het <div> element in de pagina waar je wilt dat je Buy Button verschijnt.
6. Sla je wijzigingen op.

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 zijn werk wil monetariseren, bieden Shopify Buy Buttons 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.

Veelgestelde vragen over het toevoegen van een Shopify Buy Button aan je website

Hoe voeg ik een Shopify Buy Button toe aan mijn website?

Voeg het Buy Button verkoopkanaal toe aan je Shopify-winkel.

Klik op Buy Button > Maak een Buy Button aan. Selecteer of je een Product Buy Button of een collectie Buy Button wilt en kies vervolgens het product of de collectie die je wilt gebruiken.

Pas de kleuren, grootte, tekst en functionaliteit van je Buy Button aan naar wens en klik op Volgende.

Klik op Code kopiëren.

Plak de embedcode in de webpagina waar je wilt dat je Buy Button verschijnt.

Wat doet de Shopify Buy Button voor je website?

Shopify Buy Buttons stellen bezoekers van je website in staat om producten van je Shopify-winkel te kopen zonder je winkel direct te hoeven bezoeken. Buy Buttons kunnen aan elke website of blog worden toegevoegd met aanpasbare HTML, waarmee Shopify e-commerce tools met je website worden geïntegreerd.

Is de Shopify Buy Button veilig voor mijn website?

Buy Buttons zijn een veilige en beveiligde manier om producten en diensten te verkopen, aangezien bezoekers worden doorgestuurd naar je volledig beveiligde, PCI-conforme Shopify afrekenpagina om hun transactie te verwerken. Shopify's beveiliging dekt alle zes PCI-standaardcategorieën en is van toepassing op elke transactie die het platform gebruikt.

Wat zijn de kosten van een Shopify Buy Button?

Shopify Buy Buttons zijn inbegrepen als een functie bij alle Shopify-abonnementplannen, inclusief het Starterplan, dat € 5 per maand kost.

Wat zijn de voordelen van de Shopify Buy Button voor mijn website?

De Shopify Buy Button stelt je in staat om op elke website of blogpost te verkopen met behulp van Shopify's veilige tools voor afrekenprocessen en e-commercebeheer, zonder dat je een Shopify-winkel hoeft op te zetten. Buy Buttons creëren een naadloze afrekenervaring die kan helpen om meer verkopen op drukbezochte pagina's mogelijk te maken.

Wat is het verschil tussen een Buy Button en een Shopify-bestelknop?

Beide vervullen vergelijkbare functies, maar Shopify Buy Buttons kunnen in elke pagina of blogpost worden ingebed, zelfs op websiteplatforms zoals WordPress en Squarespace. Dit verschilt van de ‘Voeg toe aan winkelwagentje’-knoppen op je productpagina's, die direct in je Shopify-thema zijn ingebouwd en niet elders kunnen worden ingebed.