> ## 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). # 🎨 Aangepaste CSS instellen voor Hoppy Currency 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. Met de Custom CSS-functie kunt u het uiterlijk van de Currency Converter verder aanpassen dan de standaard Design-instellingen. Of u nu kleuren, afstand, randen, schaduwen wilt aanpassen of de widget wilt aanpassen aan een sterk aangepaste storefront, Custom CSS geeft u extra styling flexibiliteit zonder uw Shopify themabestanden. Deze gids loopt door hoe om veilig toe te voegen en te beheren aangepaste CSS voor de Currency Converter. --- # **⚠️ Voordat u begint** Voordat u aangepaste CSS gebruikt, zorg ervoor: * Hoppy Currency Converter is geïnstalleerd en actief * Het insluiten van de App is ingeschakeld * Het onboard proces is voltooid * Je hebt een duidelijk idee van de styling veranderingen die je wilt maken ⚠️ Onjuiste CSS kan het uiterlijk van de widget beïnvloeden. Test altijd zorgvuldig wijzigingen voordat ze live op uw storefront. --- # **✅ Stap 1: Open de aangepaste CSS-instellingen** Open de **Hoppy Currency Converter** app van uw Shopify Admin. Dan: → Klik **Geavanceerd** → Scroll naar de **Expertinstellingen** sectie → Zoek de **Aangepaste CSS** veld Dit is waar alle aangepaste styling regels moeten worden toegevoegd. --- # **✅ Stap 2: Begrijp de beschikbare CSS klassen** Om de Currency Converter aan te passen, moet u zich richten op de juiste CSS klassen. Deze klassen identificeren verschillende delen van het widget en laten u toe om ze individueel te stijlen. --- ## **🖥️ Desktop valuta converter** .futureblink currency desktop ### **Gebruik voor** * Achtergrondkleuren * Randen * Schaduwen * Opvulling * Marges Deze klasse richt zich op de Currency Converter weergegeven op desktop apparaten. --- ## **📱 Mobiele valuta converter** .futureblink currency mobile ### **Gebruik voor** * Mobiele specifieke afstand * Mobiele styling * Mobiele indelingsaanpassingen Deze klasse richt zich op de Valuta Converter weergegeven op mobiele apparaten. --- ## **📋 Valutadaling** .futureblink-currency-dropdown ### **Gebruik voor** * Dropdown styling * Randen * Randradius * Schaduwen * Achtergrondkleuren Deze klasse controleert de lijst van beschikbare valuta's weergegeven na het klikken op de converter. --- ## **🔘 Valutawisselaar** .valuta-schakelaar ### **Gebruik voor** * Knoppenstyling * Geselecteerde valuta-uitstraling * Randen * Spatiëring Deze klasse regelt de zichtbare valutakiezer klanten interactie met. --- ## **📄 Dropdown-opties** Optie ### **Gebruik voor** * Individuele rijen * Grootte lettertype * Opvulling * Effecten op zweven Deze klasse richt zich op elke valuta optie binnen de dropdown. --- # **✅ Stap 3: Maak uw CSS-regels** CSS maakt gebruik van een eenvoudige structuur: instelknop { eigendom: waarde; } ### **Voorbeeldstructuur** * Selector → Wat je wilt stijlen * Eigenschap → Wat je wilt veranderen * Waarde → Het nieuwe uiterlijk --- # **🎨 Voorbeeld: achtergrondkleur wijzigen** .futureblink currency desktop { achtergrondkleur: #f8f9fa; } Dit verandert de achtergrondkleur van de desktop Currency Converter. --- # **🔲 Voorbeeld: Randen & Schaduwen toevoegen** .futureblink currency desktop { rand: 1px solid #ddd; grensradius: 8px; doosschaduw: 0 2px 8px rgba(0,0,0,0,1); } Dit zorgt voor een schonere kaart-stijl uiterlijk. --- # **📋 Voorbeeld: Style the Currency Dropdown** .futureblink-currency-dropdown { grensradius: 6px; box-schaduw: 0 4px 12px rgba(0,0,0,0.15); } Dit voegt afgeronde hoeken en een sterker dropdown schaduw. --- # **📱 Voorbeeld: Mobiele afstand aanpassen** .futureblink currency mobile { opvulling: 12px 16px; margin-top: 8px; } Dit vergroot de afstand rond het mobiele widget. --- # **⚠️ Als stijlen niet worden toegepast** Soms kan de standaard widget styling uw aangepaste CSS overschrijven. Als dat gebeurt, voeg dan: !belangrijk bij de CSS-verklaring. ### **Voorbeeld** .futureblink currency desktop { achtergrondkleur: wit !belangrijk; grensradius: 10px !belangrijk; } 💡 Gebruik `!important` wordt aanbevolen wanneer een aangepaste stijl niet succesvol wordt toegepast. --- # **✅ Stap 4: Uw wijzigingen opslaan** Na het toevoegen van uw CSS: → Klik **Opslaan** De styling veranderingen worden onmiddellijk toegepast op de Currency Converter widget. --- # **✅ Stap 5: Test de widget** Bezoek uw storefront en verifieer de wijzigingen. Controleer: * Bureaubladapparaten * mobiele apparaten * Valuta dropdown gedrag * Verschillende storefront pagina's Dit helpt ervoor te zorgen dat de styling werkt consequent in uw winkel. --- # **🔍 Meer CSS lessen nodig?** Als u wilt aanpassen extra delen van de valuta Converter: 1. Open je storefront 2. Klik met de rechtermuisknop op de valuta converter 3. Klik **Controleren** 4. De HTML-structuur bekijken 5. Extra klassenamen zoeken Deze klassen kunnen dan worden gebruikt in het veld Custom CSS. --- # **⚠️ Belangrijke opmerkingen** ### **Wijzigingen Ga onmiddellijk live** Er is geen ontwerpmodus voor aangepaste CSS. Wijzigingen worden zichtbaar op de storefront zodra u ze opslaat. --- ### **Aangepaste CSS overschrijft ontwerpinstellingen** Als er een stylingregel bestaat in beide: * Ontwerpinstellingen * Aangepaste CSS De Custom CSS-versie heeft prioriteit. --- ### **Bureaublad & mobiel kan aparte styling vereisen** Wijzigingen in de desktopklassen hebben geen automatisch effect op mobiele klassen. Voor de beste resultaten, bekijk beide versies apart. --- ### **Thema-updates kan aangepaste CSS beïnvloeden** Groot Shopify thema updates kunnen de storefront structuur veranderen. Als dat gebeurt, kunnen sommige CSS-regels moeten worden aangepast. --- # **🎉 Eindresultaat** Eenmaal succesvol geconfigureerd: ✅ De Currency Converter past bij uw storefront branding ✅ Kleuren, afstand en grenzen kunnen worden aangepast ✅ Desktop en mobiele lay-outs kunnen onafhankelijk worden gestyld ✅ Geavanceerde visuele aanpassingen worden mogelijk ✅ Stijl kan worden aangepast zonder te bewerken Shopify themabestanden Met behulp van Custom CSS geeft u extra controle over het uiterlijk van de Currency Converter en helpt een meer naadloze storefront ervaring. 🎨 ---