Een koopknop aanmaken

Nadat je het verkoopkanaal Koopknop hebt toegevoegd in het Shopify-beheercentrum, kun je een koopknop aanmaken voor een product of een collectie.

Nadat je een koopknop hebt aangemaakt, kopieer je de automatisch gegenereerde code en voeg je de code toe aan de webpagina of blogpost waar je de knop wilt weergeven. Je kunt de koopknop bijvoorbeeld toevoegen aan je Wordpress-blog of Squarespace-website.

Het uiterlijk van de koopknop kan niet worden gewijzigd nadat je deze op je website hebt ingesloten. Als je het uiterlijk wilt wijzigen, moet je een nieuwe knop aanmaken in het kanaal en de oorspronkelijke code vervangen door de nieuwe code.

Koopknoppen aanpassen

Je kunt het uiterlijk en het gedrag van een koopknop aanpassen:

  • de kleur
  • de maat
  • het lettertype
  • de actie die plaatsvindt wanneer op de knop wordt geklikt
  • of de checkout in een nieuw browservenster wordt geopend

Terwijl 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 opmaak van de koopknop kiezen.

Beschrijvingen van de beschikbare opmaken Basic, Classic en Volledige weergave voor koopknoppen.
BasicSelecteer deze opmaak om een koopknop zonder productafbeelding toe te voegen. Dit kan handig zijn als je je producten al ergens anders online weergeeft, maar alleen een knop wilt toevoegen om de aankoop mogelijk te maken.
ClassicSelecteer deze opmaak om een productafbeelding en prijs naast de koopknop weer te geven. Deze opmaak is handig voor een snelle productpreview, bijvoorbeeld in een blogpost.
Volledige weergaveSelecteer deze opmaak om een productafbeelding, prijs en beschrijving naast de koopknop weer te geven. Deze opmaak bootst een productgegevenspagina in je webshop na.

Koopknopacties

Wanneer je een koopknop aanmaakt, kun je selecteren welke actie wordt uitgevoerd wanneer op de knop wordt geklikt.

Als de koopknop voor een collectie is, geldt de actie voor elk product in de collectie.

  • Product aan winkelwagen toevoegen voegt het product toe aan een winkelwagen. Klanten kunnen verder winkelen en extra producten aan de winkelwagen toevoegen.
  • Direct naar checkout brengt de klant rechtstreeks naar je checkout, waar ze het product kunnen kopen. Klanten kunnen geen extra producten aan hun bestelling toevoegen.
  • Productgegevens openen toont een Product bekijken knop. Wanneer de klant op de knop klikt, kan deze de productomschrijving 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 als je de opmaak Volledige weergave kiest, omdat deze opmaak alle productgegevens al weergeeft.

Je kunt ook kiezen of de checkout in een nieuw browservenster wordt geopend of in hetzelfde tabblad als je website. Standaard wordt de checkout in een nieuw venster geopend.

Vormgeving van de koopknop

  • Knopstijl omvat de vorm, kleur en typografie voor het knopgedeelte van de koopknop.
  • Opmaak: afhankelijk van de opmaakstijl die je kiest, kun je instellingen aanpassen zoals de uitlijning van de knop, afbeeldingsgrootte, knoptekst, lettertype, kleur en grootte.
  • Winkelwagen omvat tekst- en kleuropties voor de ingesloten winkelwagen. Je kunt ook het label voor het Bestelnotitie veld inschakelen en aanpassen. Je kunt bestelnotities gebruiken om speciale instructies van klanten te verzamelen over het voorbereiden en bezorgen van een bestelling. Met het veld Aanvullende informatie kun je een bericht aan je klanten doorgeven.
    • Je kunt de instellingen voor de winkelwagen alleen bewerken als je Product aan winkelwagen toevoegen of Productgegevens openen hebt gekozen als de actie van de knop.
  • Gedetailleerde pop-up omvat de instellingen voor het pop-upvenster met productgegevens. Je kunt de knoptekst aanpassen, kiezen of het veld voor de hoeveelheid wordt weergegeven en de kleuren voor de achtergrond en labels en het lettertype en de lettergrootte van de labels aanpassen. Je kunt deze instellingen alleen bewerken als je Productgegevens openen hebt gekozen als de actie van de knop.

Een koopknop voor een afzonderlijk product aanmaken

Je kunt een koopknop voor een afzonderlijk product aanmaken. De koopknop kan een of alle varianten van het product bevatten. Wanneer je de koopknop aanmaakt, kies je een opmaakstijl en pas je de kleur, tekst en vormgeving van de knop aan, evenals de actie die wordt uitgevoerd wanneer een klant erop klikt. Meer informatie over het aanpassen van koopknoppen.

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

Stappen:

