Een koopknop maken

Deze pagina is afgedrukt op Sep 12, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-sales-channels/buy-button/create-buy-button.

Wanneer je het Koopknop-verkoopkanaal hebt toegevoegd aan je Shopify-beheercentrum, kun je een koopknop maken voor een product of collectie.

Kopieer de automatisch gegenereerde code nadat je een koopknop hebt gemaakt en voeg de code toe aan de webpagina of blogpost waar je de knop wil weergeven. Je kunt bijvoorbeeld de koopknop toevoegen aan je Wordpress-blog of Squarespace-website.

Je kunt het uiterlijk van de koopknop niet meer wijzigen nadat je deze op je website hebt ingesloten. Als je deze wilt wijzigen, maak je een nieuwe knop aan in het kanaal en vervang je de oorspronkelijke code door de nieuwe code.

Koopknoppen aanpassen

Je kunt het uiterlijk van een Koopknop aanpassen en de manier waarop deze zich gedraagt:

de kleur
zijn grootte
het lettertype
de actie die wordt uitgevoerd wanneer op de knop wordt geklikt
of de checkout wordt geopend in een nieuw browservenster

Wanneer je de knop aanpast, kun je een voorbeeld van je wijzigingen bekijken. Je kunt het gedrag van de koopknop testen door op het voorbeeld te klikken.

Opmaakstijl

Je kunt de layout van de koopknop kiezen.

Beschikbare indelingen voor Koopknoppen
Basis	Selecteer deze opmaak om een koopknop toe te voegen zonder productafbeelding. Misschien wil je dit doen als je je producten al ergens anders online weergeeft, maar gewoon een knop wil toevoegen om de aankoop te doen.
Klassiek	Selecteer deze layout om een productafbeelding en prijs weer te geven naast de koopknop. Deze layout is handig voor een snel productvoorbeeld, zoals in een blogpost.
Volledige weergave	Selecteer deze layout om een productafbeelding, prijs en beschrijving naast de koopknop weer te geven. Deze layout emuleert een pagina met productdetails in je webshop.

Acties voor koopknop

Wanneer je een koopknop maakt, kun je de actie selecteren die plaatsvindt wanneer op de knop wordt geklikt.

Als de koopknop voor een collectie geldt, is de actie van toepassing op elk product in de verzameling.

Met Product toevoegen aan winkelwagen wordt het product toegevoegd aan een winkelwagen. Klanten kunnen doorgaan met winkelen en extra producten aan de winkelwagen toevoegen.
Met Direct naar checkout gaat de klant rechtstreeks naar de checkoutpagina waar hij of zij het product kan afrekenen. Klanten kunnen geen extra producten aan hun bestelling toevoegen.
Productgegevens openen geeft een knop Product bekijken weer. Wanneer de klant op de knop klikt, kan deze de beschrijving van het product zien, beschikbare productvarianten selecteren en het product aan de winkelwagen toevoegen. Als een product meerdere productafbeeldingen heeft, worden deze ook weergegeven.
- Deze optie is niet beschikbaar wanneer je de opmaak Volledige weergave kiest, omdat de opmaak Volledige weergave al alle productgegevens weergeeft.

Je kunt ook kiezen of de checkout wordt geopend in een nieuw browservenster of als het wordt geopend op hetzelfde tabblad als je website. De standaardinstelling is dat de checkout in een nieuw venster wordt geopend.

Uiterlijk van de Koopknop

De Knopstijl bevat vorm, kleur en typografie voor het knopgedeelte van de koopknop.
Opmaak Afhankelijk van de opmaakstijl die je kiest, kun je instellingen aanpassen zoals knopuitlijning, afbeeldingsgrootte, knoptekst, lettertype, kleur en grootte.
Winkelwagen bevat tekst- en kleuropties voor de ingesloten winkelwagen. Je kunt het label ook inschakelen en aanpassen voor het veld Bestellingsnotitie. Je kunt opmerkingen bij bestellingen gebruiken om speciale instructies van klanten te verzamelen over het voorbereiden en bezorgen van een bestelling. In het veld Aanvullende informatie kun je een bericht aan je klanten communiceren.
- Je kunt de instellingen voor de winkelwagen alleen bewerken als je Product toevoegen aan winkelwagen of Productgegevens openen hebt gekozen als actie van de knop.
Gedetailleerd pop-up bevat de instellingen voor het pop-upvenster met productdetails. Je kunt de tekst van de knop aanpassen, al dan niet het aantalveld, de kleuren die worden gebruikt voor de achtergrond en labels en het lettertype en de tekengrootte van de labels. Je kunt deze instellingen alleen wijzigen als je Productgegevens openen hebt gekozen als actie van de knop.

