ℹ️ Note: Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Hoppy Free Shipping biedt twee primaire plaatsingstypen voor de Free Shipping Bar:

• 📌 Standaardinstellingen
• 🧩 Aangepaste plaatsen

In de meeste gevallen werken de standaard plaatsingsgebieden perfect.

Echter, soms handelaren kunnen willen meer flexibiliteit en de voorkeur het plaatsen van de Free Shipping Bar in een volledig aangepaste locatie, afhankelijk van hun storefront lay-out.

Dat is precies waar de Eigen positie functie wordt nuttig ✨

Met behulp van aangepaste positie, kan de Gratis Verzendbar worden geplaatst:

• Binnen Shopify Appblokken
• Binnen aangepaste vloeibare secties
• Binnen Themabestanden
• Binnen handbediende opslaglocaties

Deze documentatie legt uit hoe u Custom Position correct inschakelt en hoe u de Free Shipping Bar plaatst met behulp van beide beschikbare methoden.

⚠️ Inzicht in workflow verschillen

De Custom Position gedrag is afhankelijk van het workflow type geselecteerd tijdens het creëren van de Free Shipping Upsell setup.

🎯 Gebaseerd op doelstellingen (meerdere plaatsing)

De Gebaseerd op doelstellingen workflow omvat meerdere plaatsingsgebieden:

• Productpagina
• Winkelwagenlade
• Winkelwagen pagina
• Banner

Voor deze workflow:

→ Open het plaatsingstabblad dat u wilt aanpassen
→ Verander zijn plaatsing in Eigen positie

Eenmaal ingeschakeld:

→ A Verzendbarcode Snippet beschikbaar komt

⚠️ Belangrijk:

Het plaatsingstabblad moet eigenlijk worden gewijzigd naar Eigen positie.

Anders zal de Free Shipping Bar doorgaan met het standaard plaatsingsgedrag.

📍 Gebaseerd op Plaatsing (Single Placement)

De Gebaseerd op Plaatsing workflow controleert slechts één plaatsingsgebied.

Voor deze workflow komen twee Custom Position methoden beschikbaar:

1. 🆔 Verzendbalk-ID
2. 🧩 Verzendbarcode Snippet

🆔 Verzendbalk-ID

Deze methode wordt voornamelijk gebruikt met Shopify App Blocks.

De Verzendbar ID verbindt de storefront App Block met de geselecteerde Gratis Verzending setup.

🧩 Verzendbarcode Snippet

Deze methode biedt meer geavanceerde plaatsing flexibiliteit.

De code knipsel kan zijn:

• Toegevoegd in een aangepaste vloeistofblok
• Rechtstreeks toegevoegd aan Shopify Themabestanden

🛠️ Stap 1 Openen Hoppy Free Shipping

Open de Hoppy Free Shipping app van uw Shopify Admin.

📂 Stap 2 Open of maak een gratis verzending Upsell

Je kunt ofwel:

→ Open een bestaande Free Shipping Upsell setup
→ Of maak een nieuwe setup

⚙️ Stap 3 Navigeer naar de instellingen van de plaatsing

De volgende stap hangt af van het workflowtype dat momenteel wordt gebruikt.

🎯 Gebaseerd op doelstellingen workflow

Als u de Gebaseerd op doelstellingen workflow:

→ Open het plaatsingstabblad waar u handmatig de Gratis Verzendbalk wilt plaatsen

Bijvoorbeeld:

• Productpagina
• Winkelwagenlade
• Winkelwagen pagina
• Banner

📍 Gebaseerd op Plaatsing workflow

Als u de Gebaseerd op Plaatsing workflow:

→ Navigeer direct naar de Plaatsing tab

Aangezien deze workflow slechts één plaatsing regelt, zullen alle plaatsingsgerelateerde instellingen daar verschijnen.

🎯 Stap 4 Verander Plaatsing naar aangepaste positie

In de instellingen van de plaatsing:

→ Wijzig de Weergave Aan (Inclusief) of Plaatsing optie om:

Eigen positie

Dan:

→ Klik Opslaan

⚠️ Belangrijk:

Het inschakelen van Custom Position verwijdert de Free Shipping Bar uit de standaard plaatsingsgebieden.

De Free Shipping Bar zal nu alleen verschijnen waar u handmatig plaatst.

ℹ️ Bij gebruik Gebaseerd op doelstellingen workflow, ga naar Methode 2.

🆔 Methode 1

Deze methode is ideaal wanneer u de Gratis Verzendbar direct met behulp van ShopifyThemaredacteur.

ℹ️ Deze methode is voornamelijk beschikbaar voor de Gebaseerd op Plaatsing workflow.

🎨 Stap 5 Openen Shopify Thema-editor

Van Shopify Beheerder:

→ Naar Verkoopkanalen → Online Store
→ Klik Thema bewerken

Dit opent de Shopify Themaredacteur.

➕ Stap 6 Toevoegen van de Gratis Verzenden App Block

In de thema-editor:

→ Navigeer naar de sectie waar u wilt dat de Vrije Verzendbar verschijnen
→ Zweven rond compatibele secties tot de blauw-gekleurde ➕ pictogram verschijnt
→ Klik Blok toevoegen

Dan:

