> ## 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). # 📍 So legen Sie eine benutzerdefinierte Position für den Währungskonverter fest > ℹ️ **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 **Positionsstil**Sie 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: `
` 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. 🎯