ℹ️ 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 uw Hoppy Bundles biedt look en feel op uw storefront. Van fonts en kleuren tot grenzen, knoppen, tier highlights, en productkaarten

We hebben een breed scala aan instellingen, zodat u kunt:

• Snel lanceren met behulp van kant-en-klare sjablonen en thema's
• Of diep elk detail aan te passen aan uw storefront

De meeste kleurgerelateerde instellingen zijn:

• Een kleur Picker (klik op de kleur swatch om het te openen)
• Een Hex Code-invoer (typ uw exacte merkkleur direct)

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 bestaand aanbod → Of maak eerst een nieuw aanbod

Open dan de Ontwerp tab in de aanbiedingseditor.

Het tabblad Design is beschikbaar voor alle aanbiedingen in Hoppy Bundles:

• Bundelaanbieding
• Hoeveelheid breuk (Deelkorting)
• Bouw je eigen bundel (BYOB)
• Productaddons
• Upsell Slider
• Categorie Hoeveelheid breuk

ℹ️ Het tabblad Design ziet er iets anders uit, afhankelijk van het type aanbieding.Deze gids dekt elk gedeelte en wijst op de verschillen als we gaan.

👀 Het ontwerptabblad begrijpen

📍 Waar het woont

Open elke aanbieding en zie je tabbladen aan de bovenkant van de editor Algemeen, Ontwerpen Targeting en plaatsing. Klik Ontwerp om de styling-instellingen te openen.

• Voor BYOB aanbiedingen, de tabbladen zijn Algemeen, Productselectie Logicaen Ontwerp.

🖥️ Voorbeeld live

Elke aanbieding editor bevat een live preview paneel naast de instellingen, die zowel een Bureaubladvoorbeeld en a Mobiel voorbeeld. Zoals u elke ontwerpinstelling te wijzigen een kleur , een lettertype , een rand

ℹ️ Het voorbeeld toont uw styling wijzigingen met sample producten. Controleer altijd de laatste look op je live storefront na publicatie.

🎨 Sjablonen & thema's (Kwantiteitsbreuk)

Hoeveelheid Break aanbiedingen worden geleverd met kant-en-klare visuele stijlen, zodat je niet hoeft te ontwerpen vanaf nul.

🖼️ Sjablonen aanbieden

• Wat het doet: Wanneer u een nieuwe Quantity Break aanbod, u begint met het kiezen van een kant-en-klare aanbieding sjabloon onder Selecteer uw voorkeursaanbod. Elk sjabloon wordt geleverd met een eigen pre-styled ontwerp (kleuren, maten, en stijlen) dat u kunt volledig aanpassen achteraf.
• Beschikbare templates:
• • Bundelen & opslaan Een verse Groene kleur thema.
  • Beperkte tijd aanbod oranje kleur thema.
  • Flash Sale Madness! Roze kleur thema.
  • Yay! Het is Bogo! Een levendige toepassing violet kleur thema.
• Hoe gebruikt u dit middel? Selecteer een template en klik Geselecteerd sjabloon toepassen. De sjabloon design ladingen in de editor, en je kunt tweak alles vanaf daar.

📐 Sjabloonindeling

• Wat het doet: Bepaalt hoe de hoeveelheid niveaus zijn gerangschikt in de widget.
• Opties:
• • Verticaal Indrukken worden op elkaar gestapeld.
  • Horizontaal Ingangen zitten naast elkaar.

🎨 Kies een thema

• Wat het doet: Hiermee wisselt u het hele kleurthema van het widget in één klik.
• Opties: Blauw, Rood, of Groen.
• Opmerking: Deze optie verschijnt alleen wanneer de Verticaal sjabloonindeling is geselecteerd.

⚠️ Een thema kiezen vervangt alle van uw huidige ontwerpinstellingen (kleuren, maten, stijlen) met de vooraf ingestelde waarden van het thema. Als u individuele instellingen hebt aangepast, pas dan eerst uw thema toe en daarna fine-tune.

🔤 Typografie en kleur

Dit is de belangrijkste ontwerpkaart, beschikbaar in het tabblad Design van elk aanbod type. Klik op de pijl in de rechterbovenhoek om uit te breiden of in te storten.

🔠 Lettertype

• Wat het doet: Stelt de lettertypefamilie in die gebruikt wordt in het gehele aanbod-widget.
• Hoe gebruikt u dit middel? Kies uit 60+ ingebouwde lettertypen Met inbegrip van klassiekers als Helvetica, Arial, Georgia en Impact, plus populaire Google Fonts zoals Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, en nog veel meer.
• Standaard: Selecteren Gebruik uw themalettertype om automatisch te erven van uw winkel thema's lettertype de gemakkelijkste manier om de widget mengen met uw storefront.

ℹ️ Google Fonts worden automatisch op de storefront geladen wanneer deze geselecteerd is.

