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

Bijgewerkt op: 10/09/2026