Optimaliseer je Shopify met een Dynamische Order Tracker

In deze blogpost laat ik je zien hoe je een professionele, dynamische order tracker direct in je Shopify product template kunt integreren als een custom liquid block. Deze tracker berekent automatisch de verzend- en leverdata op basis van je bedrijfsregels, inclusief de "voor 17:00 besteld, vandaag verzonden" functionaliteit.

Stap 1: Inloggen op je Shopify admin

• Log in op je Shopify admin dashboard
• Navigeer naar "Online Store" > "Themes"
• Klik op "Customize" bij je huidige thema

Stap 2: Ga naar je product template

• Selecteer in de Theme Editor een productpagina uit het dropdown menu bovenaan
• Je wordt nu naar de editor voor de productpagina gebracht

Stap 3: Voeg een Custom Liquid block toe

1. Zoek de sectie waar je de order tracker wilt toevoegen (vaak onder de productbeschrijving of boven de "Add to cart" knop)
2. Klik op deze sectie en zoek de optie om een block toe te voegen
3. Klik op "Add block"
4. Selecteer "Custom liquid" uit de lijst met beschikbare blocks

Stap 4: Voeg de code toe

Kopieer en plak de volgende code in het tekstveld van het Custom Liquid block:

<!-- BEGIN Custom Liquid -->
<div id="diek-order-tracker" class="diek-tracker-container">
 <style>
   #diek-order-tracker {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     box-sizing: border-box;
     margin: 20px 0;
   }
   
   #diek-order-tracker * {
     box-sizing: border-box;
   }
   
   .diek-tracker-container {
     width: 100%;
     max-width: 100%;
   }
   
   .diek-tracker-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
   }
   
   .diek-tracker-title {
     font-size: 16px;
     font-weight: 600;
     color: #000000;
   }
   
   .diek-guarantee {
     display: flex;
     align-items: center;
     font-size: 12px;
     color: #000000;
     background-color: rgba(0, 0, 0, 0.1);
     padding: 4px 8px;
     border-radius: 4px;
   }
   
   .diek-guarantee i {
     margin-right: 5px;
   }
   
   .diek-tracker-blocks {
     display: flex;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
   }
   
   .diek-tracker-block {
     flex: 1;
     padding: 15px 10px;
     text-align: center;
     position: relative;
   }
   
   .diek-tracker-block:not(:last-child) {
     border-right: 1px solid #f0f0f0;
   }
   
   .diek-tracker-icon {
     color: #000000;
     margin-bottom: 8px;
     font-size: 22px;
   }
   
   .diek-tracker-label {
     color: #000000;
     font-weight: 600;
     font-size: 13px;
     margin-bottom: 5px;
   }
   
   .diek-tracker-date {
     color: #666;
     font-size: 12px;
   }
   
   .diek-tracker-note {
     background-color: rgba(0, 0, 0, 0.08);
     border-radius: 6px;
     padding: 8px 12px;
     font-size: 12px;
     color: #000000;
     margin-top: 10px;
   }
 </style>

 <div class="diek-tracker-header">
   <div class="diek-tracker-title">Uw bestelling</div>
   <div class="diek-guarantee">
     <i class="fas fa-check-circle"></i> Bezorggarantie
   </div>
 </div>

 <div class="diek-tracker-blocks">
   <div class="diek-tracker-block">
     <div class="diek-tracker-icon">
       <i class="fas fa-shopping-cart"></i>
     </div>
     <div class="diek-tracker-label">Bestelling geplaatst</div>
     <div id="diek-order-date" class="diek-tracker-date">Laden...</div>
   </div>
   
   <div class="diek-tracker-block">
     <div class="diek-tracker-icon">
       <i class="fas fa-truck"></i>
     </div>
     <div class="diek-tracker-label">Verzonden</div>
     <div id="diek-dispatch-date" class="diek-tracker-date">Laden...</div>
   </div>
   
   <div class="diek-tracker-block">
     <div class="diek-tracker-icon">
       <i class="fas fa-home"></i>
     </div>
     <div class="diek-tracker-label">Bezorgd</div>
     <div id="diek-delivery-date" class="diek-tracker-date">Laden...</div>
   </div>
 </div>
 
 <div class="diek-tracker-note">
   <i class="fas fa-info-circle"></i> Bestellingen op werkdagen voor 17:00 worden dezelfde dag verzonden.
 </div>

 <script>
   (function() {
     // Functie om de datum te formatteren naar 'DD MMM' formaat in het Nederlands
     function formatDate(date) {
       const months = ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
       const day = date.getDate();
       const month = months[date.getMonth()];
       return `${day} ${month}`;
     }

     // Functie om werkdagen toe te voegen (slaat weekend over)
     function addBusinessDays(date, days) {
       let result = new Date(date);
       let daysAdded = 0;
       
       while (daysAdded < days) {
         result.setDate(result.getDate() + 1);
         // Check of het geen weekend is (0 = zondag, 6 = zaterdag)
         if (result.getDay() !== 0 && result.getDay() !== 6) {
           daysAdded++;
         }
       }
       
       return result;
     }

     function updateDates() {
       try {
         // Huidige datum en tijd voor bestelling
         const today = new Date();
         
         // Verzendingsdatum bepalen
         let dispatchDate;
         const currentHour = today.getHours();
         const currentDay = today.getDay(); // 0 (zondag) tot 6 (zaterdag)
         const isBusinessDay = currentDay !== 0 && currentDay !== 6;
         const isBeforeCutoff = currentHour < 17;
         
         if (isBusinessDay && isBeforeCutoff) {
           // Voor 17:00 op een werkdag: vandaag verzonden
           dispatchDate = new Date(today);
         } else if (isBusinessDay && !isBeforeCutoff) {
           // Na 17:00 op een werkdag: morgen verzonden (mits geen weekend)
           dispatchDate = new Date(today);
           dispatchDate.setDate(dispatchDate.getDate() + 1);
           
           // Als morgen weekend is, dan maandag
           if (dispatchDate.getDay() === 0 || dispatchDate.getDay() === 6) {
             while (dispatchDate.getDay() === 0 || dispatchDate.getDay() === 6) {
               dispatchDate.setDate(dispatchDate.getDate() + 1);
             }
           }
         } else {
           // Weekend: verzending op maandag
           dispatchDate = new Date(today);
           while (dispatchDate.getDay() === 0 || dispatchDate.getDay() === 6) {
             dispatchDate.setDate(dispatchDate.getDate() + 1);
           }
         }
         
         // Levering is 1-2 werkdagen na verzending
         const deliveryStartDate = addBusinessDays(dispatchDate, 1);
         const deliveryEndDate = addBusinessDays(dispatchDate, 2);
         
         // Datums bijwerken
         document.getElementById('diek-order-date').textContent = formatDate(today);
         document.getElementById('diek-dispatch-date').textContent = formatDate(dispatchDate);
         document.getElementById('diek-delivery-date').textContent =
           `${formatDate(deliveryStartDate)} - ${formatDate(deliveryEndDate)}`;
       } catch (e) {
         console.error("Error updating dates:", e);
       }
     }
     
     // Direct de datums bijwerken bij het laden
     updateDates();
   })();
 </script>
 
 <!-- Font Awesome alleen toevoegen als het nog niet geladen is -->
 <script>
   if (!document.getElementById('font-awesome-diek')) {
     var fa = document.createElement('link');
     fa.id = 'font-awesome-diek';
     fa.rel = 'stylesheet';
     fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css';
     fa.type = 'text/css';
     document.head.appendChild(fa);
   }
 </script>