Desktop
  1. Ga vanuit je Shopify-beheercentrum naar Verkoopkanalen > Koopknop.

  2. Klik op Een koopknop aanmaken.

  3. Klik op Koopknop voor product.

  4. Selecteer het product uit je catalogus of gebruik de zoekfunctie om een product te vinden. Klik op Selecteren.

  5. Optioneel: pas de koopknop aan.

    1. Als je product varianten heeft, selecteer dan Alle varianten of selecteer de variant die je wilt opnemen.
    2. Kies een opmaakstijl en de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook de vormgeving van de knop aanpassen.
    3. Standaard wordt de checkout in een nieuw venster geopend, maar je kunt ervoor kiezen om deze in hetzelfde browsertabblad als je website te openen. Klik op Geavanceerde instellingen > Omleiden in hetzelfde tabblad.
  6. Klik op Volgende.

  7. Klik op Code kopiëren.

  8. Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Raadpleeg Koopknopcode toevoegen aan HTML.

  9. Plak de code in de HTML op de plek waar de koopknop moet verschijnen en sla vervolgens je wijzigingen op.

Mobiel
  1. Tik in de Shopify-app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Koopknop.

  3. Tik op Een koopknop aanmaken.

  4. Tik op Koopknop voor product.

  5. Selecteer het product uit je catalogus of gebruik de zoekfunctie om een product te vinden en tik vervolgens op Selecteren.

  6. Optioneel: tik op Aanpassen.

    1. Als je product meerdere varianten heeft, selecteer dan Alle varianten of selecteer een variant uit de vervolgkeuzelijst.
    2. Kies een opmaakstijl en de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook de vormgeving van de knop aanpassen.
    3. Standaard wordt de checkout in een nieuw venster geopend, maar je kunt ervoor kiezen om deze in hetzelfde browsertabblad als je website te openen. Tik op Geavanceerde instellingen > Omleiden in hetzelfde tabblad.
  7. Tik op Gereed.

  8. Tik op Code kopiëren.

  9. Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Raadpleeg Koopknopcode toevoegen aan HTML.

  10. Plak de code in de HTML op de plek waar de koopknop moet verschijnen en sla vervolgens je wijzigingen op.

Een koopknop voor een collectie aanmaken

Wanneer je een koopknop voor een collectie aanmaakt, maak je in feite een knop voor elk product in de collectie.

Wanneer je de koopknop aanmaakt, kies je een opmaakstijl en pas je de kleur, tekst en vormgeving van de knop aan, evenals de actie die wordt uitgevoerd wanneer een klant erop klikt. Meer informatie over het aanpassen van koopknoppen.

Voordat je een koopknop voor een collectie aanmaakt, moet je:

Stappen:

Desktop
  1. Ga vanuit je Shopify-beheercentrum naar Verkoopkanalen > Koopknop.

  2. Klik op Een koopknop aanmaken.

  3. Klik op Collectiekoopknop.

  4. Selecteer de collectie of gebruik de zoekfunctie om de collectie te vinden. Klik op Selecteren.

  5. Optioneel: pas de koopknop aan.

    1. Kies de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook het uiterlijk van de knop aanpassen.
    2. Standaard wordt de checkout in een nieuw venster geopend, maar je kunt ervoor kiezen om deze in hetzelfde browsertabblad als je website te openen. Klik op Geavanceerde instellingen > Omleiden in hetzelfde tabblad.
  6. Klik op Volgende.

  7. Klik op Code kopiëren.

  8. Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Raadpleeg Koopknopcode toevoegen aan HTML.

  9. Plak de code in de HTML op de plek waar de koopknop moet verschijnen en sla vervolgens je wijzigingen op.

Mobiel
  1. Tik in de Shopify-app op het pictogram Menu.

  2. Tik in het gedeelte Verkoopkanalen op Koopknop.

  3. Tik op Een koopknop aanmaken.

  4. Tik op Collectiekoopknop.

  5. Selecteer de collectie of gebruik de zoekfunctie om de collectie te vinden en tik vervolgens op Selecteren.

  6. Optioneel: tik op Aanpassen.

    1. Kies de actie die wordt uitgevoerd wanneer een klant op de knop klikt. Je kunt ook het uiterlijk van de knop aanpassen.
    2. Standaard wordt de checkout in een nieuw venster geopend, maar je kunt ervoor kiezen om deze in hetzelfde browsertabblad als je website te openen. Tik op Geavanceerde instellingen > Omleiden in hetzelfde tabblad.
  7. Tik op Gereed.

  8. Tik op Code kopiëren.

  9. Open de HTML-editor voor de webpagina waarop je de koopknop wilt weergeven. Raadpleeg Koopknopcode toevoegen aan HTML.

  10. Plak de code in de HTML op de plek waar de koopknop moet verschijnen en sla vervolgens je wijzigingen op.