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

De sectie Design & Styling geeft u volledige controle over het uiterlijk van de Currency Converter op uw storefront.

Van vlagstijlen en typografie tot kleuren, randen en weergavevoorkeuren, deze instellingen helpen u een valuta Converter die voelt als een natuurlijk onderdeel van uw winkel met behoud van een soepele ervaring voor internationale shoppers.

⚠️ Voordat u begint

Om toegang te krijgen tot ontwerp- en stylinginstellingen:

→ Openen Hoppy Currency Converter

→ Voltooi het onboarding proces

→ Open de Ontwerp tab

💡 Alle ontwerpwijzigingen worden zichtbaar op de storefront na het opslaan.

🏳️ Aanpassen van vlag

Deze sectie bepaalt hoe vlaggen verschijnen in de hele valuta Converter.

Wijzigingen zijn van toepassing op:

• Het geselecteerde valutascherm
• De dropdown-valutalijst

🎨 Vlagstijl

Controleert de visuele verschijning van vlaggen.

Traditioneel

Toont standaard vlag afbeeldingen zonder extra styling.

Beste voor: Minimale en professionele storefronts waar u vlaggen wilt om natuurlijk te mengen in het ontwerp.

Modern

Toont vlaggen met:

• Afgeronde hoeken
• Zachte schaduwen
• Subtiele randen
• Verbeterde visuele behandeling

Beste voor: Moderne storefronts die willen dat de Currency Converter opvalt als een premium design element.

💡 De geselecteerde stijl is van toepassing op elke vlag die wordt weergegeven door de Currency Converter.

🔘 Vlagthema

Controleert de vorm van de vlaggen.

Rond

Vlaggen verschijnen met zacht afgeronde hoeken.

Cirkel

Vlaggen verschijnen in een ronde vorm.

Plat

Vlaggen verschijnen met scherpe hoeken en een traditionele look.

Het geselecteerde thema helpt bepalen van de algemene visuele persoonlijkheid van de widget.

🔘 Aangepaste valutaselectie

Deze instellingen controleren het uiterlijk van de belangrijkste Currency Converter widget.

🎨 Thema

Controleert de algemene visuele stijl van de Currency Converter container.

Standaard

Een schoon en eenvoudig uiterlijk dat zich van nature in de meeste Shopify thema's.

Moderne laag

Maakt een gelaagd visueel effect achter het widget voor extra diepte en nadruk.

💡 Het Moderne Laageffect gebruikt automatisch de geselecteerde achtergrondkleur.

👀 Weergavemodus

Controleert welke informatie verschijnt in de Currency Converter.

Vlag en valuta tonen

Toont zowel de vlag als valuta informatie.

Alleen vlag tonen

Toont alleen vlaggen.

Alleen valuta tonen

Toont alleen valuta-informatie.

Deze instelling is zowel van toepassing op de keuze- als op de keuzelijst.

🌓 Kleurthema

Controleert of de Currency Converter een licht of donker uiterlijk gebruikt.

Licht

Gebruikt een lichte achtergrond met donkerdere tekst.

Donker

Gebruikt een donkere achtergrond met lichtere tekst.

Automatisch

Automatisch overeenkomt met de voorkeur van de shopper systeem.

💡 Automatische modus helpt de Currency Converter zich op natuurlijke wijze aan te passen op verschillende apparaten en surfomgevingen.

🔤 Alleen valutacodes weergeven

Controleert hoe valutanamen verschijnen.

Ingeschakeld

Toont korte valutacodes.

Bijvoorbeeld:

• USD
• EUR
• GBP

Uitgeschakeld

Toont volledige valuta namen en codes.

Bijvoorbeeld:

• US Dollar (USD)
• Euro (EUR)
• Britse Pond (GBP)

Dit kan helpen om de dropdown compacter te maken bij het ondersteunen van veel valuta's.

🎨 Thema aanpassen

Deze sectie regelt de core styling van de Valuta Converter.

📦 Randstijl

Bepaalt hoe de widgetrand wordt weergegeven.