</div>
<!-- END Custom Liquid -->

‍

‍

Stap 5: Opslaan en controleren

1. Klik op "Save" om je wijzigingen op te slaan
2. Bekijk je productpagina om te zien hoe de order tracker er uitziet
3. Vernieuw de pagina op verschillende tijden van de dag om te zien hoe de datums en meldingen veranderen

Wat maakt deze order tracker bijzonder?

Deze custom liquid block bevat alles wat je nodig hebt in één pakket:

1. Volledige styling: Geen externe CSS vereist, alle opmaak is ingebouwd
2. Emoji's in plaats van Font Awesome: Geen extra libraries nodig
3. Dynamische datumberekening:
   • Voor 17:00 op werkdagen: verzending dezelfde dag
   • Na 17:00 of in het weekend: verzending volgende werkdag
   • Zondagen worden automatisch overgeslagen
4. Urgentie-aanduiding: Toont hoeveel tijd klanten nog hebben om te bestellen voor verzending op dezelfde dag

Aanpassingen voor je eigen webshop

Andere verzendtijden

Zoek in de JavaScript-code naar const isBeforeCutoff = currentHour < 17; en wijzig het getal 17 naar jouw cut-off tijd.

Vertalen naar Nederlands

Je kunt eenvoudig de Engelse teksten aanpassen naar Nederlands:

1. Verander "Order placed" naar "Bestelling geplaatst"
2. Verander "Dispatched" naar "Verzonden"
3. Verander "Delivered" naar "Bezorgd"

Andere bezorgdagen

Als je bezorgtijden anders zijn, pas dan deze regel aan:

‍

const deliveryEndDate = addBusinessDays(dispatchDate, 2);

Verhoog het getal 2 naar 3, 4 of hoger als je bezorging langer duurt.

Voordelen van deze implementatie

1. Geen maandelijkse kosten: Geen dure apps nodig
2. Volledig aanpasbaar: Je hebt volledige controle over alle aspecten
3. Laadsnelheid: Minimale impact op je pagina's prestaties
4. Eenvoudig onderhoud: Alles staat in één custom liquid block

Door deze dynamische order tracker toe te voegen aan je productpagina's, geef je klanten duidelijke informatie over wanneer ze hun aankoop kunnen verwachten. Dit verbetert niet alleen de klantenervaring, maar kan ook je conversiepercentage verhogen door het creëren van een gevoel van urgentie met de "voor 17:00 besteld" melding.

Probeer het vandaag nog uit in je Shopify winkel!

‍