📝 Tekstelementstijl (grootte / stijl / kleur)

Onder de lettertypekiezer krijgt elk tekstelement van de widget zijn eigen stylingblok. Elk blok heeft drie instellingen:

• Grootte (px): Controleert de lettergrootte van dat element.
• Stijl: Controleert het gewicht en de nadruk van de tekst. Opties:
• • Licht
  • Regelmatig
  • Cursief
  • Middel
  • Medium cursief
  • Semibold
  • Vet
  • Vet cursief
• Kleur: Verandert de tekstkleur met behulp van de kleurkiezer of hex-invoer.

⚠️ Grootte kan niet groter zijn dan 20px

De beschikbare elementen zijn afhankelijk van het soort aanbieding:

📦 Aanbieding & product Addons:

• Bundeltitel De hoofdkop van de bundel widget.
• Productnaam De producttitels in de bundel.
• Productprijs De prijs voor elk product.
• Markering De tekst van de badge (bijv. "Combo") op de gemarkeerde producten.
• Voettekst De voettekst onderaan het widget.
• Totaal Prijs De gecombineerde bundelprijs.
• Knop De "Add to Cart" knoptekst.

🏷️ Hoeveelheid breuk:

• Bloktitel De hoofdrichting boven de inslagen.
• Aanbodtitel De titel van elk level (bv. "2 Pair").
• Kortingslabel De kortingstekst op elk niveau (bijvoorbeeld "Koop 2 Get 1").
• Prijs - De prijs.
• Prijs vergelijken De doorgeslagen oorspronkelijke prijs.
• Tag De badge tekst op een laag (bijv. "Most Popular").
• Ondertiteling De ondertiteltekst op een laag.
• Cadeaulabel / Cadeauprijs / Cadeaulabel
• Voettekst De tekst van de voettekst onder de randjes.
• Markering De gemarkeerde badge tekst.
• Knop De knoptekst.
• Totaal Prijs De totale prijs display.

🧺 Bouw je eigen bundel (BYOB):

• Bloktitel De bundelpagina.
• Omschrijving de omschrijvingstekst onder de rubriek.
• Aanbodtitel De productnamen in de bundel.
• Prijs De prijzen van het product.
• Sticky Bar-tekst De voortgangsboodschap in de kleverige balk (bijv. "Minstens 3 van deze groep nodig").
• Knop De belangrijkste "Add Bundle to Cart" knoptekst.
• Productknop De "Toevoegen" knop op elke productkaart.
• Totaal Prijs De lopende bundel totaal.

🛍️ Upsell Slider:

• Bloktitel De schuifknop (bv. "Vaak samen gekocht").
• Producttitel De naam van het product in de slider.
• Prijs De prijzen van het product.
• Knop De "Add to Cart" knoptekst.

🗂️ Categorie Hoeveelheid breuk:

• Zelfde tekstelementen als Aantal Break (Blok Titel, Aanbieding Titel, Korting Label, Prijs, Tag, Ondertitel, Footer, Knop, Totale Prijs), zonder de gift en vergelijking-prijs styling opties.

🌈 Widget kleuren (Aantal breuk & categorie aantal breuk)

Deze sectie regelt de achtergrond en markeren kleuren van de tier bars. Elke optie is een enkele kleur picker met een hex input.

• Randkleur: De randkleur van het momenteel geselecteerde niveau maakt de actieve keuze opvallen.
• Achtergrondkleur: De achtergrondkleur van het geselecteerde niveau.
• Niet-geselecteerde bar: De achtergrondkleur van alle ongeselecteerde lagen.
• Achtergrondkleur label: De achtergrond achter het kortingslabel op elk niveau.
• Tag achtergrondkleur: De achtergrond van de tag-badge (bijv. "Most Popular").
• Gift Achtergrondkleur: De achtergrond van gratis cadeau rijen (Alleen hoeveelheid Break).
• Gift-tag achtergrondkleur: De achtergrond van de gratis gift tag (Alleen quantity break).

💡 Tip: Gebruik een subtiel contrast tussen de geselecteerde en niet-geselecteerde achtergronden van de balk. Het helpt shoppers direct te zien welke level ze hebben gekozen.

📏 Variantgrootte (aantal onderbrekingen)

• Wat het doet: Bepaalt de grootte van de variantkiezer die op elk niveau wordt getoond wanneer het product varianten heeft.
• Opties: Klein, Middel, of Groot Klik gewoon op een badge om het te selecteren.

📐 Rand

Verkrijgbaar in het tabblad Design van elke aanbieding.

