> ## 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). # 🎨 Gratis Verzendkosten Upsell Bar β€” Ontwerp & styling > ℹ️ **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. Het tabblad Design geeft u volledige controle over hoe de Free Shipping Upsell Bar er uitziet en voelt in uw winkel. Van kleuren en afstand tot typografie, animaties, knoppen, en upsell kaarten .. bijna elk visueel aspect kan worden aangepast aan uw merk. We hebben een breed scala aan instellingen, zodat u kunt: * Start snel met behulp van kant-en-klare sjablonen * Of diep elk detail aan te passen aan uw storefront De meeste kleurgerelateerde instellingen zijn: * Een kleurenpicker * Een hex code invoer Dit maakt het gemakkelijker of u de voorkeur geeft aan visuele selectie of exacte merkkleuren. # **⚠️ Voordat u begint** De instellingen van het ontwerp configureren: β†’ Open een bestaande Free Shipping Upsell setup β†’ Of maak eerst een nieuwe setup Dan: * Voor de **Gebaseerd op Plaatsing** workflow β†’ Open de **Ontwerp** tab * Voor de **Gebaseerd op doelstellingen** workflow β†’ Open het plaatsingstabblad dat u wilt aanpassen ℹ️ Stijlinstellingen worden anders benaderd afhankelijk van het gebruikte workflowtype. --- ## **🎨 Sjabloon** * **Wat het doet:** Laat u direct een pre-made visuele stijl toepassen op uw Free Shipping Upsell Bar. * **Hoe gebruikt u dit middel?** Kies uit beschikbare sjablonen om snel kickstart uw ontwerp zonder handmatig aanpassen van elke instelling. --- ## **πŸ‘€ Zichtbaarheid** * **Wat het doet:** Controles waar de Free Shipping Upsell Bar verschijnt. * **Opties:** * _Bureaublad en mobiel_ Zichtbaar op alle apparaten. * _Alleen bureaublad_ * _Alleen mobiel_ --- ## **πŸ“ Breedte staaf** * **Wat het doet:** Bepaalt hoeveel horizontale breedte de Free Shipping Bar moet innemen. * **Hoe gebruikt u dit middel?** Verhoog of verlaag het breedtepercentage afhankelijk van hoe compact of breed u wilt dat de sectie verschijnt. --- ## **πŸ–ΌοΈ Achtergrondstijl** * **Wat het doet:** Verandert de achtergrond verschijning van de Free Shipping Upsell Bar. * **Beschikbare opties:** * **Enkele kleur** Breng een vaste achtergrondkleur aan. * **Kleurverloop** Blend twee kleuren soepel samen. * **Patronen** Breng decoratieve achtergrondpatronen aan. ### **🎨 Enkele kleur** * Kies een kleur met de **Kleurenpicker** of handmatig een **Hex-code**. ### **🌈 Kleurverloop** * **Kleurverloophoekgraad:** Bepaalt de richting van het verloopeffect. * **Kleur Picker 1 & 2:** Selecteer de twee kleuren in het verloop. ### **✨ Patronen** * Inschakelt de **Patroon selecteren** optie waar u kunt kiezen uit een verscheidenheid van ingebouwde achtergrondpatronen. --- ## **πŸ“ Randen en hoeken** * **Randstraal (px):** Bepaalt hoe afgerond de hoeken van de sectie verschijnen. * **Randgrootte (px):** Past de dikte van de rand aan. * **Randkleur:** Verandert de randkleur met de kleurkiezer of hex-invoer. --- ## **πŸ“ SpatiΓ«ring** Deze sectie helpt u de afstand zowel binnen als buiten de Free Shipping Upsell Bar te regelen. * **Boven / onder:** Voegt ruimte toe buiten de sectie om het te scheiden van omliggende elementen. * **Boven / onderkant:** Voegt interne afstand tussen de inhoud en de randen van de sectie toe. Hier is wat Buiten/Binnenafstand betekent: --- ## **πŸŽ† Vuurwerkanimatie toevoegen** * **Wat het doet:** Voegt een subtiel vuurwerk animatie effect wanneer doelen worden bereikt. * **Opties:** * Vuurwerk tonen op **elk doel bereiken**. * Vuurwerk tonen **alleen op het einddoel**. --- ## **πŸ”€ Typografie** Deze sectie bepaalt hoe alle tekstelementen verschijnen in de Free Shipping Upsell Bar. ### **πŸ“ Berichtstijl** * **Berichtgrootte:** Past de grootte van de hoofdtekst aan. * **Berichtkleur:** Verandert de kleur van het weergegeven bericht boven de voortgangsbalk. ### **πŸŽ‰ Kleur van doelbericht** * Verandert de kleur van het succesbericht weergegeven nadat een doel is bereikt. ### **πŸ”  Lettertype** * Kies uit beschikbare lettertypen of kies **Gebruik uw themalettertype** om automatisch uw winkelthema aan te passen. ### **πŸ’ͺ Lettertypegewicht** * Bepaalt hoe vet of licht de tekst verschijnt. * U kunt ook selecteren **Erfstuk** om uw thema te volgen bestaande lettertype gewicht. ### **πŸ’° Prijstekststijl** Pas aan hoe het prijsbedrag verschijnt in het bericht. * **Grootte:** Controleert de lettergrootte van de gemarkeerde prijs. * **Kleur:** Verandert de kleur van de prijstekst. ### **✨ Prijstekstanimatie** * Voegt animatie effecten aan de prijs tekst om te helpen opvallen meer. --- ## **πŸ“Š Voortgangsbalk** Deze sectie kunt u het uiterlijk en gedrag van de voortgangsbalk aanpassen. ### **πŸ‘οΈ Voortgangsbalk tonen** * Schakel het zicht van de voortgangsbalk in of uit. ### **🎨 Achtergrondkleur** * Verandert de achtergrondkleur van de niet-gevulde voortgangsbalk. ### **🟩 Vulkleur** * Controleert de kleur van de gevulde voortgangssectie. ### **🎯 Meerdere doelen Marker** Kies hoe meerdere doelen worden weergegeven in de voortgangsbalk. * **Slechts één doel tegelijk tonen** Reset de bar na het bereiken van een doel te richten op de volgende. * **Alle doelen tegelijk tonen** Voorbeeld: ### **πŸ“¦ Barstijl** * Kies uit beschikbare visuele stijlen voor de voortgangsbalk. ### **πŸ“ Breedte** * Controleert de breedte van de voortgangsbalk zelf. ### **β­• Hoekstraal** * Past aan hoe afgerond de voortgangsbalk hoeken verschijnen. ### **πŸ“ Hoogte** * Controleert de dikte/hoogte van de voortgangsbalk. ### **Spatie boven / onder** * Past de afstand boven en onder de voortgangsbalk aan. --- ## **πŸ”˜ Knopontwerp** Deze sectie past de CTA-knop aan die naast het bericht Gratis verzending wordt getoond. **Opmerking:** Deze sectie is alleen van toepassing wanneer **Knop** wordt geselecteerd als de **Oproep tot actietype** in het tabblad Doel. ### **🎨 Knopkleur** * Verandert de achtergrondkleur van de CTA-knop. ### **πŸ”€ Knoptekstgrootte & kleur** * Bedient de tekstgrootte en kleur in de knop. ### **β­• Hoekstraal** * Past aan hoe afgerond de knop hoeken verschijnen. ### **πŸ“¦ Knopstijl** * Snel schakelen tussen stijlen als: * _Vierkant_ * _Afgerond_ * _Volledig afgerond_ ### **πŸ’ͺ Lettertypegewicht** * Bedient de dikte van de knoptekst. ### **✍️ Lettertypestijl** * Schakelen tussen: * _Normaal_ * _Cursief_ * _Onderstrepen_ ### **✨ Knop Animatiestijl** * Voegt continue animatie effecten toe aan de knop. ### **πŸ–±οΈ Knoppenafwerkingen** * Voegt interactieve effecten toe wanneer gebruikers over de knop zweven. --- ## **πŸ›οΈ Upsell Design** Deze sectie past het uiterlijk van de Upsell sectie aan. **Opmerking:** Deze sectie is alleen van toepassing wanneer een Upsell-optie anders dan **Geen upsell** is geselecteerd in het tabblad Upsell/Placement. ### **πŸ”€ Typografie** #### **🏷️ Titel upsellen** * **Titelgrootte:** Controleert de grootte van de Upsell koers. * **Titelkleur:** Verandert de kleur van de Upsell kop. #### **πŸ“¦ Producttitel** * **Producttitelgrootte:** Controleert de productnaam grootte. * **Producttitel kleur:** Verandert de producttitelkleur. #### **πŸ’° Prijsstijl** * **Prijsgrootte:** Controleert de productprijs tekstgrootte. * **Prijskleur:** Verandert de kleur van de productprijs. #### **➑️ Pijlstijl** * **Pijlgrootte:** Controleert de grootte van navigatiepijlen. * **Pijlkleur:** Verandert de kleur van de pijl. ### **πŸ”˜ In winkelwagen Knop Styling** * **Knopkleur:** Verandert de achtergrondkleur van de knop. * **Knoptekstgrootte & kleur:** Controleert de tekst verschijning. * **Hoekstraal:** Past knooprondheid aan. * **Knopstijl:** Selecteer uit beschikbare knoppenstijlen. * **Lettertypegewicht:** Controleert tekstdikte. * **Lettertypestijl:** Schakelen tussen verschillende tekststijlen. --- ## **πŸ’» Aangepaste CSS (voor ontwikkelaars)** πŸ’‘**Geavanceerde functie**: Als u volledig unieke styling wilt toevoegen die niet beschikbaar is in de standaardinstellingen, kunt u uw aangepaste CSS direct in het editorvak plakken. * **Doelklassen:** * Volledige badge container: **`.futureblink-free-shipping`** * Voortgangsbericht: **`.futureblink-free-shipping .futureblink-message`** * Pictogram boven voortgangsbalk: **`.futureblink-free-shipping .futureblink-icon`** * Oproepknop: **`.futureblink-free-shipping .futureblink-cta-button`** * Klik **Toepassen** om uw stijlen onmiddellijk te testen. Wat?⚠️ Let op: Als de stijlen niet worden toegepast na het klikken Solliciteren, probeer dan opnieuw door het toevoegen **`!important`** bij elke verklaring. --- ## **🎯 Pictograminstellingen** Een pictogram boven de voortgangsbalk toevoegen en aanpassen. ### **πŸ–ΌοΈ Pictogram selecteren / verwijderen** * Open de ingebouwde pictogrambibliotheek om een pictogram te kiezen. * Verwijder het geselecteerde pictogram op elk moment. ### **πŸ“€ Pictogram uploaden** * Upload uw eigen aangepaste pictogram voor volledige flexibiliteit. ### **πŸ“ Pictogramgrootte & kleur** * Pas de pictogramgrootte aan en wijzig de kleur. --- ## **πŸš€ Eindresultaat** Eenmaal met succes geconfigureerd, de **Ontwerp & styling** instellingen helpen handelaren een meer visueel aantrekkelijke, professionele en conversiegerichte winkelervaring te creΓ«ren. Met de juiste styling aanpassing op zijn plaats: βœ… De Free Shipping Bar voelt meer afgestemd op uw winkel branding βœ… Belangrijke berichten worden meer merkbaar en boeiend βœ… Progress tracking voelt schoner en gemakkelijker te begrijpen βœ… CTA-knoppen worden visueel aantrekkelijker βœ… Upsell secties meer natuurlijk mengen in de storefront βœ… Klanten ervaren een meer gepolijste en interactieve interface βœ… Handelaren krijgen betere controle over het algehele uiterlijk en de gebruikerservaring Met behulp van deze design- en stylingopties effectief kan het verbeteren van de betrokkenheid van de klant, storefront presentatie, en de algehele conversie potentieel ✨