ℹ️ 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 ✨

Aktualisiert am: 10/09/2026