> ## 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). # 🎨 Hoe u aangepaste CSS instellen voor gratis verzending Upsell Bars > ℹ️ **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. Wilt u dat uw gratis verzendbar perfect aansluit bij uw winkelmerk? 🎨 Terwijl het tabblad Design bevat uitgebreide styling controles, **Aangepaste CSS** biedt extra flexibiliteit voor geavanceerde visuele aanpassing. Of u nu typografie aanpast, afstand verfijnt, animaties toevoegt, mobiele specifieke lay-outs aanmaakt of themaspecifieke stylingconflicten oplost, Custom CSS geeft u meer controle over hoe uw Free Shipping Bar op de storefront verschijnt. --- # **⚠️ Voordat u begint** Voordat u Aangepaste CSS gebruikt: * Zorg ervoor dat u al een Free Shipping Upsell setup hebt gemaakt. * Zorg ervoor dat u toegang hebt tot de **Ontwerp** tab. * Heb een basiskennis van CSS of toegang tot een ontwikkelaar. ⚠️ **Belangrijk:** Aangepaste CSS is beschikbaar op alle ondersteunde plaatsingstypen behalve **Afrekenpagina** Plaatsingen. Ondersteunde plaatsingen omvatten: * Productpagina * Winkelwagen pagina * Winkelwagenlade * Banner (boven en onder) --- # **🛠️ Stap 1 Open het ontwerptabblad** Open de **Hoppy Free Shipping** app en navigeer naar de Free Shipping Upsell setup die u wilt aanpassen. Dan: ➡️ Klik op de **Ontwerp** tab. Scroll naar beneden totdat u de **Aangepaste CSS** Section. Deze sectie vindt u meestal onder de instellingen Typografie, Progress Bar, Knop en Upsell configuratie. --- # **🎨 Stap 2 Open de aangepaste CSS Editor** Binnen de **Aangepaste CSS** sectie vindt u: * Een CSS-editor * A **Beeldgids** knop * Een **Toepassen** knop * Een starter CSS-sjabloon Het sjabloon bevat veelgebruikte selectoren die kunnen worden aangepast zonder handmatig te inspecteren storefront elementen. --- # **🎯 Stap 3 Begrijp de beschikbare selecties** De starter template bevat verschillende selecties die zich richten op verschillende Free Shipping Bar elementen. ### **Beschikbare selectoren** Selectie Omschrijving `.futureblink-free-shipping` Gehele gratis verzending Bar container `.futureblink-message` Voortgangsberichttekst `.futureblink-icon` Pictogram weergegeven met het bericht `.futureblink-cta-button` Call-to-action-knop `.futureblink-price-text` Geaccentueerde prijs of voortgangswaarde --- ### **Mobiele selecties** Voor mobiele-specifieke styling, gebruik de `.mobile` variatie. Selectie Omschrijving `.futureblink-free-shipping.mobile .futureblink-message` Mobiel voortgangsbericht `.futureblink-free-shipping.mobile .futureblink-icon` Mobiel pictogram `.futureblink-free-shipping.mobile .futureblink-cta-button` Mobiele CTA-knop `.futureblink-free-shipping.mobile .futureblink-price-text` Mobiele prijs/vooruitgangstekst 💡 U hoeft alleen de selectoren aan te passen die relevant zijn voor uw ontwerpvereisten. --- # **✍️ Stap 4 Toevoegen van uw aangepaste CSS** Voer uw CSS-regels in in de editor. ### **Voorbeeld 1 Aanpassen van het voortgangsbericht** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Voorbeeld 2: Pas de CTA-knop aan** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Voorbeeld 3** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Begin met kleine styling veranderingen eerst, dan uitbreiden van uw CSS als nodig. --- # **✅ Stap 5 Toepassen van uw CSS** Na het invoeren van uw CSS: ➡️ Klik **Toepassen**. De preview updates automatisch zodat u onmiddellijk de wijzigingen in de styling kunt bekijken. Als u uw aangepaste styling wilt verwijderen: ➡️ Klik **Reset**. Dit herstelt de standaard sjabloon en schakelt de aangepaste CSS. --- # **👀 Stap 6 Bekijk het voorbeeld** Na het toepassen van uw CSS: ➡️ Bekijk het voorbeeld in de app. Controleer of: * Tekst wordt correct weergegeven. * Knoppen verschijnen zoals verwacht. * Pictogrammen blijven op één lijn. * Kleuren en afstand passen bij uw merknaam. Indien nodig: ➡️ Update de CSS. ➡️ Klik **Toepassen** Alweer. Het voorbeeld wordt na elke wijziging automatisch vernieuwd. --- # **💾 Stap 7: Opslaan en publiceren** Zodra je tevreden bent met het ontwerp: ➡️ Klik **Opslaan**. ➡️ Klik **Publiceren**. ⚠️ Alleen opslaan werkt de storefront niet bij. De Free Shipping Upsell setup moet ook worden gepubliceerd voordat klanten de wijzigingen kunnen zien. --- # **⚠️ Belangrijke opmerkingen** ### **Automatische !belangrijke behandeling** Wanneer stijlen worden weergegeven op de storefront, voegt de app automatisch `!important` prioriteit voor CSS-verklaringen. Dit helpt ervoor te zorgen dat uw aangepaste stijlen voorrang hebben op thema styling. --- ### **Als stijlen niet verschijnen** In zeldzame gevallen waar themastijlen dominant blijven, kunt u handmatig toevoegen `!important` in de editor. Voorbeeld: .futureblink-freeshipping .futureblink-message { lettergrootte: 18px !belangrijk; kleur: #ff6600 !belangrijk; } --- ### **Automatische mobiele behandeling** Elke selector die de `.mobile` variatie wordt automatisch verpakt in een mobiele mediaquery wanneer weergegeven op de storefront. U hoeft niet handmatig responsieve breekpunten aan te maken voor deze selectoren. --- ### **Afrekenen Paginabeperking** Aangepaste CSS is niet beschikbaar voor Afrekenen Pagina plaatsingen omdat Shopify beperkt aangepaste CSS-injectie binnen Afrekenomgevingen. --- ### **CSS-validatie** De editor valideert geen CSS syntax. Als een stijl niet correct wordt toegepast: ➡️ Controleer selectienamen. ➡️ Controleer de beugels en puntkomma's. ➡️ Bekijk de CSS voor syntax fouten. --- # **❓ Problemen oplossen** Als uw stijlen niet correct verschijnen: ➡️ Bevestig dat **Toepassen** is geklikt. ➡️ Controleer de setup is **Opgeslagen** en **Gepubliceerd**. ➡️ Controleer of de namen exact overeenkomen met het opgegeven sjabloon. ➡️ Test in een Incognito of Privé browservenster. ➡️ Vernieuw de storefront om gecachede stijlen te wissen. --- # **🎉 Eindresultaat** ✅ Uw Free Shipping Bar kan worden aangepast buiten de standaard Design instellingen. ✅ Desktop en mobiele ervaringen kunnen onafhankelijk worden gestyled. ✅ Aangepaste typografie, afstand, kleuren en animaties worden volledig ondersteund. ✅ De Free Shipping Bar kan nauwer worden afgestemd op het merk van uw winkel. Custom CSS biedt extra flexibiliteit wanneer de ingebouwde ontwerpbesturingen niet genoeg zijn, waardoor een meer gepolijste en consistente storefront-ervaring wordt gecreëerd. ✨