ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Mit der Custom Position-Funktion können Sie den Currency Converter genau dort platzieren, wo Sie ihn auf Ihrer Storefront haben möchten.

Anstatt die Standard-Floating- oder Header-Positionen zu verwenden, können Sie den Currency Converter an ein bestimmtes Element in Ihrem System anhängen. Shopify Theme mit einem CSS-Selektor.

Dies gibt Ihnen mehr Flexibilität und hilft dem Currency Converter, sich auf natürliche Weise in das Design Ihres Shops einzufügen. 🎯

⚠️ Bevor Sie beginnen

Bevor Sie eine benutzerdefinierte Position festlegen, stellen Sie sicher:

• Hoppy Currency Converter ist installiert und konfiguriert
• Das App Embed ist aktiviert
• Onboarding ist abgeschlossen
• Sie wissen, wo Sie möchten, dass der Currency Converter erscheint

💡 Gemeinsame Standorte umfassen Navigationsleisten, Header, Sidebars, Utility-Menüs und benutzerdefinierte Storefront-Abschnitte.

✅ Schritt 1: Offene Anzeigeeinstellungen

Offen Hoppy Currency Converter App von Deiner Shopify Admin.

Dann:

→ Gehen Sie nach Einstellungen

→ Klicken Anzeige

entweder

• Desktop-Position
• bewegliche Position

Sie können die benutzerdefinierte Positionierung separat für Desktop- und Mobilgeräte konfigurieren.

✅ Schritt 2: Wählen Sie die Custom Position

Unter PositionsstilSie sehen die verfügbaren Platzierungsoptionen.

Verfügbare Positionsstile

Schwimmen

Zeigt den Currency Converter als Floating Widget auf der Storefront an.

Kopfzeile

Platziert den Currency Converter im Store Header.

Zollstelle

Platziert den Währungskonverter innerhalb eines bestimmten von Ihnen ausgewählten Elements.

Auswählen:

→ Zollstelle

Einmal ausgewählt, stehen automatisch zusätzliche Einstellungen zur Verfügung.

✅ Schritt 3: Geben Sie das Zielelement ein

Innerhalb der Custom Element Geben Sie den CSS-Selektor des Elements ein, in dem der Currency Converter erscheinen soll.

Unterstützte Selector-Typen

Klassenwähler

Beginnt mit einer Periode ().)

Beispiel

.header-actions

ID-Auswahl

Beginnt mit einem Hash ()#)

Beispiel

#currency-wrapper

Elementauswahl

Verwendet den HTML-Elementnamen direkt.

Beispiel

header

🔍 Wie man einen Selector findet

Wenn Sie unsicher sind, welchen Selektor Sie verwenden möchten:

1. Öffnen Sie Ihre Storefront.
2. Klicken Sie mit der rechten Maustaste auf den Bereich, in dem Sie den Currency Converter wünschen.
3. Klicken Inspektion.
4. Suchen Sie das HTML-Element.
5. Rechtsklick auf das Element.
6. Wählen Copy → Copy Selector.
7. Fügen Sie den kopierten Selektor in die Custom Element Feld.

Beispiel

#block-template--166120#######__banner_bckcpm-video_CLEttT > div.media-with-text__content.rounded.text-custom > div > a

⚠️ Vermeiden Sie temporäre Shopify-generierte IDs, da sich diese nach Theme-Updates ändern können.

Die Verwendung stabiler Klassennamen wird empfohlen, wann immer dies möglich ist.

✅ Schritt 4: Positionsplatzierung auswählen

Wählen Sie nach Eingabe des Selektors aus, wie der Währungskonverter relativ zu diesem Element eingefügt werden soll.

Verfügbare Platzierungsoptionen

Vorher

Platziert den Währungskonverter unmittelbar vor dem ausgewählten Element.

Beispiel

Wenn Sie ein Warenkorbsymbol anvisieren:

→ Der Currency Converter erscheint links vom Warenkorbsymbol.

Nach

Platziert den Währungskonverter unmittelbar nach dem ausgewählten Element.

Beispiel

Wenn Sie ein Logo anvisieren:

→ Der Currency Converter erscheint rechts neben dem Logo.

Anlage

Platziert den Währungskonverter innerhalb des ausgewählten Elements am Ende.

Beispiel

Wenn Sie einen Navigationscontainer anvisieren:

→ Der Currency Converter erscheint nach allen vorhandenen Navigationselementen.

💡 Dies ist oft die beste Startoption für die meisten Themen.

Prepend

Platziert den Währungskonverter innerhalb des ausgewählten Elements, am Anfang.

Beispiel

Wenn Sie einen Navigationscontainer anvisieren:

→ Der Currency Converter erscheint vor allen vorhandenen Navigationselementen.

✅ Schritt 5: Speichern Sie Ihre Änderungen

Sobald die Auswahl- und Platzierungsoption konfiguriert wurde:

→ Klicken Sparen

