info@diekthunnissen.nl
Review-Badge Integratie in Shopify voor Conversie-Boost

Review-Badge Integratie in Shopify voor Conversie-Boost

Deze code voegt een aantrekkelijke, responsieve review-badge toe aan je Shopify-winkel.

Shopify CRO
Mar 25, 2025

‍

Stappenplan: Review-Badge Integratie in Shopify voor Conversie-Boost

Wat deze code doet

Deze code voegt een aantrekkelijke, responsieve review-badge toe aan je Shopify-winkel die:

  1. Vertrouwen Opbouwt: Toont je 5-sterren beoordelingen op een visueel aantrekkelijke manier
  2. Conversies Verhoogt: Studies tonen aan dat prominente beoordelingsbadges kunnen leiden tot 20-30% hogere conversies
  3. Social Proof Levert: 92% van de consumenten leest reviews voordat ze een aankoop doen
  4. Mobiel-Vriendelijk Is: Volledig responsief en geoptimaliseerd voor elk apparaat
  5. SEO Verbetert: Implementeert schema.org markup voor rijke zoekresultaten in Google

Stap 1: Voeg de code toe aan je Shopify-thema

  1. Log in op je Shopify-dashboard
  2. Ga naar "Online Store" > "Themes"
  3. Klik op "Actions" > "Edit theme" bij je actieve thema
  4. Ga naar product template
  5. Voeg onderstaande code toe als custom liquid sectie:

<!DOCTYPE html>
<html lang="nl">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Bekijk onze uitstekende klantbeoordelingen">
   <title>Vijf Sterren Beoordelingen</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
   <style>
       .review-badge {
           transition: all 0.3s ease;
           border: 1px solid rgba(229, 231, 235, 1); /* Subtiele border */
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
           position: relative;
           top: -10px; /* Omhoog gezet */
       }
       .review-badge:hover {
           transform: translateY(-3px);
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
           border-color: rgba(209, 213, 219, 1);
       }
       .star-container {
           background: linear-gradient(135deg, rgba(255,236,170,0.2) 0%, rgba(255,255,255,1) 100%);
           border-radius: 9999px 0 0 9999px;
           padding-left: 0.5rem;
           margin-left: -0.25rem;
       }
       .pulse-animation {
           animation: pulse 3s infinite;
       }
       @keyframes pulse {
           0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
           70% { box-shadow: 0 0 0 6px rgba(255, 215, 0, 0); }
           100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
       }
       /* Dynamische fontgrootte voor verschillende schermformaten */
       @media (max-width: 640px) {
           .responsive-text { font-size: 0.75rem; }
           .responsive-stars { font-size: 0.8rem; }
       }
       @media (min-width: 641px) and (max-width: 768px) {
           .responsive-text { font-size: 0.85rem; }
           .responsive-stars { font-size: 0.9rem; }
       }
       /* Verbeterde animaties */
       .star-twinkle {
           animation: twinkle 1.5s infinite;
           animation-delay: calc(var(--star-index) * 0.3s);
       }
       @keyframes twinkle {
           0%, 100% { opacity: 1; transform: scale(1); }
           50% { opacity: 0.8; transform: scale(1.1); }
       }
   </style>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100 p-0 m-0">
   <!-- Verbeterde reviews badge met link naar reviews pagina -->
   <a href="#reviews" class="review-badge bg-white rounded-full px-3 py-1.5 flex items-center space-x-1.5 max-w-full mx-2 no-underline" aria-label="Bekijk onze 14.000 vijf sterren beoordelingen">
       <div class="star-container flex p-1" aria-hidden="true">
           <i class="fas fa-star text-yellow-500 responsive-stars star-twinkle" style="--star-index: 1"></i>
           <i class="fas fa-star text-yellow-500 responsive-stars star-twinkle" style="--star-index: 2"></i>
           <i class="fas fa-star text-yellow-500 responsive-stars star-twinkle" style="--star-index: 3"></i>
           <i class="fas fa-star text-yellow-500 responsive-stars star-twinkle" style="--star-index: 4"></i>
           <i class="fas fa-star text-yellow-500 responsive-stars star-twinkle" style="--star-index: 5"></i>
       </div>
       <span class="text-gray-800 font-medium responsive-text whitespace-nowrap overflow-hidden text-ellipsis">
           <span class="font-bold">14.000+</span> vijf sterren reviews
       </span>
       <i class="fas fa-chevron-right text-gray-400 text-xs responsive-stars ml-1"></i>
   </a>

   <!-- Schema.org markup -->
   <script type="application/ld+json">
   {
       "@context": "https://schema.org",
       "@type": "Product",
       "aggregateRating": {
           "@type": "AggregateRating",
           "ratingValue": "5",
           "reviewCount": "14000"
       }
   }
   </script>
</body>
</html>

‍

Over Diek Thunnissen

Al sinds mijn vijftiende bouw ik websites. Nu, 10+ jaar en 50+ projecten verder, combineer ik design, Shopify‑development en data‑gedreven marketing tot één 360° e‑commerce‑aanpak.

User Icon - Personalfolio X Webflow Template
Meer over mij

Populaire berichten

FAQ Sectie met Categorieën voor Shopify Thema

Hoe maak je desktop en mobiel video banner voor Shopify

Hoe maak je een sticky at to cart op Shopify

Upgrade je Shopify Dawn-thema Banner, zonder premium kosten!

Voeg je collectie beschrijving toe onder je product grid in Shopify (goed voor SEO)

Volg mij op social media

Check me op socials voor updates, tips en een kijkje achter de schermen.