ℹ️ 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 Upsell & Cross Sell widget kijkt en voelt op uw storefront. Van achtergrondkleuren en afstand tot typografie en knopstyling, elk visueel onderdeel van het widget kan aangepast worden om aan uw merk te passen.

Elke upsell setup (Product pagina, winkelwagen pagina, winkelwagen lade, of aangepaste positie) heeft zijn eigen onafhankelijke ontwerpinstellingen, zodat u kunt stijl een winkelwagen lade widget anders dan een product pagina widget ✨

De meeste kleurgerelateerde instellingen zijn:

• Een visueel Kleurenpicker
• A Hex-code invoer

Dit maakt het gemakkelijk of u liever kleuren visueel kiest of uw exacte merkkleuren plakt.

⚠️ Voordat u begint

De instellingen van het ontwerp configureren:

→ Open een bestaande Upsell & Cross Sell setup → Of maak eerst een nieuwe setup

Open dan de Ontwerp tabblad bovenaan de setup pagina.

ℹ️ Ontwerpinstellingen veranderen alleen hoe de widget blikken. Wat het widget zegt (titels, knop tekst) is geconfigureerd in het tabblad Inhoud, en kan worden vertaald in vertaling.

👀 Voorbeeld live

Terwijl u werkt binnen de Design tab, een live preview wordt naast de instellingen getoond. Elke verandering die u maakt wordt weergegeven in de voorvertoning onmiddellijk

• Bureaubladvoorbeeld
• Mobiel voorbeeld

💡 De preview maakt gebruik van uw echte upsell producten, titel en knop tekst, dus wat je ziet is zeer dicht bij wat klanten zullen zien op uw storefront.

🖼️ Achtergrond

• Wat het doet: Controleert de achtergrond van de upsell widget sectie.
• Beschikbare opties:
• • Enkele kleur Breng een vaste achtergrondkleur aan.
  • Kleurverloop Blend twee kleuren soepel samen.

🎨 Enkele kleur

• Kies een kleur met de Kleurenpicker of handmatig een Hex-code.

🌈 Kleurverloop

• Verloophoekgraad: Bedient de richting van het verloop (0.360°).
• Eerste & laatste kleurkiezers: Selecteer de twee kleuren in het verloop.

💡 Een subtiel verloop kan helpen de upsell sectie onderscheiden van de rest van de pagina zonder botsen met uw thema.

📏 Spatiëring

Deze sectie regelt de afstand zowel binnen als buiten de upsell widget.

• Boven / onderkant: Voegt interne afstand tussen de widget-inhoud en de randen van de sectie toe.
• Boven / onderkant: Voegt ruimte toe buiten de sectie om het te scheiden van de omliggende pagina-elementen.

Alle waarden zijn ingesteld in beeldpunten (px).

💡 Gebruik Buiten ruimte om ademruimte te creëren tussen het widget en elementen zoals de knop Toevoegen aan winkelwagen, en Binnen tussenruimte om inhoud te voorkomen van het aanraken van de sectieranden.

🔤 Typografie

Deze sectie bepaalt hoe alle tekstelementen in de upsell widget verschijnen.

🏷️ Titel upsellen

• Titelgrootte upsellen: Controleert de grootte van de kop van de upsell-sectie (bv. Vaak samen gekocht).
• Upsell titelkleur: Verandert de kleur van de rubriek.

ℹ️ De titeltekst zelf wordt bewerkt in de Inhoud tab, niet hier.

📦 Producttitel

• Producttitelgrootte: Controleert de grootte van elke productnaam in het widget.
• Product Titel kleur: Verandert de producttitelkleur.

💰 Prijs

• Prijsgrootte: Controleert de productprijs tekstgrootte.
• Prijskleur: Verandert de kleur van de productprijs.

➡️ Pijl

• Pijlgrootte: Controleert de grootte van de schuifnavigatiepijlen.
• Pijlkleur: Verandert de kleur van de pijl.

