> ## 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). # 📍 Wie man Free Shipping Bar in einer benutzerdefinierten Position platziert > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Hoppy Free Shipping bietet zwei primäre Platzierungstypen für die Free Shipping Bar: * 📌 Standardplatzierungen * 🧩 Zollstellen In den meisten Fällen funktionieren die Standardplatzierungsbereiche einwandfrei. Manchmal möchten Händler jedoch mehr Flexibilität und bevorzugen es, die Free Shipping Bar an einem völlig benutzerdefinierten Ort zu platzieren, abhängig von ihrem Storefront-Layout. Genau dort ist die **Zollstelle** Feature wird nützlich ✨ Mit Custom Position kann die Free Shipping Bar platziert werden: * Innen Shopify App Blöcke * Innerhalb der Custom Liquid Abschnitte * Inside Theme Files * Innerhalb von manuell gesteuerten Storefront-Standorten In dieser Dokumentation wird erläutert, wie Sie die benutzerdefinierte Position richtig aktivieren und wie Sie die kostenlose Versandleiste mit beiden verfügbaren Methoden platzieren können. --- # **⚠️ Workflow Unterschiede verstehen** Das Verhalten der benutzerdefinierten Position hängt vom Workflowtyp ab, der beim Erstellen des Free Shipping Upsell-Setups ausgewählt wurde. --- # **🎯 Basierend auf Zielen (Mehrfachplatzierung)** Die **Basierend auf Zielen** Der Workflow umfasst mehrere Platzierungsbereiche: * Produktseite * Warenkorbschublade * Warenkorbseite * Banner Für diesen Workflow: → Öffnen Sie den Platzierungs-Tab, den Sie anpassen möchten → Ändern Sie Ihre Platzierung auf **Zollstelle** Einmal aktiviert: → A **Versand Bar Code Snippet** wird verfügbar ⚠️ Wichtig: Der Platzierungs-Tab muss tatsächlich geändert werden **Zollstelle**. Andernfalls wird die Free Shipping Bar weiterhin das Standardplatzierungsverhalten verwenden. --- # **📍 Basierend auf Platzierung (Single Placement)** Die **Basierend auf Placement** Workflow kontrolliert nur einen Platzierungsbereich. Für diesen Workflow stehen zwei Custom Position Methoden zur Verfügung: 1. 🆔 Kennung der Versandstange 2. 🧩 Versand Bar Code Snippet --- ## **🆔 Kennung der Versandstange** Diese Methode wird hauptsächlich mit Shopify App Blocks. Die Shipping Bar ID verbindet den Storefront App Block mit dem ausgewählten Free Shipping Setup. --- ## **🧩 Versand Bar Code Snippet** Diese Methode bietet erweiterte Platzierung Flexibilität. Der Code Snippet kann sein: * In einem Custom Liquid Block hinzugefügt * Direkt hinzugefügt in Shopify Themendateien --- # **🛠️ Schritt 1 — Offen Hoppy Free Shipping** Offen **Hoppy Free Shipping** App von Deiner Shopify Admin. --- # **📂 Schritt 2 - Öffnen oder Erstellen eines kostenlosen Versand-Upsells** Sie können entweder: → Öffnen Sie ein bestehendes Free Shipping Upsell Setup Oder erstellen Sie ein neues Setup --- # **⚙️ Schritt 3 - Navigieren Sie zu den Platzierungseinstellungen** Der nächste Schritt hängt vom aktuell verwendeten Workflowtyp ab. --- ## **🎯 Basierend auf Zielen Workflow** Wenn Sie die **Basierend auf Zielen** Workflow: → Öffnen Sie den Platzierungs-Tab, auf dem Sie die Free Shipping Bar manuell platzieren möchten Beispiele: * Produktseite * Warenkorbschublade * Warenkorbseite * Banner --- ## **📍 Basierend auf Placement Workflow** Wenn Sie die **Basierend auf Placement** Workflow: → Navigieren Sie direkt zum **Platzierung** Spitze Da dieser Workflow nur eine Platzierung steuert, werden dort alle platzierungsbezogenen Einstellungen angezeigt. --- # **🎯 Schritt 4 — Änderung der Platzierung in Custom Position** Innerhalb der Placement-Einstellungen: → Ändern Sie die **Display On (Include)** oder **Platzierung** Option auf: **Zollstelle** Dann: → Klicken **Sparen** ⚠️ Wichtig: Durch das Aktivieren der benutzerdefinierten Position wird die kostenlose Versandleiste aus den Standardplatzierungsbereichen entfernt. Die kostenlose Versandleiste erscheint jetzt nur dort, wo Sie sie manuell platzieren. ℹ️ Bei Verwendung **Basierend auf Zielen** Workflow, gehen Sie zu **Methode 2**. --- # **🆔 Methode 1 — Verwendung von Shipping Bar ID** Diese Methode ist ideal, wenn Sie die Free Shipping Bar direkt mit ShopifyTheme Editor. ℹ️ Diese Methode ist hauptsächlich für die **Basierend auf Placement** Workflow. --- # **🎨 Schritt 5 — Öffnen Shopify Theme Editor** von Shopify Admin: → Gehen Sie nach **Verkaufskanäle → Online Store** → Klicken **Bearbeiten Theme** Dies öffnet die Shopify Theme Editor. --- # **➕ Schritt 6 - Fügen Sie den Free Shipping App Block hinzu** Im Theme Editor: → Navigieren Sie zu dem Abschnitt, in dem die Free Shipping Bar angezeigt werden soll → Bewegen Sie in kompatiblen Abschnitten, bis die blaue Farbe ➕ Icon erscheint → Klicken **Block hinzufügen** Dann: → Öffnen Sie die **Apps** Kategorie → auswählen **Kostenloser Versand Upsell** Der App-Block wird nun dem ausgewählten Storefront-Bereich hinzugefügt. --- # **🔗 Schritt 7 - Fügen Sie die Shipping Bar ID hinzu** Sobald der App-Block hinzugefügt wurde: → Geben Sie die Shipping Bar ID innerhalb der App Block-Einstellungen ein Dann: → Rettet die Shopify Thema → Speichern Sie das Free Shipping Setup im Inneren Hoppy Free Shipping auch ⚠️ Wichtig: Beide Saves sind erforderlich. Andernfalls erscheint die Free Shipping Bar möglicherweise nicht korrekt auf der Storefront. --- # **🧩 Methode 2 — Verwendung von Shipping Bar Code Snippet** Diese Methode ist nützlich, wenn Sie eine erweiterte Platzierungsflexibilität wünschen. Das Shipping Bar Code Snippet kann sein: * Hinzugefügt mit einem Custom Liquid Block * Direkt hinzugefügt in Shopify Themendateien ℹ️ Dies ist die einzige verfügbare Custom Position Methode für die **Basierend auf Zielen** Workflow. --- # **➕ Schritt 8 - Fügen Sie einen benutzerdefinierten Flüssigkeitsblock hinzu** Innen Shopify Theme Editor: → Navigieren Sie zu dem Bereich, in dem die Free Shipping Bar erscheinen soll → Bewegen Sie in kompatiblen Abschnitten, bis die blaue Farbe ➕ Icon erscheint → Suche nach **Custom Liquid** Dann: → Fügen Sie das Shipping Bar Code Snippet innerhalb des Custom Liquid Blocks hinzu Dies ermöglicht es der Free Shipping Bar, in der ausgewählten Storefront-Position zu rendern. --- # **💻 Hinzufügen des Code-Snippets direkt in Theme-Dateien** Bei Bedarf kann das Shipping Bar Code Snippet auch direkt in Shopify Themencodedateien. Dies ist nützlich, wenn: * App Blocks sind nicht verfügbar * Custom Liquid Abschnitte werden nicht unterstützt * Erweiterte Storefront-Anpassung ist erforderlich --- # **⚙️ Öffnung Shopify Code Editor** Um die Öffnung Shopify Code Editor: → Gehen Sie nach **Verkaufskanäle → Online Store** → Klicke auf das Drei-Punkte-Menü neben dem **Bearbeiten Theme** Taste → Klicken **Editcode** ⚠️ Wichtig: Wir empfehlen keine Änderung Shopify Themendateien, sofern nicht: * Sie fühlen sich wohl, wenn Sie mit Shopify Code * Oder Sie verstehen, welche Änderungen vorgenommen werden Falsche Änderungen im Inneren Theme-Dateien können das Storefront-Verhalten beeinflussen. --- # **🧩 Identifizieren Sie den richtigen Storefront-Bereich** Bevor Sie das Shipping Bar Code Snippet einfügen, ist es wichtig, den genauen Standort zu identifizieren, an dem die Free Shipping Bar erscheinen soll. Eine einfache Möglichkeit, dies zu tun: → Öffnen Sie Ihre Storefront im Browser → Rechtsklicken Sie in der Nähe des Bereichs, in dem Sie die kostenlose Versandbar wünschen → Klicken **Inspektion** Dies öffnet die Browser Developer Tools. Von dort aus: → Überprüfen Sie die umgebende HTML-Struktur → Identifizieren Sie nützliche Klassennamen oder Abschnittsreferenzen → Passen Sie diese Abschnitte mit den entsprechenden Shopify `.liquid` Dateien im Code Editor # Dies hilft Ihnen, die richtige Theme-Datei genauer zu finden ✨ # \--- # **🔍 Finden Sie die richtige Theme-Datei** Nach dem Öffnen des Shopify Code Editor: → Navigieren Sie durch die Theme-Dateien auf der linken Seite → Finden Sie die `.liquid` Datei, die für den Bereich verantwortlich ist, in dem die Free Shipping Bar erscheinen soll → Suchen Sie nach einer beliebigen ID/Klassenreferenz mit der Suchfunktion des Code Editors. → Klicken Sie auf die vielversprechendsten `.liquid` Datei Zum Beispiel: * Produktbezogene Abschnitte können innerhalb von: * `main-product.liquid` * `product-template.liquid` * Wagenbezogene Abschnitte können innerhalb vorhanden sein: * `cart.liquid` * `cart-drawer.liquid` * Benutzerdefinierte Abschnitte können innerhalb vorhanden sein: * `sections/*.liquid` --- # **➕ Hinzufügen des Shipping Bar Code Snippet** Einmal richtig `.liquid` Datei wird identifiziert: → Fügen Sie das Shipping Bar Code Snippet an der gewünschten Position innerhalb der Datei ein ⚠️ Wichtig: Stellen Sie sicher, dass das Snippet sorgfältig an der richtigen Stelle hinzugefügt wird. Falsche Platzierung kann dazu führen: * Layoutprobleme * Falsche Darstellung * Unerwartetes Storefront-Verhalten --- # **💾 Speichern Sie die Theme File** Nach dem Einfügen des Code-Snippets: → Klicken **Sparen** Dann: → Aktualisieren Sie die Storefront-Vorschau → Vergewissern Sie sich, dass die kostenlose Versandleiste an der ausgewählten benutzerdefinierten Stelle korrekt angezeigt wird ✨ --- # **🎉 Endergebnis** Einmal erfolgreich konfiguriert: ✅ Die Free Shipping Bar kann in vollständig benutzerdefinierten Storefront-Positionen erscheinen ✅ Shopify App-Blöcke können sich mit der Shipping Bar ID korrekt verbinden ✅ Erweiterte Storefront-Platzierung wird mit Code Snippets möglich ✅ Händler gewinnen viel mehr Flexibilität über Storefront Sichtbarkeit ✨