Het tabblad Design (Ontwerp) geeft je volledige controle over de uitstraling van je aankondigingsbalk in je hele winkel. Van achtergrondkleuren en typografie tot knopanimaties, pictogramstijlen en aangepaste CSS: bijna elk visueel detail is af te stemmen op je merk.

Je kunt snel starten met een kant-en-klare template of elke pixel handmatig aanpassen. Hoe dan ook, de balk voelt als een natuurlijk onderdeel van je winkel 🎨

De meeste kleurinstellingen bevatten:

• Een Color Picker (kleurkiezer) voor visuele selectie
• Een Hex Code Input (hex-code invoer) voor exacte merkkleuren

⚠️ Voordat je begint

Om de Design-instellingen te configureren:

→ Open een bestaande aankondigingsbalk
→ Of maak eerst een nieuwe aan

Klik vervolgens op het tabblad Design (Ontwerp) in de editor.

ℹ️ Sommige opties verschijnen alleen bij specifieke balktypen of configuraties. Zo worden slide-animaties alleen weergegeven bij Multiple-balken, en verschijnt coupon-styling alleen wanneer een Coupon-CTA wordt gebruikt. Deze voorwaardelijke velden worden hieronder aangegeven, zodat je precies weet wanneer je ze kunt verwachten.

🎨 Template (Sjabloon)

• Wat het doet: Past direct een vooraf gemaakte visuele stijl toe op je aankondigingsbalk.
• Hoe je het gebruikt: Kies uit meer dan 25 templates om je ontwerp een vliegende start te geven zonder elk veld handmatig in te vullen.

Elke template vult vooraf in:

• Achtergrondtype, -kleur en gradiëntinstellingen
• Titel- en subtitelkleuren en -groottes
• Knopkleuren, tekstkleur en hoekradius
• Rand-, pictogram- en coupon-styling

Beschikbare templates zijn onder andere: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Belangrijk: Als je een template selecteert, worden de meeste designvelden overschreven. Je Visibility (Zichtbaarheid)-instelling en Position (Positie) (ingesteld in het tabblad Placement (Plaatsing)) blijven behouden.

💡 Templates zijn ideaal voor seizoensgebonden campagnes. Wil je een Black Friday-look? Selecteer dan de Black Friday-template en pas vervolgens naar wens aan.

👀 Visibility (Zichtbaarheid)

• Wat het doet: Bepaalt op welke apparaten je aankondigingsbalk wordt weergegeven.
• Opties:
• • Desktop and Mobile (Desktop en mobiel) — Zichtbaar op alle apparaten
  • Only Desktop (Alleen desktop)
  • Only Mobile (Alleen mobiel)

Dit is handig wanneer je verschillende boodschappen of lay-outs wilt tonen aan desktopbezoekers versus mobiele bezoekers.

🖼️ Background Style (Achtergrondstijl)

• Wat het doet: Wijzigt de achtergrond van de aankondigingsbalk.
• Beschikbare opties:
• • Single Color (Effen kleur) — Eén vaste achtergrondkleur
  • Gradient (Gradiënt) — Twee kleuren die onder een aangepaste hoek in elkaar overlopen
  • Patterns (Patronen) — Decoratieve achtergrondpatronen

🎨 Single Color (Effen kleur)

• Kies een kleur met de Color Picker (kleurkiezer) of voer handmatig een Hex Code (hex-code) in.

🌈 Gradient (Gradiënt)

• Gradient Angle Degree (Gradiënthoek): Bepaalt de richting van de overgang (0–360°)
• Initial Color (Beginkleur): De startkleur
• Final Color (Eindkleur): De eindkleur

💡 Een subtiel gradiënt voegt diepte toe zonder afleidend te werken. Probeer lage contrasthoeken voor een moderne uitstraling.

✨ Patterns (Patronen)

Als je Patterns (Patronen) selecteert, verschijnt er een dropdown met meer dan 35 ingebouwde achtergrondopties:

• Decoratief: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Feestdagen & seizoenen: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Getextureerd: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Patronen worden toegepast als CSS-achtergrondstijlen. Sommige gebruiken puur CSS, andere gebruiken afbeeldingselementen.

📐 Borders & Corners (Randen & hoeken)

Deze sectie bepaalt de vorm en omtrek van de balk.

• Bar Corner Radius (px): Hoe afgerond de hoeken van de balk zijn
• Bar Padding (px): Binnenruimte tussen de randen van de balk en de inhoud
• Border Size (px): Dikte van de buitenste rand
• Border Color: De kleur van de rand

💡 Een hoekradius van 0 px geeft een scherpe rechthoekige balk. Hogere waarden creëren zachtere, modernere vormen.

🔤 Typography (Typografie)

Deze sectie bepaalt hoe alle tekst in de aankondigingsbalk wordt weergegeven.

📝 Title Styling (Titelstijl)