Der Currency Converter wird nun versuchen, an dem ausgewählten Ort zu rendern.

✅ Schritt 6: Überprüfen Sie die Platzierung

Besuchen Sie Ihre Storefront und bestätigen Sie, dass der Currency Converter an der gewünschten Stelle erscheint.

Wenn es nicht erscheint:

• Überprüfen Sie, ob der Selektor korrekt ist
• Bestätigen Sie, dass das Element auf der Seite vorhanden ist
• Versuchen Sie eine andere Platzierungsoption
• Aktualisieren Sie die Seite

💡 Eine harte Aktualisierung ist oft hilfreich, nachdem Platzierungsänderungen vorgenommen wurden.

🛠️ Alternative Methode: Manuelle Platzierung

Wenn die Verwendung eines CSS-Selektors nicht für Ihr Theme geeignet ist, können Sie den Currency Converter manuell mit seinem Code-Snippet platzieren.

Diese Methode ist nützlich, wenn:

• Sie wollen die vollständige Kontrolle darüber, wo der Currency Converter erscheint.
• Ihr Theme enthält kein geeignetes Element, mit dem Sie zielen können Zollstelle.
• Sie fühlen sich wohl dabei, kleinere Theme-Anpassungen vorzunehmen.

Schritt 1: Kopieren Sie den Currency Converter Code Snippet

Offen Hoppy Currency Converter App von Deiner Shopify Admin.

Dann:

→ Gehen Sie nach Fortgeschritten

Standort:

→ Platzierung von Currency Converter Box

Kopieren Sie den bereitgestellten Code-Snippet aus unserer App oder unten:

<div class="futureblink-currency-box"></div>

Dies ist der Snippet, den Sie platzieren, wo immer Sie den Währungskonverter sehen möchten.

Schritt 2: Fügen Sie das Snippet zu Ihrem Thema hinzu

Option A — Verwendung eines Custom Liquid Blocks

Aus dem Shopify Theme Editor:

→ Navigieren Sie zu dem Abschnitt, in dem der Währungskonverter angezeigt werden soll.

→ Klicken Sie auf ➕ Block hinzufügen Knopf.

→ Suchen und Hinzufügen eines Custom Liquid Block.

→ Fügen Sie den Currency Converter Code Snippet in den Custom Liquid Block ein.

→ Klicken Sparen.

Option B — Themendateien bearbeiten

Für eine erweiterte Storefront-Anpassung können Sie auch den gleichen Code-Snippet direkt zu Ihrem Shopify Themendateien.

Gehen Sie zu:

Online-Shop → Themen

→ Klicken Sie auf ⋯ Menü nebenan Bearbeiten Theme

→ auswählen Editcode

Suchen Sie die passende .liquid Datei für den Abschnitt, in dem der Currency Converter angezeigt werden soll, und fügen Sie dann den Currency Converter Code Snippet an der gewünschten Stelle ein.

⚠️ Wichtig:

Diese Methode ist für Händler gedacht komfortable Bearbeitung Shopify Themencode. Wir empfehlen, Ihr Theme vor Änderungen zu duplizieren, da falsche Änderungen Ihr Storefront-Layout oder Ihre Funktionalität beeinträchtigen können.

Selector muss auf der Seite vorhanden sein

Wenn das ausgewählte Element nur auf bestimmten Seiten existiert, wird der Währungskonverter nur auf diesen Seiten angezeigt.

Die Verwendung von Global Header oder Navigationsselektoren liefert normalerweise die besten Ergebnisse.

Versteckte Elemente Verstecken Sie den Converter

Wenn das ausgewählte Element durch das Theme auf bestimmten Geräten ausgeblendet wird, wird auch der Currency Converter ausgeblendet.

Testen Sie immer sowohl Desktop- als auch mobile Layouts.

Sie können jederzeit umschalten

Wenn Custom Position nicht mehr benötigt wird:

→ Zurück zum Anzeigeeinstellungen

→ Veränderung Positionsstil zurück zu:

• Schwimmen
• Kopfzeile

Es ist keine zusätzliche Konfiguration erforderlich.

🎉 Endergebnis

Einmal erfolgreich konfiguriert:

✅ Der Currency Converter erscheint genau dort, wo Sie es wollen

✅ Desktop- und mobile Layouts können unterschiedliche Platzierungen verwenden

✅ Das Widget fügt sich natürlich in Ihr Storefront-Design ein

✅ Platzierung kann angepasst werden, ohne Theme-Dateien zu bearbeiten

✅ Fortgeschrittene Händler können den Konverter mit Custom Liquid- oder Theme-Dateien zur vollständigen Kontrolle manuell platzieren

Die Verwendung von Custom Position hilft dabei, ein nahtloseres und professionelleres Storefront-Erlebnis zu schaffen, während der Currency Converter für Käufer leicht zugänglich bleibt. 🎯

Aktualisiert am: 10/09/2026