Implementatieplan Garantie Badge via Custom Liquid Blok

Overzicht

Dit plan beschrijft hoe je de Nederlandse garantie badge kunt toevoegen als custom liquid blok direct op je Shopify productpagina.

Stappen voor implementatie

1. Toegang tot de Theme Editor

1. Log in op je Shopify admin dashboard
2. Ga naar 'Online Store' > 'Themes'
3. Klik op 'Customize' bij je huidige thema

2. Navigeer naar de productpagina

1. Gebruik de pagina selector bovenaan om naar een productpagina te gaan
2. Zoek de sectie waar je de garantie badge wilt toevoegen (meestal onder prijs of bestelknop)

3. Voeg een Custom Liquid blok toe

1. Klik op de betreffende sectie (zoals product informatie)
2. Klik op 'Toevoegen blok' of '+ Blok toevoegen'
3. Scroll naar beneden en kies 'Custom liquid'

4. Voeg de code toe

1. In het tekstveld dat verschijnt, plak de volgende code:

liquid

Copy

<div class="garantie-badge">
 <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
   <path d="M8 1a3 3 0 0 1 3 3v2h1.5A1.5 1.5 0 0 1 14 7.5v6A1.5 1.5 0 0 1 12.5 15h-9A1.5 1.5 0 0 1 2 13.5v-6A1.5 1.5 0 0 1 3.5 6H5V4a3 3 0 0 1 3-3zm2 5V4a2 2 0 1 0-4 0v2h4z"/>
 </svg>
 <span class="text">30 dagen niet-goed-geld-terug garantie</span>
</div>

<style>
 .garantie-badge {
   display: flex;
   align-items: center;
   background-color: #DCFCE7; /* Levendiger groen */
   padding: 8px 16px;
   border-radius: 25px;
   font-family: Arial, sans-serif;
   font-size: 15px;
   font-weight: bold;
   color: #0F5132; /* Donkergroene tekst voor contrast */
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
   width: fit-content;
   border: 2px solid #22C55E;
   margin: 15px 0;
 }

 .garantie-badge .icon {
   width: 16px;
   height: 16px;
   margin-right: 8px;
   color: #0F5132; /* Donkergroene icon kleur */
 }
</style>

2. Klik op 'Toepassen' of 'Opslaan'

5. Hernoem en positioneer het blok

1. Geef het blok een duidelijke naam (bv. "Garantie Badge")
2. Verplaats het blok naar de gewenste positie binnen de sectie door het te slepen
3. Klik op 'Opslaan'

Positioneringstips

• Onder de prijs: Plaats de badge direct onder de prijs voor maximale zichtbaarheid
• Naast de bestelknop: Plaats de badge naast of onder de 'In winkelwagen' knop
• Bij productbeschrijving: Voeg de badge toe bij specifieke productinformatie

Opmerkingen

• Deze methode voegt de badge toe als een vast element zonder configuratieopties
• Om de tekst of kleuren aan te passen, moet je de code wijzigen in het custom liquid blok
• Je kunt de badge toevoegen aan meerdere productpagina's door dezelfde stappen te volgen, of door de template aan te passen

Test

Test de garantie badge op verschillende apparaten (desktop, tablet, mobiel) om te zorgen dat hij correct wordt weergegeven en goed schaalt op alle schermformaten.

‍