• Randbreedte (0 Past de dikte van de rand rond het widget aan (en niveaubalken voor hoeveelheidsbreuk). Zet het op 0 voor een onbegrensde, platte look.
• Straal aan de rand (0.50px): Bepaalt hoe afgerond de hoeken verschijnen. Lagere waarden geven een scherpe, moderne look; hogere waarden geven een zachte, afgeronde look.

🖌️ Achtergrond & randkleuren (kaarten, voettekst, tags & knoppen)

Beschikbaar voor Bundelaanbieding, Productaddons, Upsell Slideren BYOB. Deze blokken laten je zowel een Randkleur en a Achtergrondkleur voor belangrijke visuele blokken van het widget.

📦 Aanbieding & product Addons:

• Product De productkaarten in de bundel.
• Voettekst De voettekst onderaan het widget.
• Markering De gemarkeerde badge.
• Knop De "Add to Cart" knop.

🛍️ Upsell Slider:

• Product De productkaarten in de slider.
• Knop De "Add to Cart" knop.

🧺 BYOB:

• Knop De belangrijkste "Add Bundle to Cart" knop.
• Productknop De "Toevoegen" knop op elke productkaart.

💡 Tip: Voor knoppen, stel de achtergrondkleur in op de primaire kleur van uw merk en match de randkleur voor een schone, solide knop.

⚙️ Aan/uit/uit/uit/uit/uit (Kwantiteitsbreuk-tabblad)

Een paar visuele opties voor Hoeveelheid Break live in de Algemeen tab onder Instellingen → Uiterlijk en uiterlijk in plaats van het tabblad Ontwerp:

• Eenheidsprijs tonen: Toont de prijs per eenheid binnen elke tier, zodat klanten precies kunnen zien wat elk item kost.
• Toon totale prijs: Toont de totale prijs voor elk niveau.
• Header- en voetregels verbergen: Verwijdert de scheidingslijnen aan de bovenkant en onderkant van het widget voor een schonere, meer minimale look.

ℹ️ BYOB aanbiedingen hebben ook een Sjabloon optie in het tabblad Algemeen (Shelf Pick of Selectie splitsen) dat de algemene indeling van de bundelpagina verandert.

📌 Belangrijke opmerkingen

• ⚠️ Thema's overschrijven aangepaste styling. Het toepassen van een sjabloon of het schakelen van thema's (Quantity Break) herset uw ontwerpinstellingen op de presets van het thema. Altijd thema's eerst toepassen, dan aanpassen.
• ⚠️ Tekstgroottelimiet. Individuele tekst-elementen kunnen niet meer dan 20px overschrijden grotere waarden leiden tot een validatiefout.
• ℹ️ Lettertype past widget-wide toe. De lettertypeinstelling beïnvloedt alle tekst in het widget; gebruik de per-element stijlinstelling (Bold, Cursief, enz.) om specifieke elementen te benadrukken.
• ℹ️ Themalettertype is de veiligste keuze. "Use your theme font" garandeert dat de widget overeenkomt met uw storefront typografie met nul inspanning.
• ℹ️ Design instellingen zijn per aanbieding. Elk aanbod heeft zijn eigen onafhankelijke ontwerp
• ℹ️ Voorbeeld vs. storefront. De live preview maakt gebruik van monstergegevens. Na het opslaan en publiceren, controleer het aanbod op een echte productpagina om de afstand te bevestigen en lettertypen kijken recht in uw thema.

💡 Voorbeelden & Cases gebruiken

• Kom precies overeen met uw merk: Voer de hex-codes van uw merk in in de Knop, Bloktitel en Highlight kleuren, en stel het lettertype in op de dichtstbijzijnde match met uw themalettertype.
• Maak de beste tier pop (Quantity Break): Geef uw "Most Popular" tier een vet Tag stijl, een contrasterende Tag achtergrond kleur, en een sterke Border kleur, zodat shoppers' ogen gaan recht naar het.
• Schone minimale look: Stel Randbreedte in op 0, verberg de header/voettekstlijnen en gebruik "Gebruik je themalettertype" voor een widget dat er eigen aan uw thema uitziet.
• Hoge contrastknoppen: Donkere knop achtergrond + witte knop tekst + bijpassende rand kleur = een knop die wordt geklikt.
• Zachte, vriendelijke sfeer: Bump Border Radius omhoog (20

🚀 Eindresultaat

Eenmaal met succes geconfigureerd, de Ontwerp & styling instellingen helpen u aanbiedingen te maken die eruit zien als een natuurlijk deel van uw winkel

Met de juiste styling op zijn plaats:

✅ Aanbieden widgets voelen volledig afgestemd op uw winkel branding ✅ Discount niveaus en bundel besparingen worden gemakkelijker te scannen en te begrijpen ✅ De best-value tier en CTA knoppen vallen visueel op ✅ Gratis geschenken en gemarkeerde tags trekken shopper aandacht ✅ Biedt look gepolijst en consistent op zowel desktop als mobiel ✅ Klanten genieten van een gladdere, betrouwbaardere winkelervaring

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