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

Bijgewerkt op: 10/09/2026