• Title Size (px): De grootte van de hoofdboodschap
• Title Color: De kleur van de hoofdboodschap

📄 Subheading Styling (Subtitelstijl)

• Subheading Size (px): De grootte van de ondersteunende tekst
• Subheading Color: De kleur van de ondersteunende tekst

ℹ️ Het subtitelveld is verborgen bij gebruik van het balktype Running, omdat marquee-balken meestal uit één tekstregel bestaan.

🔠 Font (Lettertype)

Kies uit 63 beschikbare lettertypen, waaronder:

• Systeemlettertypen: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, en meer
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, en veel meer

De eerste optie is Use your theme font (Gebruik je themalettertype), waarmee de bestaande typografie van je winkel automatisch wordt overgenomen.

💡 Voor leesbaarheid is het verstandig om maximaal 1 à 2 lettertypen per balk te gebruiken. Een vet display-lettertype voor de titel en een strak sans-serif voor de subtitel werken vaak goed.

🔘 Button Design (Knopontwerp)

Deze sectie past de call-to-action-knop aan.

ℹ️ Deze instellingen zijn altijd beschikbaar in het tabblad Design (Ontwerp). Ze zijn alleen zichtbaar in de winkel wanneer je CTA-type is ingesteld op Button (Knop), Full Bar (Volledige balk) of Trigger (Trigger).

🎨 Button Color (Knopkleur)

• Wijzigt de achtergrondkleur van de CTA-knop.

🔤 Button Text Size & Color (Knoptekstgrootte & -kleur)

• Size (px): Bepaalt de tekstgrootte binnen de knop
• Color: Wijzigt de kleur van de knoptekst

⭕ Corner Radius & Button Style (Hoekradius & knopstijl)

Deze twee velden zijn gekoppeld:

• Corner Radius (px): Voer handmatig een waarde in om de rondheid te bepalen
• Button Style: Schakel snel tussen voorinstellingen:
• • Square (Vierkant) → stelt de radius in op 0 px
  • Rounded (Afgerond) → stelt de radius in op 10 px
  • Fully Rounded (Volledig afgerond) → stelt de radius in op 30 px

Als je een stijlvoorinstelling selecteert, wordt de hoekradius automatisch bijgewerkt. Als je een aangepaste radius invoert, wordt de stijlvoorinstelling automatisch aangepast:

• 0–9 px → Square (Vierkant)
• 10–29 px → Rounded (Afgerond)
• 30+ px → Fully Rounded (Volledig afgerond)

💪 Font Weight (Letterdikte)

• Bepaalt hoe vet of licht de knoptekst wordt weergegeven
• Opties: Normal, Bold, 100–900

✍️ Font Style (Letterstijl)

• Schakel tussen: Normal, Italic, Underline

✨ Button Animation (Knopanimatie)

Voegt een doorlopende animatie toe aan de knop om deze op te laten vallen.

Beschikbare animaties: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Subtiele animaties zoals Bounce of Emitting trekken aandacht zonder opdringerig aan te voelen. Gebruik Flip of Tada voor campagnes met hoge urgentie.

🏷️ Coupon Design (Couponontwerp)

Deze sectie past de weergave van het couponcodevak aan.

ℹ️ Deze sectie verschijnt alleen wanneer:

• Een willekeurige content-slide Coupon als CTA-type gebruikt, of
• Het balktype is ingesteld op Email

Beschikbare instellingen

• Coupon Border Style (Couponrandstijl): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, of None
• Coupon Border Color (Couponrandkleur): De omtrekkleur van het couponvak
• Coupon Text Color (Coupontekstkleur): De kleur van de couponcodetekst
• Coupon Background (Couponachtergrond): De achtergrondkleur van het couponvak (ondersteunt transparante achtergronden)

💡 Een gestippelde rand met een contrasterende achtergrond is de klassieke coupon-look. Probeer een semi-transparante achtergrond als je het patroon of gradiënt van de balk wilt doorlaten schijnen.

🎆 Bar Animations (Balkanimaties)

Multiple Bar Transition (Overgang bij Multiple-balk)

Beschikbaar alleen wanneer het balktype is ingesteld op Multiple.

Bepaalt hoe slides overgaan naar elkaar:

• Slide — Schuift horizontaal tussen aankondigingen
• Fade In — Laat vloeiend van de ene slide naar de andere vervagen
• Cube — Een 3D-kubusrotatie-effect
• Flip — Een kaart-omdraai-overgang

ℹ️ Deze instelling vind je in het tabblad Design (Ontwerp), niet in het tabblad Content (Inhoud).

🎨 Icon Settings (Pictograminstellingen)

🚪 Close Icon Color (Sluitpictogramkleur)

• Wijzigt de kleur van het sluitpictogram (knop om te sluiten).
• Alleen zichtbaar wanneer de optie Close Icon (Sluitpictogram) is ingeschakeld in het tabblad Content (Inhoud).

