Dynamische gratis verzending balk voor Shopify

Stappenplan: Dynamische Gratis Verzending Balk voor Shopify Thema

De DT Gratis Verzending balk geeft je klanten real-time informatie over hoeveel ze nog moeten besteden om in aanmerking te komen voor gratis verzending. Deze handleiding legt stap voor stap uit hoe je dit onderdeel kunt integreren in je Shopify theme.

Show Image

Wat doet deze feature?

• Toont hoeveel klanten nog moeten uitgeven om gratis verzending te krijgen
• Past zich automatisch aan wanneer klanten producten aan hun winkelwagen toevoegen of verwijderen
• Verandert naar een felicitatiebericht wanneer klanten de drempelwaarde bereiken
• Werkt in real-time zonder paginaverversing

Stap 1: Maak een nieuwe section file in je Dawn thema

1. Log in op je Shopify admin dashboard
2. Ga naar Online Store > Themes
3. Klik op de knop Actions bij je live thema en selecteer Edit code
4. In de linker zijbalk, onder de map Sections, klik op Add a new section
5. Noem het bestand dt-gratis-verzending.liquid
6. Kopieer en plak de volgende code in het bestand:

{% schema %}
{
  "name": "DT Gratis Verzending",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#212121"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "number",
      "id": "free_shipping_threshold",
      "label": "Free Shipping Threshold (in EUR)",
      "default": 150
    },
    {
      "type": "text",
      "id": "progress_message",
      "label": "Progress Message",
      "default": "Je bent nog €[amount] verwijderd van gratis verzending*"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Success Message",
      "default": "Gefeliciteerd! Je bestelling komt in aanmerking voor gratis verzending"
    },
    {
      "type": "text",
      "id": "static_message",
      "label": "Static Message (optional)",
      "default": "Gratis verzending voor alle bestellingen vanaf €150 in Nederland!*"
    },
    {
      "type": "checkbox",
      "id": "use_static_message",
      "label": "Use Static Message (instead of dynamic)",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "DT Gratis Verzending",
      "category": "Promotional"
    }
  ]
}
{% endschema %}

<style>
.dynamic-shipping-bar {
  background-color: {{ section.settings.background_color }};
  color: {{ section.settings.text_color }};
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  width: 100%;
}

.shipping-success-message,
.shipping-progress-message,
.shipping-static-message {
  transition: opacity 0.3s ease;
}

.hidden {
  display: none;
}
</style>

<div class="dynamic-shipping-bar" id="dynamic-shipping-bar">
  {% if section.settings.use_static_message %}
    <div class="shipping-static-message">
      {{ section.settings.static_message }}
    </div>
  {% else %}
    <div class="shipping-success-message hidden">
      {{ section.settings.success_message }}
    </div>
    <div class="shipping-progress-message">
      {{ section.settings.progress_message }}
    </div>
  {% endif %}
</div>

<script>
  (function() {
    // Configuratie-instellingen van de sectie ophalen
    const config = {
      threshold: {{ section.settings.free_shipping_threshold | json }},
      useStaticMessage: {{ section.settings.use_static_message | json }},
      progressMessage: {{ section.settings.progress_message | json }}
    };
    
    // Alleen actief als we niet in statische modus zitten
    if (!config.useStaticMessage) {
      // Initiële update bij pagina laden
      document.addEventListener('DOMContentLoaded', function() {
        updateShippingBar();
      });
      
      // Cart events voor verschillende Shopify thema's
      document.addEventListener('cart:refresh', updateShippingBar);
      document.addEventListener('cart:updated', updateShippingBar);
      
      // Directe Ajax cart implementaties
      if (typeof window.Shopify !== 'undefined' && window.Shopify.onCartUpdate) {
        const originalOnCartUpdate = window.Shopify.onCartUpdate;
        window.Shopify.onCartUpdate = function(cart) {
          if (typeof originalOnCartUpdate === 'function') {
            originalOnCartUpdate(cart);
          }
          updateShippingBarWithCart(cart);
        };
      }
      
      // Monitor cart form submissions en quantity wijzigingen
      monitorCartChanges();
    }
    
    function monitorCartChanges() {
      // Wacht even tot de pagina volledig is geladen
      setTimeout(function() {
        // Cart forms (toevoegen aan winkelwagen)
        document.querySelectorAll('form[action="/cart/add"]').forEach(form => {
          form.addEventListener('submit', function() {
            setTimeout(updateShippingBar, 500);
          });
        });
        
        // Quantity inputs
        document.querySelectorAll('input[name="updates[]"], [data-quantity-input]').forEach(input => {
          input.addEventListener('change', function() {
            setTimeout(updateShippingBar, 500);
          });
        });
        
        // Verwijder knoppen
        document.querySelectorAll('[data-cart-remove], .cart__remove, .cart-item__remove, [href*="/cart/change?"]').forEach(button => {
          button.addEventListener('click', function() {
            setTimeout(updateShippingBar, 500);
          });
        });
      }, 1000);
    }
    
    function updateShippingBar() {
      // Get current cart data through Shopify's cart API
      fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
          updateShippingBarWithCart(cart);
        })
        .catch(error => console.error('Error fetching cart:', error));
    }
    
    function updateShippingBarWithCart(cart) {
      const cartTotal = cart.total_price / 100; // Convert from cents to euros
      
      // Get elements
      const progressMessage = document.querySelector('.shipping-progress-message');
      const successMessage = document.querySelector('.shipping-success-message');
      
      // Calculate remaining amount to qualify for free shipping
      const remaining = Math.max(0, config.threshold - cartTotal);
      
      // Update message
      if (remaining > 0) {
        // Nog niet aan gratis verzending
        // Formatteer het bedrag
        const formattedRemaining = remaining.toFixed(2).replace('.', ',');
        
        // Vervang placeholder in originele template
        if (progressMessage) {
          progressMessage.textContent = config.progressMessage.replace('[amount]', formattedRemaining);
        }
        
        // Toon progress message, verberg success message
        if (progressMessage) progressMessage.classList.remove('hidden');
        if (successMessage) successMessage.classList.add('hidden');
      } else {
        // Komt in aanmerking voor gratis verzending!
        if (progressMessage) progressMessage.classList.add('hidden');
        if (successMessage) successMessage.classList.remove('hidden');
      }
    }
    
    // Periodieke refresh (voor het geval andere methoden niet werken)
    setInterval(updateShippingBar, 5000);
    
    // Start de initiële update
    updateShippingBar();
  })();