ℹ️ Navigatiepijlen verschijnen alleen wanneer het widget bevat meer dan één product om er doorheen te glijden.

🔘 Knop

Deze sectie past de call-to-action-knop aan (bijv. In winkelwagentje toevoegen) voor elk produkt.

🎨 Knopkleur

• Verandert de achtergrondkleur van de knop. De knoprand gebruikt automatisch dezelfde kleur.

🔤 Knoptekstgrootte & kleur

• Bedient de grootte en kleur van de tekst in de knop.

⭕ Hoekstraal & knopstijl

• Hoekradius: Stelt in hoe afgerond de knop hoeken verschijnen, in pixels.
• Knoppenstijl: Snel wisselen tussen Vierkant, _Afgerond_en Volledig afgerond.

ℹ️ Deze twee instellingen blijven automatisch synchroniseren:

• Kiezen voor een Knopstijl past een overeenkomstige hoekradius toe.
• Typ een Hoekradius waarde updates van de stijl worden lage waarden Vierkant, worden gemiddelde waarden Afgerond, en hoge waarden worden Volledig afgerond.

💪 Lettertypegewicht

• Bepaalt hoe vet of licht de tekst van de knop verschijnt.
• Selecteren Erfstuk om uw thema te volgen bestaande lettertype gewicht, of kies een specifiek gewicht uit 100 (dunnest) naar 900 (boldest).

✍️ Lettertypestijl

• Schakelen tussen:
• • Normaal
  • Cursief
  • Onderstrepen

💾 Uw ontwerp opslaan en publiceren

Ontwerpwijzigingen zijn niet live totdat ze zijn opgeslagen.

1. Maak uw wijzigingen in de Ontwerp tabblad
2. Klik Opslaan in de opbergbalk bovenaan de pagina.
3. Zorg ervoor dat de upsell is Gepubliceerd dus het bijgewerkte ontwerp verschijnt op uw storefront.

⚠️ Let op: Kleur waarden ingevoerd als hex codes worden gevalideerd op opslaan. Als een hex code ongeldig is (bijvoorbeeld ontbreekt de # of bevat ongeldige tekens), opslaan zal worden geblokkeerd en een foutmelding zal het veld dat moet worden vastgesteld markeren.

ℹ️ Als uw ontwerp wordt opgeslagen en gepubliceerd, maar de widget zelf is niet zichtbaar op de storefront, de oorzaak is meestal gerelateerd aan de app inbedden, plaatsing, of targeting te zien Upsell & Cross Sell wordt niet getoond in mijn winkel [Fixed].

🛍️ Hoe ontwerpwijzigingen reflecteren op de storefront

Wanneer u een gepubliceerde setup opslaat, wordt uw winkel automatisch bijgewerkt in de app. De storefront widget leest uw Design-instellingen en past ze toe overal de widget renders:

• Achtergrond → Vult de widget sectie met uw kleur of kleurverloop.
• Spatiëring → Past uw binnenvulling en buitenranden rond het widget.
• Typografie → Styles de upsell titel, product titels, prijzen en navigatie pijlen.
• Knop → Stijlt elk product en voegt toe aan winkelwagenknop, inclusief hoekradius, lettertypegewicht en lettertypestijl.

Omdat elke setup type (Product pagina, Winkelwagen pagina, Winkelwagen Lade, Custom Position) slaat zijn eigen ontwerp, het veranderen van een setup nooit van invloed op het uiterlijk van de anderen.

🚀 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 upsell widget voelt uitgelijnd met uw winkel branding
✅ Productaanbevelingen worden meer merkbaar en boeiend
✅ Prijzen en producttitels blijven leesbaar op zowel desktop als mobiel
✅ CTA-knoppen worden visueel aantrekkelijker
✅ Elke plaatsing kan zijn eigen look en feel dragen
✅ Klanten ervaren een meer gepolijste en betrouwbare interface

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: 15/09/2026