Skip to main content

​
Inleiding

Een slotpictogram toevoegen aan je checkoutknop is een eenvoudige maar effectieve manier om het vertrouwen van klanten te vergroten door te laten zien dat hun betaalgegevens veilig zijn. Dit vertrouwde symbool stelt klanten gerust over de bescherming van hun gegevens, waardoor ze zich comfortabeler voelen tijdens het afrekenproces. In deze tutorial laat ik je zien hoe je met CSS een slotpictogram aan je checkoutknop toevoegt, wat de veiligheid versterkt en de algehele gebruikerservaring verbetert. Deze stappen zijn perfect voor winkeleigenaren of ontwikkelaars met een basiskennis van CSS. Door dit kleine maar impactvolle visuele element toe te voegen, kun je de Upcart-checkoutknop laten aansluiten op het ontwerp van je site, wat helpt om vertrouwen op te bouwen en klanten aan te moedigen hun aankoop af te ronden. Laten we beginnen!

​
Aan de slag: kies een slotpictogram

Eerst moet je een slotpictogram kiezen om aan je winkel toe te voegen. Hieronder hebben we er een aantal beschikbaar die je kunt gebruiken, maar je mag ook je eigen pictogram gebruiken. Om je eigen pictogram te gebruiken, upload je het naar de sectie Files van je Shopify-winkel onder Settings > Files en kopieer je de URL. Er is in Upcart geen pictogramveld voor de checkoutknop. In plaats daarvan plak je een HTML-afbeeldingstag in het veld Checkout button text, dat HTML weergeeft — neem een van de onderstaande snippets en vervang de src door je eigen URL.

​
Dit zijn de slotpictogrammen die we voor je beschikbaar hebben:

Toe te voegen HTML: Wit gevuld hangslotpictogram naast de tekst Checkout op een donkere knop
Toe te voegen HTML: Wit hangslotpictogram met omtreklijn naast de tekst Checkout op een donkere knop
Toe te voegen HTML: Wit hangslot met omtreklijn en sleutelgat naast Checkout op een donkere knop
Toe te voegen HTML: Zwart gevuld hangslotpictogram naast de tekst Checkout op een lichtblauwe knop
Toe te voegen HTML: Zwart hangslot met sleutelgat naast Checkout op een lichtblauwe knop

​
Het slotpictogram plaatsen:

Nadat je het slotpictogram hebt gekozen, ga je naar Manage All Carts > Edit > Settings > Edit copy en zoek je het veld Checkout button text. Je kunt het vóór of na het woord “Checkout” plakken. Daarnaast kun je hier het woord “Checkout” veranderen in iets anders, zoals “Secure Checkout” of iets vergelijkbaars. De tekst van de checkoutknop bewerken in Upcart om het slotpictogram te plaatsen

​
Toegang tot de Custom CSS-instellingen

Volg deze stappen om de CSS van je Upcart aan te passen:
  1. Open de Upcart-app in je dashboard.
  2. Ga naar de Cart Editor.
  3. Open Settings en selecteer het tabblad Custom CSS. Settings is een rij tabbladen in plaats van één lange pagina — zie je Custom CSS niet, dan vind je die onder More settings.

​
Aangepaste CSS toepassen om het slotpictogram te tonen:

Zodra je in de sectie Custom CSS bent, kopieer en plak je de onderstaande code om je slotpictogram te tonen en te plaatsen. Let op: hoe groter het paddinggetal, hoe kleiner het pictogram wordt.
  1. Zoek het CSS-invoerveld.
  2. Kopieer en plak de volgende code in het CSS-invoerveld:
  3. Pas height onder .upcart-custom-lock-icon aan voor een ander formaat van het pictogram. We raden 16px of 20px aan voor een groter slotpictogram

​
Conclusie

Door deze stappen te volgen heb je met succes een slotpictogram aan je checkoutknop toegevoegd, waardoor je klanten zich veiliger en zekerder voelen tijdens hun aankoop. Deze kleine aanpassing kan een groot verschil maken in hoe je winkel wordt ervaren, en helpt om vertrouwen op te bouwen en de algehele winkelervaring te verbeteren.

​
Nog steeds hulp nodig?

Als je hulp nodig hebt bij aanpassingen, raden we je aan om een Shopify Expert te raadplegen over het toevoegen van HTML, CSS en zelfs JavaScript aan je cart drawer. Bekijk Shopify Experts