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

Bijgewerkt op: 10/09/2026