Een Dynamische "Mensen bekijken dit" Widget voor je Shopify Webshop

‍

Een effectieve manier om conversies in je Shopify webshop te verhogen is door gebruik te maken van sociale bewijsvoering. Door te tonen hoeveel mensen momenteel naar een product kijken, creëer je een gevoel van populariteit en urgentie. Dit kan bezoekers stimuleren om sneller tot aankoop over te gaan.

In deze stap-voor-stap handleiding laat ik je zien hoe je een professionele "Mensen bekijken dit product" widget als custom Liquid blok kunt toevoegen aan je Shopify productpagina's.

Wat Maakt Deze Widget Effectief?

• Dynamische getallen: Bij elke pagina-refresh of klik wijzigt het aantal, waardoor je webshop actief lijkt
• Visuele aantrekkingskracht: De pulserende animatie trekt de aandacht
• Sociale bewijsvoering: Creëert het idee dat andere mensen ook geïnteresseerd zijn
• Eenvoudig te implementeren: Werkt direct zonder ingewikkelde apps

Stappenplan voor Implementatie in Shopify

Stap 1: Inloggen op je Shopify Dashboard

1. Log in op je Shopify admin dashboard
2. Ga naar "Online Store" > "Themes"
3. Vind je huidige thema en klik op "Aanpassen" om het te openen

Stap 2: Een Custom Liquid Blok Maken

1. In de Theme Editor, zoek en selecteer de productpagina die je wilt aanpassen
2. Klik op "Secties toevoegen" of zoek de sectie waar je het blok wilt plaatsen
3. Voeg een "Custom liquid" blok toe (of het equivalent in jouw thema)
4. Kopieer en plak deze code in het Custom Liquid veld:

<div class="watching-box">
 <div class="watching-icon">
   <div class="pulse-container">
     <div class="circle">
       <div class="inner-circle"></div>
     </div>
     <div class="pulse"></div>
   </div>
 </div>
 <span class="watching-text">
   <strong><span id="viewer-count-{{ product.id }}">54</span> mensen</strong> bekijken dit product nu
 </span>
</div>

<style>
 /* Widget Styling */
 .watching-box {
   display: flex;
   align-items: center;
   background: linear-gradient(to right, #ffffff, #f9fcff);
   padding: 8px 16px;
   border-radius: 20px;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.08);
   font-family: 'Helvetica Neue', Arial, sans-serif;
   font-size: 14px;
   color: #333;
   font-weight: 400;
   max-width: fit-content;
   margin: 15px 0;
   border: 1px solid rgba(141, 195, 230, 0.3);
   transition: transform 0.2s ease;
 }
 
 .watching-box:hover {
   transform: translateY(-2px);
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
 }

 /* Icon Styling */
 .watching-icon {
   display: flex;
   align-items: center;
   margin-right: 10px;
 }
 
 .pulse-container {
   position: relative;
 }

 .circle {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid #8dc3e6;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 2;
   background-color: white;
 }

 .inner-circle {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #8dc3e6;
 }
 
 .pulse {
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   border-radius: 50%;
   background: rgba(141, 195, 230, 0.4);
   z-index: 1;
   animation: pulse 2s infinite;
 }

 /* Text Styling */
 .watching-text {
   font-size: 14px;
   color: #444;
   letter-spacing: 0.2px;
 }

 .watching-text strong {
   font-weight: 600;
   color: #222;
 }
 
 @keyframes pulse {
   0% {
     transform: scale(1);
     opacity: 0.8;
   }
   70% {
     transform: scale(1.5);
     opacity: 0;
   }
   100% {
     transform: scale(1.5);
     opacity: 0;
   }
 }
</style>

<script>
 // Wacht tot de pagina is geladen
 document.addEventListener('DOMContentLoaded', function() {
   // Gebruik product ID om unieke element ID te maken
   const viewerCountId = "viewer-count-{{ product.id }}";
   const countElement = document.getElementById(viewerCountId);
   
   // Functie om een willekeurig getal te genereren
   function getRandomNumber(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
   }
   
   // Functie om het aantal kijkers bij te werken
   function updateViewerCount() {
     // Genereer een willekeurig getal tussen 45 en 98
     const randomViewers = getRandomNumber(45, 98);
     
     // Voeg een visueel effect toe bij het veranderen
     countElement.style.transition = 'color 0.3s ease';
     countElement.style.color = '#007bff';
     
     // Update het aantal kijkers
     countElement.textContent = randomViewers;
     
     // Keer terug naar de normale kleur na de transitie
     setTimeout(() => {
       countElement.style.color = '#222';
     }, 500);
     
     // Sla het nieuwe aantal op in localStorage
     localStorage.setItem(viewerCountId, randomViewers);
   }
   
   // Controleer of er een opgeslagen waarde is
   const savedCount = localStorage.getItem(viewerCountId);
   if (savedCount) {

Stap 3: Positioneren van je Widget

Binnen je Shopify thema moet je beslissen waar de widget het beste past. Populaire locaties zijn:

• Direct onder de producttitel
• Naast de prijs
• Boven de "In winkelwagen" knop
• Onder de productbeschrijving

Je kunt het custom liquid blok slepen naar de gewenste locatie in de Theme Editor.

Stap 4: Testen en Aanpassen

1. Test de functionaliteit: Ververs de pagina een paar keer om te zien of het aantal kijkers verandert
2. Test het klikken: Klik op de widget om te controleren of het aantal verandert
3. Bekijk op mobiel: Controleer hoe de widget eruitziet op verschillende apparaten

Aanpassingen voor je Eigen Branding

Kleuren aanpassen:

1. In de CSS-code, zoek naar #8dc3e6 om de blauwe kleur van de cirkel te wijzigen
2. Pas de background: linear-gradient aan om de achtergrondkleur te veranderen
3. Wijzig box-shadow en border waarden om de omranding aan te passen

Getallen personaliseren:

1. In de JavaScript-code, zoek naar getRandomNumber(45, 98)
2. Wijzig de waarden 45 en 98 naar je gewenste minimum- en maximumwaarden
3. Voor meer realistische getallen kun je verschillende bereiken instellen voor populaire versus minder populaire producten

Tekst aanpassen:

Wijzig de tekst "mensen bekijken dit product nu" in de HTML naar jouw gewenste boodschap.

Pro Tips voor Shopify Winkeliers

1.Gebruik liquid variabelen voor dynamische content:

<span id="viewer-count-{{ product.id }}">{{ product.metafields.custom.min_viewers | default: 54 }}</span>

2.Koppel aan voorraadniveau:Als je winkel een beperkte voorraad heeft, kun je de widget aanpassen om urgentie te creëren:

{% if product.inventory_quantity < 10 %}
 <div class="watching-box urgent">
{% else %}
 <div class="watching-box">
{% endif %}

3.A/B testen:Overweeg om twee verschillende versies van de widget te testen om te zien welke beter converteert:

1. Verschillende tekstopties
2. Verschillende posities op de pagina
3. Verschillende bereiken voor de willekeurige getallen

Conclusie

Door deze dynamische "Mensen bekijken dit" widget toe te voegen aan je Shopify productpagina's, creëer je sociale bewijsvoering die kan helpen de conversieratio's te verhogen. Het is een klein maar effectief element dat bijdraagt aan een gevoel van populariteit en urgentie rond je producten.

Veel succes met je Shopify winkel!

‍

‍