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

Met de functie Custom Position kunt u de Currency Converter precies plaatsen waar u het wilt op uw storefront.

In plaats van het gebruik van de standaard drijvende of header posities, kunt u de Currency Converter aan een specifiek element in uw Shopify thema met een CSS selector.

Dit geeft u meer flexibiliteit en helpt de Currency Converter te mengen natuurlijk in het ontwerp van uw winkel. 🎯

⚠️ Voordat u begint

Controleer voordat u een aangepaste positie instelt:

• Hoppy Currency Converter is geïnstalleerd en geconfigureerd
• Het insluiten van de App is ingeschakeld
• Aan boord is voltooid
• Je weet waar je zou willen dat de valuta Converter te verschijnen

💡 Gemeenschappelijke locaties omvatten navigatiebalken, headers, zijbalken, utility menu's, en aangepaste storefront secties.

✅ Stap 1: Weergaveinstellingen openen

Open de Hoppy Currency Converter app van uw Shopify Admin.

Dan:

→ Naar Instellingen

→ Klik Beeldscherm

Zoek:

• Bureaubladpositie
• Mobiele positie

U kunt een aangepaste positie apart instellen voor desktop- en mobiele apparaten.

✅ Stap 2: Selecteer aangepaste positie

Onder Positiestijl, zie je de beschikbare plaatsing opties.

Beschikbare positiestijlen

Zwevend

Toont de valuta Converter als een drijvende widget op de storefront.

Kop

Plaatst de valuta converter in de winkel header.

Eigen positie

Plaatst de Currency Converter in een specifiek element geselecteerd door u.

Selecteer:

→ Eigen positie

Eenmaal geselecteerd, worden extra instellingen automatisch beschikbaar.

✅ Stap 3: Voer het doelelement in

Binnen de Aangepast element veld, voer de CSS-selector in van het element waar de valutaomvormer moet verschijnen.

Ondersteunde selectietypes

Klasseselectie

Begint met een periode (.)

Voorbeeld

.header-actions

ID-selectie

