Naar hoofdinhoud gaan
In deze tutorial voeg je de afhaalpuntkiezer van Zippendo toe aan je Shopify-checkout. In plaats van één lange lijst met een verzendmethode voor elk afhaalpunt zien je klanten elke verzendmethode voor afhaalpunten maar één keer. Kiezen ze die, dan is het afhaalpunt dat het dichtst bij hen ligt al gekozen, met het adres en de openingstijden. Willen ze een ander? Dan klikken ze op Afhaalpunt wijzigen en kiezen ze uit een lijst, of op een kaart als je je eigen Google Maps-sleutel toevoegt.
Shopify-checkout met de verzendmethode GLS pakkeshop geselecteerd. Daaronder het dichtstbijzijnde afhaalpunt met de afstand, het adres en de openingstijden, en een knop Afhaalpunt wijzigen

Wat je klanten zien: het dichtstbijzijnde afhaalpunt is al gekozen

Het duurt ongeveer 10 minuten. Je begint in Zippendo en voegt daarna de kiezer toe in de checkout-editor van Shopify.
Wat je nodig hebt
  • Een Shopify-webshop met het abonnement Shopify Plus. Shopify laat apps alleen met Shopify Plus iets aan de checkoutpagina toevoegen.
  • Je verzendprijzen in de checkout. Zie Je verzendprijzen tonen in de Shopify-checkout.
  • Een verzendregel die naar een afhaalpunt bezorgt, zoals “GLS Pakkeshop”.
Heb je geen Shopify Plus? Je klanten kunnen nog steeds een afhaalpunt kiezen: elk afhaalpunt wordt als een eigen verzendmethode getoond. Zie Je verzendprijzen tonen in de Shopify-checkout.

Stap 1: De kiezer inschakelen in Zippendo

1

De instellingen van je webshop openen

Klik in het menu links op Verkoopkanalen. Klik op het tabblad Gekoppeld op je Shopify-webshop. Je komt uit op het tabblad Bestellingen en checkout.
2

De Zippendo-afhaalpuntkiezer in de checkout kiezen

Scrol omlaag naar de kaart Afhaalpunten in de checkout. Kies onder Klanten kiezen een afhaalpunt via de optie Zippendo-afhaalpuntkiezer in de checkout.
Kaart Afhaalpunten in de checkout met de lijst geopend: Tarievenlijst (één tarief per afhaalpunt), Afhaalpuntenkaart (Shopify, experimenteel) en Zippendo-afhaalpuntkiezer in de checkoutKaart Afhaalpunten in de checkout met de lijst geopend: Tarievenlijst (één tarief per afhaalpunt), Afhaalpuntenkaart (Shopify, experimenteel) en Zippendo-afhaalpuntkiezer in de checkout

Kies Zippendo-afhaalpuntkiezer in de checkout

Kun je hem niet kiezen en staat er Zet eerst afhaalpunten in de winkelwagen uit? Dan kiezen je klanten hun afhaalpunt al in de winkelwagen. Er kan maar één van de twee aan staan: zet eerst Afhaalpunten in de winkelwagen uit.
3

De nieuwe machtigingen goedkeuren, als Zippendo erom vraagt

Toont de kaart Keur de nieuwe machtigingen van Zippendo goed in Shopify, klik dan op Goedkeuren in Shopify. Shopify gaat open en vraagt je om goedkeuring. Keur goed, ga terug naar Zippendo, laad de pagina opnieuw en kies nogmaals Zippendo-afhaalpuntkiezer in de checkout.
4

De checkout-editor openen

De kaart toont nu Status van de afhaalpuntkiezer, met Wacht op de eerste checkout totdat de kiezer aan een klant is getoond. Klik op Checkout-editor openen. De checkout-editor van Shopify gaat open in een nieuw tabblad.
Kaart Afhaalpunten in de checkout met Zippendo-afhaalpuntkiezer in de checkout gekozen, de Status van de afhaalpuntkiezer, een knop Checkout-editor openen en vakken voor een optionele Google Maps-sleutel en een optionele Google-sleutel voor adres zoekenKaart Afhaalpunten in de checkout met Zippendo-afhaalpuntkiezer in de checkout gekozen, de Status van de afhaalpuntkiezer, een knop Checkout-editor openen en vakken voor een optionele Google Maps-sleutel en een optionele Google-sleutel voor adres zoeken

Status van de afhaalpuntkiezer, met de knop Checkout-editor openen

De twee vakken voor Google-sleutels daaronder zijn optioneel. Je kunt ze nu of later toevoegen: zie “Een kaart en zoeken op adres” onderaan deze pagina.