Een koopknop voor één product maken

Je kunt een koopknop voor één product maken. De koopknop kan één of alle varianten van het product bevatten. Wanneer je de koopknop maakt, kun je een layout-stijl kiezen en de kleur, de tekst, het uiterlijk van de knop aanpassen alsmede de actie die wordt uitgevoerd wanneer een klant hierop klikt. Lees meer over het aanpassen van koopknoppen.

Voordat je een Koopknop voor een product maakt, moet je het product in je Shopify-beheercentrum hebben toegevoegd en beschikbaar gemaakt voor het verkoopkanaal Koopknop.

Stappen:

Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.
Klik op de pagina Apps en verkoopkanalen op Buy Button.
Klik op Verkoopkanaal openen.
Klik op Een koopknop maken.
Klik op de Koopknop product.
Selecteer het product in je assortiment of gebruik een zoekopdracht om een product te vinden. Klik op Selecteren.
Optioneel: pas de Koopknop aan.
1. Als je productvarianten hebt, selecteer Alle varianten of selecteer de variant die je wilt toevoegen.
2. Kies een layout-stijl en de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook het uiterlijk van de knop aanpassen.
3. Standaard wordt een nieuw venster geopend in het afrekenproces, maar je kunt ervoor kiezen om de checkout te openen op hetzelfde browser tabblad als je website. Klik op het tabblad Geavanceerde instellingen &Gt; omleiding.
Klik op Volgende.
Klik op Code kopiëren.
Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Zie Koopknopcode toevoegen aan HTML.
Plak de code in de HTML waar je de koopknop wilt weergeven en sla je wijzigingen op.

Tik in de Shopify-app op de knop ….
Tik in het gedeelte Verkoopkanaal op Koopknop.
Klik op Een koopknop maken.
Klik op de Koopknop product.
Selecteer het product in je assortiment of gebruik een zoekopdracht om een product te vinden. Klik op Selecteren.
Optioneel: Klik op Aanpassen.
1. Als je product meerdere varianten heeft, selecteer Alle varianten of een variant in de vervolgkeuzelijst.
2. Kies een layout-stijl en de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook het uiterlijk van de knop aanpassen.
3. Standaard wordt een nieuw venster geopend in het afrekenproces, maar je kunt ervoor kiezen om de checkout te openen op hetzelfde browser tabblad als je website. Klik op het tabblad Geavanceerde instellingen &Gt; omleiding.
Klik op Gereed.
Klik op Code kopiëren.
Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Zie Koopknopcode toevoegen aan HTML.
Plak de code in de HTML waar je de koopknop wilt weergeven en sla je wijzigingen op.

Tik in de Shopify-app op de knop ….
Tik in het gedeelte Verkoopkanaal op Koopknop.
Klik op Een koopknop maken.
Klik op de Koopknop product.
Selecteer het product in je assortiment of gebruik een zoekopdracht om een product te vinden. Klik op Selecteren.
Optioneel: Klik op Aanpassen.
1. Als je product meerdere varianten heeft, selecteer Alle varianten of een variant in de vervolgkeuzelijst.
2. Kies een layout-stijl en de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook het uiterlijk van de knop aanpassen.
3. Standaard wordt een nieuw venster geopend in het afrekenproces, maar je kunt ervoor kiezen om de checkout te openen op hetzelfde browser tabblad als je website. Klik op het tabblad Geavanceerde instellingen &Gt; omleiding.
Klik op Gereed.
Klik op Code kopiëren.
Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Zie Koopknopcode toevoegen aan HTML.
Plak de code in de HTML waar je de koopknop wilt weergeven en sla je wijzigingen op.