Begint met een hash (#)

Voorbeeld

#currency-wrapper

Elementselectie

Gebruikt de HTML-elementnaam direct.

Voorbeeld

header

🔍 Een selectie zoeken

Als u niet zeker weet welke selector u moet gebruiken:

1. Open je winkel.
2. Klik met de rechtermuisknop op het gebied waar u de valuta converter wilt.
3. Klik Controleren.
4. Zoek het HTML-element.
5. Rechtsklik op het element.
6. Selecteren Kopiëren → Kopiëren-selector.
7. Plak de gekopieerde selectie in de Aangepast element veld.

Voorbeeld

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

⚠️ Vermijd tijdelijk gebruik Shopify-gegenereerde ID's, aangezien deze kunnen veranderen na thema-updates.

Waar mogelijk wordt het gebruik van stabiele klassenamen aanbevolen.

✅ Stap 4: Plaatsing kiezen

Na het invoeren van de selectie, kies hoe de valuta Converter moet worden ingevoegd ten opzichte van dat element.

Beschikbare plaatsingsopties

Voor

Plaatst de Currency Converter onmiddellijk voor het geselecteerde element.

Voorbeeld

Als het gericht is op een karpictogram:

→ De Valuta Converter lijkt aan de linkerkant van de winkelwagen pictogram.

Na

Plaatst de Currency Converter onmiddellijk na het geselecteerde element.

Voorbeeld

Indien gericht op een logo:

→ De Currency Converter lijkt rechts van het logo.

Voegen

Plaatst de Currency Converter in het geselecteerde element, aan het einde.

Voorbeeld

Bij het richten op een navigatiecontainer:

→ De valuta Converter verschijnt na alle bestaande navigatie-items.

💡 Dit is vaak de beste startoptie voor de meeste thema's.

Prepend

Plaatst de Currency Converter in het geselecteerde element, aan het begin.

Voorbeeld

Bij het richten op een navigatiecontainer:

→ De Valuta Converter verschijnt voor alle bestaande navigatie-items.

✅ Stap 5: Uw wijzigingen opslaan

Zodra de keuze- en plaatsingsoptie is ingesteld:

→ Klik Opslaan

De Currency Converter zal nu proberen te renderen in de geselecteerde locatie.

✅ Stap 6: Controleer de plaatsing

Bezoek uw winkel en bevestig dat de valuta Converter verschijnt op de gewenste locatie.

Indien niet blijkt:

• Controleer of de selectie juist is
• Bevestig het element bestaat op de pagina
• Probeer een andere plaatsingsoptie
• Pagina vernieuwen

💡 Een harde verfrissen is vaak nuttig na het maken van plaatsing wijzigingen.

🛠️ Alternatieve methode: handmatige plaatsing

Als het gebruik van een CSS selector is niet geschikt voor uw thema, kunt u handmatig plaats de valuta Converter met behulp van de code knipsel.

Deze methode is nuttig wanneer:

• U wilt volledige controle over waar de valuta Converter verschijnt.
• Uw thema bevat geen geschikt element om te richten met Eigen positie.
• Je bent comfortabel het maken van kleine thema aanpassingen.

Stap 1: Kopieer de Valuta Converter Code Snippet

Open de Hoppy Currency Converter app van uw Shopify Admin.

Dan:

→ Naar Geavanceerd

Zoeken:

→ Valuta Converter Box Plaatsing

Kopieer de meegeleverde code knipsel van onze app of hieronder:

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

Dit is het knipsel dat u plaatst waar u wilt dat de valuta Converter te verschijnen.

Stap 2: Voeg het Snippet toe aan uw thema

Optie A: Gebruik van een aangepaste vloeistofblok

Van de Shopify Thema-editor:

→ Navigeer naar de sectie waar u wilt dat de valuta Converter te verschijnen.

→ Klik op de ➕ Blok toevoegen Button.

→ Zoek en voeg een Aangepast vloeibaar Blok.

→ Plak de Valuta Converter Code Snippet in de Custom Liquid blok.

→ Klik Opslaan.

Optie B: Themabestanden bewerken

Voor geavanceerde storefront aanpassing, kunt u ook dezelfde code knipsel direct aan uw Shopify themabestanden.

Ga naar:

Online Store → Thema's

→ Klik op de Wat? menu naast Thema bewerken

→ selecteren Code bewerken

Zoek de juiste .liquid bestand voor de sectie waar u wilt dat de valuta Converter verschijnen, plak dan de valuta Converter Code Snippet op de gewenste locatie.

⚠️ Belangrijk:

Deze methode is bedoeld voor handelaren comfortabel bewerken Shopify themacode. Wij raden het dupliceren van uw thema voor het maken van wijzigingen, omdat onjuiste wijzigingen van invloed kunnen zijn op uw storefront layout of functionaliteit.

Selectie moet bestaan op de pagina

Als het geselecteerde element alleen bestaat op bepaalde pagina's, zal de Currency Converter alleen op die pagina's verschijnen.

Het gebruik van globale header of navigatie selectoren biedt meestal de beste resultaten.

Verborgen elementen De converter verbergen

Als het geselecteerde element wordt verborgen door het thema op bepaalde apparaten, zal de Valuta Converter ook worden verborgen.

Test altijd zowel desktop als mobiele lay-outs.

Je kunt altijd terug wisselen

Indien aangepaste positie niet langer nodig is:

→ Terug naar Instellingen tonen

→ Wijziging Positiestijl terug naar:

• Zwevend
• Kop

Er is geen extra configuratie vereist.

🎉 Eindresultaat

Eenmaal succesvol geconfigureerd:

✅ De valuta converter verschijnt precies waar u het wilt

✅ Bureaublad en mobiele lay-outs kunnen verschillende plaatsingen gebruiken

✅ Het widget past natuurlijk in uw storefront ontwerp

✅ Plaatsing kan worden aangepast zonder het bewerken van themabestanden

✅ Geavanceerde handelaren kunnen de converter handmatig plaatsen met behulp van Custom Liquid of Thema bestanden voor volledige controle

Met behulp van Custom Position helpt het creëren van een meer naadloze en professionele storefront ervaring, terwijl het houden van de Currency Converter gemakkelijk toegankelijk voor shoppers. 🎯

Bijgewerkt op: 10/09/2026