> ## 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). # ๐ŸŽจ Bundels Aanbieding 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 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**, **Ontwerp**en **Targeting en plaatsing**. Klik **Ontwerp** om de styling-instellingen te openen. * Voor **BYOB** aanbiedingen, de tabbladen zijn **Algemeen**, **Productselectie Logica**en **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 Slider**en **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 โœจ