</script>

1. Klik op Save om het bestand op te slaan

Stap 2: Voeg de sectie toe aan je thema

Er zijn twee manieren om de DT Gratis Verzending balk aan je thema toe te voegen:

Via Theme Editor (aanbevolen voor Dawn)

1. Ga terug naar Online Store > Themes
2. Klik op de knop Customize bij je live thema
3. Zorg ervoor dat je op de Home page bent (of een andere pagina waar je de balk wilt tonen)
4. Klik in de linker zijbalk op Add section
5. Scroll naar beneden en zoek naar DT Gratis Verzending
6. Klik erop om het toe te voegen
7. Versleep de sectie naar de gewenste positie (meestal direct onder de header)
8. Configureer de instellingen naar wens (kleuren, drempelwaarde, berichten)
9. Klik op Save om de wijzigingen op te slaan

Stap 3: Configureer de gratis verzending balk

Wanneer je de sectie hebt toegevoegd, kun je de volgende instellingen configureren:

1. Achtergrondkleur - De kleur van de balk (standaard: donkergrijs)
2. Tekstkleur - De kleur van de tekst (standaard: wit)
3. Gratis verzending drempel - Het bedrag waarbij gratis verzending wordt aangeboden (standaard: €150)
4. Voortgangsbericht - Het bericht dat wordt getoond wanneer klanten nog meer moeten uitgeven
   • Gebruik [amount] als placeholder voor het resterende bedrag
   • Voorbeeld: "Je bent nog €[amount] verwijderd van gratis verzending*"
5. Succesbericht - Het bericht dat wordt getoond wanneer klanten de drempelwaarde hebben bereikt
   • Voorbeeld: "Gefeliciteerd! Je bestelling komt in aanmerking voor gratis verzending"
6. Statisch bericht - Optioneel bericht dat altijd wordt getoond, ongeacht het winkelwagenbedrag
7. Gebruik statisch bericht - Schakelaar om tussen dynamisch en statisch bericht te kiezen

Stap 4: Test de functionaliteit

1. Open je webwinkel in een nieuw tabblad
2. Controleer of de verzendingsbalk correct wordt weergegeven
3. Voeg een product toe aan je winkelwagen
4. Controleer of het bedrag in de balk correct wordt bijgewerkt
5. Voeg producten toe tot je boven de drempelwaarde komt
6. Controleer of het succesbericht verschijnt
7. Verwijder producten uit je winkelwagen
8. Controleer of het bericht terugkeert naar de voortgangsstatus

Probleemoplossing

Het bedrag wordt niet bijgewerkt

• Oplossing 1: Controleer of je de juiste placeholder [amount] gebruikt in het voortgangsbericht
• Oplossing 2: Ververs de pagina en leeg je browsercache
• Oplossing 3: Controleer de browser console op JavaScript-fouten

De balk verschijnt niet

• Oplossing 1: Controleer of je de sectie correct hebt toegevoegd aan je thema
• Oplossing 2: Zorg ervoor dat de sectie niet per ongeluk is verborgen in de theme editor
• Oplossing 3: Controleer of het bestand correct is opgeslagen in de sectie map

De balk werkt niet correct met het Ajax Cart systeem

• Oplossing 1: Zorg ervoor dat het Dawn thema up-to-date is
• Oplossing 2: Sommige aangepaste Ajax cart systemen vereisen specifieke aanpassingen - neem contact op met de ontwikkelaar van het thema als je problemen blijft ondervinden

Aanpassingsmogelijkheden

Deze gratis verzendingsbalk kan verder worden aangepast door ontwikkelaars:

• Voeg een voortgangsbalk toe om visueel te tonen hoe dichtbij de klant bij de drempelwaarde is
• Pas het design aan om het meer in lijn te brengen met je merkstijl
• Voeg extra animaties of effecten toe wanneer de drempelwaarde wordt bereikt

Compatibiliteit

Deze code is getest en werkt met:

• Shopify Dawn thema (standaard)
• De meeste moderne Shopify thema's
• Mobiele en desktop browsers