➡️ Arrow Icon Color (Pijlpictogramkleur)

• Wijzigt de kleur van de navigatiepijlen.
• Alleen zichtbaar wanneer het balktype is ingesteld op Multiple, omdat pijlen worden gebruikt om tussen slides te navigeren.

👥 Banner Icons (Social Icons) (Bannerpictogrammen (sociale pictogrammen))

Deze sectie stijlt socialemediapictogrammen die in de balk verschijnen.

• Social Icon Size (px): Past de pictogramgrootte aan
• Social Icon Color: Wijzigt de pictogramkleur
• Social Icon Position: Plaatst pictogrammen aan de Left (Linkerkant) of Right (Rechterkant) van de balk
• Use Original Social Icon Color: Wanneer ingeschakeld, behoudt elk platform zijn eigen merkkleur (Facebook-blauw, Instagram-gradiënt, enz.) in plaats van je aangepaste kleur te gebruiken

ℹ️ Sociale pictogrammen worden geconfigureerd in het tabblad Content (Inhoud). Het tabblad Design (Ontwerp) bepaalt alleen hoe ze eruitzien.

💻 Custom CSS (For Advanced Users) (Aangepaste CSS (voor gevorderde gebruikers))

💡 Geavanceerde functie: Als je styling nodig hebt die niet beschikbaar is in de standaardinstellingen, kun je je eigen CSS direct in de editor schrijven.

Wanneer ingeschakeld, wordt er een CSS-skelet geleverd met vooraf gedefinieerde doelklassen:

• Volledige balkcontainer: .futureblink-announcement-bar
• Titeltekst: .futureblink-announcement-bar .title
• Subtiteltekst: .futureblink-announcement-bar .subheading
• Mobiele titel: .futureblink-announcement-bar.mobile .title
• Mobiele subtitel: .futureblink-announcement-bar.mobile .subheading
• CTA-knop: .futureblink-announcement-bar .cta-button
• Mobiele CTA-knop: .futureblink-announcement-bar.mobile .cta-button
• Sluitknop: .futureblink-announcement-bar .close-btn
• Navigatiepijlen: .futureblink-announcement-bar .arrow
• Vorige/volgende knoppen: .futureblink-announcement-bar .button-prev en .button-next

Hoe aangepaste CSS in de winkel werkt:

• Alle selectors worden automatisch beperkt tot jouw specifieke aankondigingsbalk
• Elke declaratie krijgt !important-prioriteit om themastijlen te overschrijven
• Mobiele selectors (.mobile) worden automatisch verpakt in een mobiele media query
• De CSS wordt geïnjecteerd als een <style>-tag wanneer de balk wordt weergegeven

⚠️ Let op: Aangepaste CSS is krachtig maar kan conflicteren met themastijlen. Test grondig op zowel desktop als mobiel na het toepassen van wijzigingen.

🛒 Checkout Design (Checkout-ontwerp)

Beschikbaar alleen voor aankondigingsbalken die zijn geplaatst op de Checkout Page (Checkout-pagina) (Shopify Plus vereist).

Wanneer in het tabblad Placement (Plaatsing) de optie Checkout Page (Checkout-pagina) is geselecteerd, wordt het volledige tabblad Design (Ontwerp) vervangen door een vereenvoudigd paneel:

• Checkout Title Size (Grootte checkout-titel) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (Kleur checkout-titel) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (Grootte checkout-subtitel) — Dezelfde grootteopties
• Checkout Subheading Color (Kleur checkout-subtitel) — Dezelfde kleuropties

ℹ️ Checkout-ontwerp gebruikt de native toontokens van Shopify voor een consistente stijl binnen de checkout-omgeving. Gradiënten, patronen, knoppen en aangepaste CSS zijn niet beschikbaar in checkout-balken.

🚀 Final Result (Eindresultaat)

Als de instellingen correct zijn geconfigureerd, helpen de Design & Styling (Ontwerp & styling)-instellingen je om een visueel consistente, professionele aankondigingsbalk te maken die als een natuurlijk onderdeel van je winkel aanvoelt.

Met de juiste styling op zijn plaats:

✅ Sluit de balk aan bij je merkkleuren en -typografie
✅ Worden belangrijke boodschappen opvallender en beter leesbaar
✅ Vallen knoppen en CTA's op zonder opdringerig te zijn
✅ Voegen achtergrondpatronen en gradiënten visuele persoonlijkheid toe
✅ Voelen slide-overgangen soepel en gepolijst aan
✅ Zijn mobiele en desktop-ervaringen afzonderlijk geoptimaliseerd
✅ Kunnen gevorderde gebruikers de styling uitbreiden met aangepaste CSS

Door deze ontwerp- en stylingopties effectief te gebruiken, voelt elke aankondigingsbalk doordacht, on-brand en eenvoudig te gebruiken voor klanten ✨

Bijgewerkt op: 01/09/2026