> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # πŸ“ Hoe te plaatsen Gratis Verzendbar in een aangepaste positie > ℹ️ **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 ✨