Stap 2: Het Zippendo-blok aan de checkout toevoegen

De checkout-editor hoort bij Shopify, dus de namen hier zijn die van Shopify.
1

Apps openen

Klik bovenaan het linkerpaneel op Apps: het derde pictogram, met vier kleine vierkantjes. Je ziet Zippendo service point picker.
2

Het blok toevoegen

Klik op de + naast Zippendo service point picker en klik daarna op Checkout.
Het paneel Apps van de checkout-editor van Shopify met Zippendo service point picker en een klein menu: Add to, Checkout

Klik op + naast Zippendo service point picker en daarna op Checkout

Stap 3: Twee instellingen inschakelen

De instellingen van het blok gaan links open, onder Checkout behavior. Schakel beide in:
  • Allow app to block checkout: geeft de kiezer even de tijd om de keuze van je klant op te slaan voordat die betaalt. Het houdt nooit iemand tegen bij het betalen.
  • Include block in Shop Pay: klanten die met Shop Pay betalen, zien de kiezer ook.
Instellingen van het blok Zippendo service point picker, met Allow app to block checkout en Include block in Shop Pay allebei ingeschakeld

Beide schakelaars aan

Stap 4: Opslaan

Klik rechtsboven in de checkout-editor op Save. Wil je controleren waar het blok terecht is gekomen? Klik op het eerste pictogram bovenaan het linkerpaneel: Zippendo service point picker staat onder Shipping method.
De onderdelen van de checkout in de checkout-editor van Shopify. Onder Delivery, Ship, Shipping method en Shipping option list staat het blok Zippendo service point picker

Het blok staat onder Shipping method

Stap 5: Probeer het uit als klant

Open je webshop, leg een product in de winkelwagen en ga naar de checkout. Typ een bezorgadres en kies je verzendmethode voor afhaalpunten. Het dichtstbijzijnde afhaalpunt wordt voor je gekozen. Klik op Afhaalpunt wijzigen om de andere te zien. Je klanten kunnen zoeken op een postcode of de naam van een afhaalpunt, en met de pijlen door de lijst bladeren. Heb je een Google-sleutel voor adres zoeken toegevoegd, dan kunnen ze ook zoeken op een adres of een gebied.
De kiezer geopend in de Shopify-checkout: knoppen Lijst en Kaart, een zoekvak, de dichtstbijzijnde afhaalpunten met hun afstand, en pijlen om door de lijst te bladeren

Na Afhaalpunt wijzigen: zoeken en kiezen uit de dichtstbijzijnde afhaalpunten

Terug in Zippendo verandert de Status van de afhaalpuntkiezer van Wacht op de eerste checkout naar Live. Vanaf nu komen bestellingen binnen met het afhaalpunt dat je klant heeft gekozen.
Zolang de kiezer in geen enkele checkout is getoond, blijft Zippendo één verzendmethode per afhaalpunt tonen, zodat je klanten altijd kunnen kiezen. Wil je de kiezer niet meer gebruiken, schakel hem dan altijd eerst uit in Zippendo, en verwijder pas daarna het blok in Shopify.

Een kaart en zoeken op adres

Standaard krijgen klanten een lijst die ze kunnen doorzoeken op postcode of naam van het afhaalpunt. Met je eigen Google-sleutels kun je twee extra’s toevoegen:
  • Een kaart: met een Google Maps-sleutel kunnen klanten wisselen tussen Lijst en Kaart, en een afhaalpunt kiezen door op de speld ervan te klikken.
  • Zoeken op adres: met een Google-sleutel voor adres zoeken kunnen klanten zoeken op elk adres of gebied, en de kaart verschuiven om de afhaalpunten daar te zien.
Plak de sleutels in de twee vakken op de kaart Afhaalpunten in de checkout. Hoe je ze krijgt, stap voor stap: Google-sleutels aanmaken voor de afhaalpuntenkaart en zoeken op adres.

Goed om te weten

  • Apple Pay en Google Pay slaan het deel van de checkout over waar de kiezer staat. De bestelling komt nog steeds binnen, en Zippendo gebruikt het afhaalpunt dat het dichtst bij het bezorgadres ligt.
  • Afhalen in de winkel of de pickup points van Shopify: biedt je webshop die aan, lees dan de stappen voor de checkout-editor op Afhaalpuntkiezer in de checkout.
  • Uitschakelen: kies op de kaart Tarievenlijst (één tarief per afhaalpunt).
Alle details: Afhaalpuntkiezer in de checkout