Box Shadow

Voegt een subtiele schaduw rond de Currency Converter.

Randlijn

Voegt een zichtbare rand toe rond het widget.

Geen rand

Verwijdert grenzen en schaduwen volledig.

Elke optie creëert een andere visuele nadruk afhankelijk van uw storefront stijl.

🔤 Lettertypefamilie

Controleert het lettertype gebruikt in de hele valuta Converter.

Themalettertype gebruiken

Past bij uw Shopify thematypografie automatisch.

Google-lettertypen

Kies uit verschillende ondersteunde lettertypen.

Bijvoorbeeld:

• Roboto
• Open Sans
• Montserrat
• Poppins

💡 Met behulp van uw thema lettertype creëert meestal de meest naadloze storefront ervaring.

🎨 Achtergrondkleur

Controleert de achtergrondkleur van de valuta Converter.

Je kunt:

• Kleurkiezer gebruiken
• Voer een Hex-kleurwaarde in

Kies een kleur die uw storefront aanvult, terwijl het makkelijk te identificeren blijft.

🖊️ Tekstkleur

Controleert de kleur van de tekst in de hele valuta Converter.

Dit omvat:

• Geselecteerde valuta
• Dropdown-opties
• Etiketten

Voor de beste leesbaarheid, zorgen voor voldoende contrast tussen de tekst en achtergrondkleuren.

🖱️ Muisover kleur

Controleert de getoonde kleur wanneer klanten zweven over valuta-opties.

Dit helpt klanten duidelijk te identificeren welke optie ze gaan kiezen.

Een subtiel contrast van de achtergrondkleur werkt meestal het beste.

🔽 Pictogramkleur omlaag

Controleert de kleur van het dropdown indicator pictogram.

Door deze kleur met je tekstkleur aan te passen ontstaat vaak het meest consistente uiterlijk.

⚠️ Belangrijke opmerkingen

Donker thema overschrijft sommige kleuren

Bij gebruik:

• Donker thema
• Automatisch Thema (terwijl een shopper donkere modus gebruikt)

De Currency Converter kan geoptimaliseerde donkere kleuren gebruiken in plaats van de geselecteerde achtergrond- en tekstkleuren.

Gebruik Custom CSS voor geavanceerde aanpassingen in de donkere modus.

Laagthema gebruikt achtergrondkleur

Het thema Moderne Lagen genereert automatisch het gelaagde effect met de geselecteerde achtergrondkleur.

Het veranderen van de achtergrondkleur verandert ook het uiterlijk van de laag.

Weergavemodus Geldt overal

Beeldscherm Modusinstellingen beïnvloeden:

• Het geselecteerde valutascherm
• Valutaopties omlaag

Beide locaties blijven altijd synchroon.

Lettertypewijzigingen globaal toepassen

Het geselecteerde lettertype heeft invloed op alle Currency Converter tekst, inclusief:

• Geselecteerde valuta
• Dropdown-opties
• Zoekresultaten (indien van toepassing)

Meer aanpassen nodig?

Voor geavanceerde styling buiten het tabblad Ontwerp, gebruik:

Geavanceerd → Aangepaste CSS

Hiermee kunnen ontwikkelaars volledig aangepaste stijlen toepassen op de Currency Converter.

🚀 Eindresultaat

Eenmaal succesvol geconfigureerd:

✅ De Currency Converter past bij uw storefront branding

✅ Vlaggenweergave in de gewenste stijl en vorm

✅ Kleuren en typografie voelen consistent met uw thema

✅ Valutaselectie blijft duidelijk en gebruiksvriendelijk

✅ Internationale shoppers genieten van een meer gepolijste ervaring

✅ De valuta Converter voelt als een natuurlijk onderdeel van uw winkelfront

Een goed ontworpen Currency Converter ziet er niet alleen beter uit, het helpt ook bij het creëren van een gladdere en betrouwbaarder winkelervaring voor klanten over de hele wereld. 🌍

Bijgewerkt op: 10/09/2026