→ Open de Apps categorie
→ selecteren Gratis verzending Upsell

Het App Block wordt nu toegevoegd aan het geselecteerde storefront gebied.

🔗 Stap 7

Zodra de App Block is toegevoegd:

→ Voer de verzendbalk-ID in binnen de instellingen van het appblok

Dan:

→ Sla de Shopify Thema
→ Bewaar de Free Shipping setup binnen Hoppy Free Shipping ook

⚠️ Belangrijk:

Beide reddingen zijn nodig.

Anders kan de Free Shipping Bar niet correct verschijnen op de storefront.

🧩 Methode 2

Deze methode is handig wanneer u meer geavanceerde plaatsing flexibiliteit wilt.

De Verzendbar Code Snippet kan zijn:

• Toegevoegd met behulp van een aangepaste vloeibare blok
• Rechtstreeks toegevoegd aan Shopify Themabestanden

ℹ️ Dit is de enige beschikbare Custom Position methode voor de Gebaseerd op doelstellingen workflow.

➕ Stap 8 toevoegen van een aangepaste vloeibare blok

Binnen Shopify Thema-editor:

→ Navigeer naar het gebied waar u wilt dat de Free Shipping Bar verschijnen
→ Zweven rond compatibele secties tot de blauw-gekleurde ➕ pictogram verschijnt
→ Zoek naar Aangepast vloeibaar

Dan:

→ Voeg de verzendbalkcode Snippet in het aangepaste vloeibare blok

Hierdoor kan de Free Shipping Bar in de geselecteerde storefront positie weergeven.

💻 Het toevoegen van de Code Snippet Direct in Themabestanden

Indien nodig, kan de Verzendbar Code Snippet ook direct worden toegevoegd aan Shopify Themacodebestanden.

Dit is handig wanneer:

• App-blokken zijn niet beschikbaar
• Aangepaste vloeibare secties worden niet ondersteund
• Geavanceerde storefront aanpassing is nodig

⚙️ Opening Shopify Codebewerker

Om de Shopify Code-editor:

→ Naar Verkoopkanalen → Online Store
→ Klik op het drie-dots menu naast de Thema bewerken knop
→ Klik Code bewerken

⚠️ Belangrijk:

Wij raden geen aanpassing aan Shopify Themabestanden tenzij:

• U bent comfortabel werken met Shopify code
• Of je begrijpt wat er veranderd wordt.

Onjuiste wijzigingen binnenin Themabestanden kunnen invloed hebben op storefront gedrag.

🧩 Identificeer het juiste opslaggebied

Voordat het invoegen van de Verzendbar Code Snippet, is het belangrijk om de exacte winkelplaats waar de Gratis Verzendbar moet verschijnen te identificeren.

Een simpele manier om dit te doen:

→ Open uw storefront in de browser
→ Klik met de rechtermuisknop in de buurt van het gebied waar u de Free Shipping Bar wilt
→ Klik Controleren

Dit opent de browser Ontwikkelaarsgereedschappen.

Vanaf daar:

→ Controleer de omliggende HTML-structuur
→ Identificeer nuttige klassenamen of sectieverwijzingen
→ Match die secties met de overeenkomstige Shopify .liquid bestanden in de code-editor

Dit helpt u het juiste themabestand nauwkeuriger te vinden ✨

---

🔍 Het juiste themabestand vinden

Na het openen van de Shopify Code-editor:

→ Navigeer door de Thema bestanden aan de linkerkant
→ Zoek de .liquid bestand verantwoordelijk voor het gebied waar u de Free Shipping Bar wilt laten verschijnen
→ Zoek naar een id/class referentie met behulp van de Code Editor
→ Klik op de meest veelbelovende .liquid bestand

Bijvoorbeeld:

• Productgerelateerde secties kunnen bestaan binnen:
• • main-product.liquid
  • product-template.liquid
• Cart-gerelateerde secties kunnen bestaan binnen:
• • cart.liquid
  • cart-drawer.liquid
• Aangepaste secties kunnen binnen bestaan:
• • sections/*.liquid

➕ De verzendbalkcode toevoegen

Zodra de juiste .liquid bestand is geïdentificeerd:

→ Plak de Verzendbalk Code Snippet in de gewenste positie in het bestand

⚠️ Belangrijk:

Zorg ervoor dat het knipsel zorgvuldig op de juiste locatie wordt toegevoegd.

Onjuiste plaatsing kan leiden tot:

• Opmaakproblemen
• Onjuiste weergave
• Onverwacht storefront gedrag

💾 Het themabestand opslaan

Na het invoegen van de code knipsel:

→ Klik Opslaan

Dan:

→ De storefront preview vernieuwen
→ Controleer of de gratis verzendbalk correct verschijnt in de geselecteerde aangepaste locatie ✨

🎉 Eindresultaat

Eenmaal succesvol geconfigureerd:

✅ De Free Shipping Bar kan verschijnen in volledig aangepaste storefront posities
✅ Shopify App Blocks kunnen correct verbinding maken met behulp van Verzendbalk ID
✅ Geavanceerde storefront plaatsing wordt mogelijk met Code Snippets
✅ Handelaren krijgen veel meer flexibiliteit over de zichtbaarheid aan de storefront ✨

Bijgewerkt op: 10/09/2026