> ## 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). # 🎨 Valuta Converter > ℹ️ **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. 🌍 ---