> ## Documentation Index
> Fetch the complete documentation index at: https://storekit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Winkelontwerp en branding aanpassen in storekit
> Configureer het logo, de kleuren, lettertypes, knoppen, menuopmaak en inhoud van je storekit-bestelpagina zodat je winkel overeenkomt met de visuele identiteit van je merk.
Met Design & Branding kun je de look, layout en inhoud van je storekit-bestelpagina aanpassen.
Je kunt het gebruiken om de afbeeldingen, kleuren, typografie, knoppen, menuopmaak, pagina-inhoud, meldingen en andere klantgerichte ontwerpelementen van je winkel bij te werken.
Wijzigingen worden getoond in de preview terwijl je ze maakt, maar ze worden **pas toegepast op je live bestelpagina wanneer je op Save klikt**.
De meeste klanten bestellen vanaf mobiele apparaten, dus we raden aan om de mobiele preview te controleren voordat je je wijzigingen opslaat.
## Wat je kunt aanpassen
De Design & Branding-zijbalk is georganiseerd in drie hoofdsecties:
| Gebied | Wat het bevat |
| -------- | --------------------------------------------------- |
| Branding | Afbeeldingen, Typografie, Knoppen, Kleuren |
| Layout | Menu, Menu-items, Basket, Header-stijl |
| Content | Description, Notices, Order status, Custom sections |
***
## Voordat je begint
| Gebied | Advies |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Toegang | Open je locatie in de storekit-admin en selecteer vervolgens **Design & Branding** in de linkernavigatie. |
| Aanbevolen apparaat | Design & Branding werkt het beste op een desktop of laptop. |
| Preview | De preview wordt bijgewerkt terwijl je wijzigingen maakt, zodat je je ontwerp kunt bekijken voordat je opslaat. |
| Mobiele preview | Controleer altijd de mobiele preview voordat je opslaat, aangezien de meeste klanten mobiel bestellen. |
| Wijzigingen opslaan | Wijzigingen worden pas toegepast op je live bestelpagina nadat je op **Save** klikt. |
| Ongedaan maken / opnieuw doen | Gebruik `Ctrl + Z` om ongedaan te maken en `Ctrl + Y` of `Ctrl + Shift + Z` om opnieuw uit te voeren. |
| Toegang tot functies | Sommige Design & Branding-secties vereisen **storekit+**. Als een sectie vergrendeld is, moet je mogelijk upgraden om toegang te krijgen. |
Als je de pagina verlaat voordat je opslaat, kunnen je wijzigingen verloren gaan.
***
## Toegang tot Design & Branding-functies
Sommige Design & Branding-secties zijn alleen beschikbaar met **storekit+**.
Als een sectie in je admin vergrendeld is, bevat je huidige abonnement mogelijk geen volledige toegang tot Design & Branding. Om alle Design & Branding-opties te ontgrendelen, moet je upgraden naar **storekit+**.
Volledige toegang nodig tot Design & Branding? [Neem contact op met storekit Support](/docs/nl/getting-started/contact-support) om deze functie aan je account toe te voegen. Een **storekit+**-abonnement is vereist.
***
## Branding
Branding-instellingen bepalen de visuele identiteit van je bestelpagina.
De Branding-sectie bevat:
* Afbeeldingen
* Typografie
* Knoppen
* Kleuren
***
### Afbeeldingen
Met de sectie **Images** kun je de belangrijkste afbeeldingsactiva bijwerken die op je bestelpagina worden gebruikt.
| Instelling | Wat het regelt | Waar klanten het kunnen zien | Aanbevolen formaat |
| ------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------ |
| Logo | Je hoofdmerklogo | Header- of heroderdeel, afhankelijk van je gekozen headerstijl | Vierkante afbeelding aanbevolen. Transparante PNG werkt het beste. |
| Nav logo | Logo getoond in de sticky navigatiebalk | Bovenste navigatiebalk wanneer klanten scrollen | Vierkante afbeelding aanbevolen. |
| Favicon | Klein browser-pictogram | Browsertabblad en bladwijzers | Vierkante afbeelding, bijvoorbeeld `32 × 32px` of `180 × 180px`. |
| Header-afbeelding | Hoofdafbeelding gebruikt in de header of hero | Bovenkant van je bestelpagina | Landschapsafbeelding aanbevolen. |
| Pagina-achtergrond | Achtergrondafbeelding achter de bestelpagina | Volledige pagina-achtergrond | Gebruik een afbeelding die goed werkt achter tekst en menu-inhoud. |
| Pay-at-Table-header | Header-afbeelding gebruikt voor Pay-at-Table-bestelling, waar beschikbaar | Pay-at-Table-bestelstroom | Landschapsafbeelding aanbevolen. |
#### Afbeeldingstips
* Gebruik afbeeldingen van hoge kwaliteit die bij je merk passen.
* Houd logo's eenvoudig en gemakkelijk herkenbaar.
* Gebruik vierkante afbeeldingen voor logo's en favicons.
* Gebruik landschapsafbeeldingen voor header-afbeeldingen.
* Plaats belangrijke tekst niet vlakbij de rand van header-afbeeldingen, aangezien afbeeldingen anders kunnen worden bijgesneden op mobiel.
* Controleer altijd de mobiele preview voordat je opslaat.
Header-afbeeldingen kunnen anders worden bijgesneden afhankelijk van het schermformaat. Houd voor het beste resultaat het belangrijkste deel van de afbeelding gecentreerd.
***
### Typografie
Met de sectie **Typografie** kun je de tekststijl aanpassen die over je bestelpagina wordt gebruikt.
Je kunt de typografie aanpassen voor verschillende tekstgebieden, zoals koppen, bodytekst, knoppen en menutekst. Elke typografie-instelling regelt het gebruikte lettertype, of de tekst met hoofdletters wordt geschreven, en de grootteschaal.
| Instelling | Wat het regelt | Impact voor klanten |
| -------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| Font | Het lettertype gebruikt voor het geselecteerde tekstgebied | Verandert de algemene stijl en het merkgevoel van de tekst |
| Capitalisation | Of de geselecteerde tekst in standaardhoofdletters of in hoofdletters verschijnt | Kan koppen, knoppen of labels prominenter doen aanvoelen |
| Size scale | De relatieve grootte van het geselecteerde tekstgebied | Maakt de geselecteerde tekst kleiner of groter op de bestelpagina |
#### Font
De font-instelling regelt het lettertype dat wordt gebruikt voor het geselecteerde tekstgebied.
Standaard kan de bestelpagina het systeemlettertype gebruiken. Je kunt ook een aangepast lettertypebestand uploaden waar dit wordt ondersteund.
Aangepaste lettertypen moeten worden geüpload als `WOFF2`-lettertypebestand.
#### Capitalisation
Met de schakelaar voor hoofdlettergebruik kun je kiezen of het geselecteerde tekstgebied standaard hoofdlettergebruik of uppercase-styling gebruikt.
Dit kan handig zijn om koppen, knoppen of menulabels duidelijker te laten opvallen.
Gebruik uppercase-styling voorzichtig. Lange stukken tekst in hoofdletters kunnen moeilijker te lezen zijn, vooral op mobiel.
#### Size scale
Met de grootteschaal kun je de relatieve grootte van het geselecteerde tekstgebied aanpassen.
Het verkleinen van de grootteschaal maakt de geselecteerde tekst bijvoorbeeld kleiner, terwijl het vergroten ervan de geselecteerde tekst groter maakt. Dit is handig als koppen, productnamen, beschrijvingen of knoppen te groot of te klein lijken voor je winkelontwerp.
#### Typografietips
* Upload een `WOFF2`-lettertypebestand als je een aangepast lettertype gebruikt.
* Kies tekststijlen die gemakkelijk te lezen zijn.
* Gebruik hoofdlettergebruik voorzichtig, vooral voor langere tekst.
* Pas de grootteschaal aan als koppen, menu-items of knoppen er te groot of te klein uitzien.
* Controleer langere productnamen en -beschrijvingen voordat je opslaat.
* Controleer altijd de mobiele preview voordat je opslaat.
Typografiewijzigingen kunnen de spatiëring en lay-out beïnvloeden, vooral op mobiel. Controleer altijd de mobiele preview voordat je opslaat.
***
### Knoppen
Met de sectie **Knoppen** kun je het uiterlijk van de klantgerichte knoppen op je bestelpagina aanpassen.
Knoppen worden gebruikt voor belangrijke klantacties, zoals items aan de winkelmand toevoegen, de winkelmand bekijken, de checkout starten en een bestelling plaatsen.
| Instelling | Wat het beïnvloedt | Impact voor klanten |
| ----------- | ---------------------------------------------------- | ----------------------------------------------------------------- |
| Knopstijl | De algehele look van knoppen | Verandert hoe actieknoppen op de bestelpagina verschijnen |
| Knopvorm | De hoekstijl van de knop, zoals afgerond of vierkant | Verandert het visuele gevoel van knoppen |
| Knopkleuren | Achtergrond- en tekstkleuren van knoppen | Beïnvloedt hoe duidelijk klanten knoppen kunnen zien en gebruiken |
#### Knoptips
* Gebruik kleuren die duidelijk opvallen tegen de pagina-achtergrond.
* Zorg dat de knoptekst gemakkelijk leesbaar is.
* Controleer belangrijke acties zoals **Add to basket**, **View basket** en checkout-knoppen.
* Vermijd knopkleuren die vermengen met de pagina.
Knoppen zijn onderdeel van de bestelreis, dus zorg dat ze duidelijk en gemakkelijk te tikken blijven op mobiel.
***
### Kleuren
Met de sectie **Kleuren** kun je het kleurenpalet van je bestelpagina aanpassen.
Kleurinstellingen beïnvloeden het algemene thema, achtergronden, tekst, accenten, knoppen, menu-items, modifiers en andere klantgerichte elementen.
#### Presets
Presets laten je snel een vooraf gedefinieerd kleurenthema op je bestelpagina toepassen.
Dit kan handig zijn als je wilt beginnen met een kant-en-klare stijl, zoals een minimaal thema, een dark mode-thema of een ander vooraf ingesteld palet, voordat je meer gedetailleerde kleurwijzigingen aanbrengt.
Nadat je een preset hebt gekozen, kun je nog steeds individuele kleurvelden handmatig aanpassen.
#### Contrastwaarschuwingen tonen
De schakelaar **Show contrast warnings** markeert tekst- en achtergrondkleurcombinaties die mogelijk moeilijk te lezen zijn.
Wanneer ingeschakeld, controleert Design & Branding of geselecteerde kleurcombinaties voldoen aan de WCAG AA-contrastrichtlijn.
Contrastwaarschuwingen markeren tekst-/achtergrondparen die niet voldoen aan WCAG AA-contrast: `4.5:1` voor standaardtekst en `3:1` voor grote tekst. Streef naar AA of hoger om leesbaarheid voor alle gebruikers te garanderen.
#### Kleurinstellingen
| Instelling | Wat het beïnvloedt | Tips |
| ------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
| Mobiele browser en desktop nav | De kleur gebruikt voor het mobiele browsergebied en desktopnavigatie | Gebruik een kleur die bij je merk past en de navigatie leesbaar houdt. |
| Pagina-achtergrond | De hoofdachtergrondkleur van de bestelpagina | Gebruik een neutrale kleur waardoor menu-inhoud opvalt. |
| Pagina-achtergrond donkerder | Een donkerdere achtergrondtint gebruikt in sommige pagina-onderdelen | Houd dit dicht genoeg bij de hoofdachtergrond om consistent aan te voelen. |
| Primaire achtergronden | Belangrijkste achtergrondgebieden op de storefront | Werkt meestal het beste als schone, leesbare achtergrondkleur. |
| Secundaire achtergronden | Secundaire panelen of contentgebieden | Gebruik dit om secties subtiel te scheiden zonder de leesbaarheid te verminderen. |
| Achtergrondkleur categorie-scrollnavigatiebalk | Achtergrondkleur voor de categorienavigatiebalk | Zorg dat categorienamen leesbaar blijven. |
| Namen van categorieën en items | Tekstkleur voor categorienamen en itemnamen | Gebruik sterk contrast zodat klanten menu-items gemakkelijk kunnen lezen. |
| Namen van categorienavigatie en modifier-groep | Tekstkleur voor categorienavigatie en modifier-groepsnamen | Houd dit duidelijk, vooral op mobiel. |
| Prijzen | Tekstkleur voor itemprijzen | Prijzen moeten gemakkelijk te lezen zijn en niet te subtiel. |
| Item-beschrijvingen (preview) | Tekstkleur voor verkorte itembeschrijvingen | Gebruik voldoende contrast zodat beschrijvingen leesbaar blijven. |
| Item-beschrijvingen (volledig) | Tekstkleur voor volledige itembeschrijvingen | Controleer langere beschrijvingen op mobiel. |
| Accentkleur | Highlightkleur gebruikt over geselecteerde elementen | Kies een kleur die duidelijk opvalt tegen de achtergrond. |
| Primaire kleur | Belangrijkste themakleur gebruikt op de bestelpagina | Gebruik waar mogelijk je goedgekeurde merkkleur. |
| Secundaire kleur | Ondersteunende themakleur | Gebruik dit om de primaire kleur aan te vullen. |
| Highlight-randkleur | Randkleur gebruikt om geselecteerde of belangrijke elementen te markeren | Zorg dat geselecteerde items gemakkelijk te identificeren zijn. |
| Kleur voor secundaire acties | Kleur gebruikt voor secundaire acties | Houd dit zichtbaar, maar minder prominent dan primaire acties. |
| Overlay-achtergrond | Achtergrondkleur gebruikt voor overlays of modale gebieden | Zorg dat overlay-inhoud leesbaar blijft. |
| Secundaire achtergrond transparant | Transparante secundaire achtergrondkleur | Gebruik voorzichtig zodat tekst en knoppen duidelijk blijven. |
| Modifier-card-achtergrond | Achtergrondkleur voor modifier-optiekaarten | Zorg dat modifier-opties gemakkelijk te scannen zijn. |
| Achtergrondkleur voor geselecteerde modifier-card | Achtergrondkleur voor geselecteerde modifier-opties | Geselecteerde opties moeten visueel duidelijk zijn. |
| Randen en schaduwen | Rand- en schaduwstyling voor sommige pagina-elementen | Gebruik subtiele styling om inhoud te scheiden zonder dat de pagina rommelig aanvoelt. |
#### Kleurtips
* Begin met een preset als je een snel thema wilt, en pas dan individuele kleuren aan zoals nodig.
* Gebruik waar mogelijk je merkkleuren.
* Gebruik exacte hex-codes als je merkrichtlijnen hebt.
* Zet **Show contrast warnings** aan tijdens het bewerken.
* Zorg dat tekst leesbaar blijft tegen de achtergrond.
* Controleer knoppen, winkelmand, checkout, meldingen, modifiers en productbeschrijvingen.
* Bekijk op mobiel voordat je opslaat.
Slecht kleurcontrast kan je bestelpagina moeilijk bruikbaar maken. Klanten moeten productnamen, beschrijvingen, prijzen, meldingen, modifier-opties, winkelmandtotalen en checkout-knoppen duidelijk kunnen lezen.
***
## Layout
Layout-instellingen bepalen hoe je bestelpagina is opgemaakt en hoe klanten door je menu, winkelmand en header bladeren.
De Layout-sectie bevat:
* Menu
* Menu-items
* Basket
* Header-stijl
***
### Menu
Met de sectie **Menu** kun je aanpassen hoe je menu aan klanten wordt getoond.
Je kunt de algemene itemopmaak kiezen, aanpassen hoeveel kolommen op desktop en mobiel worden getoond, de afbeeldingsgrootte bepalen, de itemrichting kiezen en beslissen hoe categorienavigatie-afbeeldingen verschijnen.
Menu-opmaakwijzigingen beïnvloeden hoe klanten door je menu bladeren. Controleer altijd zowel de desktop- als de mobiele preview voordat je opslaat.
#### Items-opmaak
Items-opmaak regelt de algehele structuur die wordt gebruikt om menu-items weer te geven.
| Opmaak | Wat het doet |
| ---------- | -------------------------------------------------- |
| List | Toont menu-items in een eenvoudige verticale lijst |
| 2-col list | Toont menu-items in een tweekoloms lijstopmaak |
| Cards | Toont menu-items als grotere kaartachtige blokken |
| 2-col grid | Toont menu-items in een tweekoloms raster |
| 3-col grid | Toont menu-items in een driekoloms raster |
| Compact | Toont menu-items in een compactere opmaak |
#### Menu-opmaak aanpassen
Met de **Customise**-opties kun je de geselecteerde opmaak in meer detail aanpassen.
| Instelling | Wat het regelt | Impact voor klanten |
| ------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Desktop-kolommen | Aantal kolommen getoond op desktop | Regelt hoeveel menu-items op grotere schermen per rij verschijnen |
| Mobiele kolommen | Aantal kolommen getoond op mobiel | Regelt of menu-items in één of meer kolommen op mobiel verschijnen |
| Afbeeldingsformaat | Formaat van menu-itemafbeeldingen | Beïnvloedt hoe prominent item-afbeeldingen verschijnen |
| Itemrichting | Positie van tekst en afbeelding binnen elk menu-item | Verandert of de afbeelding naast, gedraaid of boven de itemtekst verschijnt |
| Grote afbeeldingen | Gebruikt afbeeldingen met volledige breedte op menu-items | Maakt itemafbeeldingen prominenter waar ondersteund |
| Valutasymbool tonen | Toont het valutasymbool naast prijzen | Toont symbolen zoals `£`, `$` of `€` naast itemprijzen |
| Categorienavigatie-afbeeldingen | Bepaalt waar categorie-afbeeldingen in de navigatie verschijnen | Kan categorie-afbeeldingen alleen op desktop, op desktop en mobiel tonen, of verbergen |
| Stories-positie | Bepaalt waar stories in het menu verschijnen | `0` plaatst stories bovenaan het menu, `1` plaatst ze na de eerste categorie, enzovoort |
#### Itemrichting
Itemrichting regelt hoe de afbeelding en tekst binnen elk menu-item zijn gerangschikt.
| Optie | Wat het doet |
| ------- | ---------------------------------------------------------- |
| Row | Toont de afbeelding en itemdetails naast elkaar |
| Reverse | Draait de opmaak naast elkaar om |
| Stacked | Plaatst de afbeelding en itemdetails boven of onder elkaar |
#### Categorienavigatie-afbeeldingen
Categorienavigatie-afbeeldingen regelen of categorie-afbeeldingen worden getoond in de menunavigatie.
| Optie | Wat het doet |
| ---------------- | ----------------------------------------------------------------- |
| Desktop only | Toont categorienavigatie-afbeeldingen alleen op desktop |
| Desktop & Mobile | Toont categorienavigatie-afbeeldingen op zowel desktop als mobiel |
| None | Verbergt categorienavigatie-afbeeldingen |
#### Menutips
* Kies een opmaak die past bij de grootte en stijl van je menu.
* Gebruik lijst- of compacte opmaken voor eenvoudigere menu's.
* Gebruik kaart- of rasteropmaken als je menu sterk vertrouwt op afbeeldingen.
* Houd mobiele kolommen gemakkelijk te bladeren. Eén kolom is meestal duidelijker voor langere itemnamen of -beschrijvingen.
* Controleer producten met lange namen, lange beschrijvingen, modifiers en afbeeldingen voordat je opslaat.
* Schakel het valutasymbool in als prijzen zonder dit onduidelijk zijn.
* Zorg bij gebruik van categorienavigatie-afbeeldingen dat categorie-afbeeldingen duidelijk en consistent zijn.
* Bekijk zowel desktop als mobiel voordat je opslaat.
Opmaken met meerdere kolommen of grote afbeeldingen kunnen er goed uitzien op desktop maar op mobiel overvol aanvoelen. Controleer altijd de mobiele preview voordat je opslaat.
Design & Branding bepaalt hoe je menu wordt gepresenteerd. Productnamen, prijzen, modifiers, afbeeldingen en beschikbaarheid moeten mogelijk worden bijgewerkt vanuit de menu-editor of een andere relevante zone van de admin.
***
### Menu-items
Met de sectie **Menu-items** kun je aanpassen hoe individuele producten op je bestelpagina verschijnen en hoe itemdetails worden getoond wanneer een klant een item opent.
Dit omvat item-modal-opmaak, modifier-weergave, weergave van lage voorraad, allergenenweergave, macro-informatie, leeftijdsgates en hoeveel regels itemtekst worden getoond.
Menu-iteminstellingen beïnvloeden hoe klanten producten bekijken en selecties maken. Controleer altijd items met afbeeldingen, modifiers, allergenen en lange beschrijvingen voordat je opslaat.
#### Item-modal
De item-modal is het pop-up- of item-detailoverzicht dat klanten zien wanneer ze een menu-item selecteren.
| Instelling | Wat het regelt | Impact voor klanten |
| ---------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Modal-afbeeldingsstijl | Het formaat van de itemafbeelding in de item-modal | Regelt hoe prominent de productafbeelding verschijnt wanneer een item wordt geopend |
| Modal-desktopweergave | De opmaak van de item-modal op desktop | Beïnvloedt hoe de afbeelding, itemdetails, modifiers en acties zijn gerangschikt |
| Contentpositie | De uitlijning van inhoud in de item-modal | Regelt of item-inhoud de standaardopmaak gebruikt of gecentreerd verschijnt |
| Modal-rand | Randstijl, kleur en breedte rond de item-modal | Voegt een rand toe of verwijdert deze rond de modal |
#### Modal-afbeeldingsstijl
| Optie | Wat het doet |
| ------ | ------------------------------------------------- |
| Medium | Toont een middelgrote afbeelding in de item-modal |
| Large | Toont een grotere afbeelding in de item-modal |
#### Modal-desktopweergave
| Optie | Wat het doet |
| ------------------- | ------------------------------------------------------------------- |
| Default | Gebruikt de standaard item-modal-opmaak |
| Desktop wide | Gebruikt een bredere modal-opmaak op desktop |
| Desktop large | Gebruikt een grotere modal-opmaak op desktop |
| Desktop extra large | Gebruikt een extra grote modal-opmaak op desktop |
| Desktop fullscreen | Toont de modal in een fullscreen-achtige opmaak op desktop |
| Desktop info panel | Gebruikt een opmaak met item-informatie getoond in een apart paneel |
#### Contentpositie
| Optie | Wat het doet |
| ------- | --------------------------------------------- |
| Default | Gebruikt de standaard item-content-uitlijning |
| Centred | Centreert de item-content binnen de modal |
#### Modifiers-stijl
Modifier-stijl regelt hoe itemopties en modifier-groepen verschijnen wanneer klanten een item aanpassen.
| Optie | Wat het doet |
| ------------------ | --------------------------------------------------------- |
| Default | Toont modifiers in de standaard lijstopmaak |
| Cards | Toont modifier-opties als kaarten |
| Cards (image only) | Toont modifier-opties als afbeeldingsgerichte kaarten |
| Landscape cards | Toont modifier-opties als bredere landschap-stijl kaarten |
#### Weergave lage voorraad
Weergave lage voorraad regelt of klanten resterende voorraadinformatie kunnen zien voor items met beperkte voorraad.
| Optie | Wat het doet |
| ------------------------ | -------------------------------------------------------------------------- |
| Hide | Toont geen lage voorraad- of voorraadinformatie |
| Low only | Toont een lage voorraad-label wanneer voorraad laag is, zoals `10 or less` |
| Always display inventory | Toont de resterende voorraad aan klanten |
Gebruik voorraadweergave-opties alleen als voorraadniveaus actief worden bijgehouden en nauwkeurig zijn.
#### Allergenenweergave
Allergenenweergave regelt hoe allergenen-informatie op menu-items verschijnt.
| Optie | Wat het doet |
| -------- | --------------------------------------------------------- |
| Default | Toont allergenen in de standaard compacte stijl |
| Extended | Toont allergenen-informatie in een meer uitgebreide stijl |
Allergenen-informatie moet altijd nauwkeurig en up-to-date zijn. Als je niet zeker weet of item-allergenen kloppen, controleer dan de relevante menu-iteminstellingen voordat je op de weergave vertrouwt.
#### Macro-calculator
Macro-calculator regelt of nutritionele macro-informatie aan klanten wordt getoond, waar beschikbaar.
| Optie | Wat het doet |
| -------------- | -------------------------------------------------- |
| Disabled | Toont geen macro-informatie |
| Show on mobile | Toont macro-informatie op mobiel, waar ondersteund |
#### Leeftijdsgate
Leeftijdsgate regelt of klanten wordt gevraagd hun leeftijd te bevestigen voordat ze bepaalde items bekijken of bestellen.
| Optie | Wat het doet |
| ------------ | ---------------------------------------------- |
| Disabled | Toont geen leeftijdsgate |
| Over 18 | Toont een `18+`-leeftijdsbevestiging |
| Challenge 25 | Toont een `25?`-stijl Challenge 25-bevestiging |
Leeftijdsgate-instellingen mogen alleen worden gebruikt waar geschikt voor beperkte producten of locatievereisten.
#### Line clamp menu-itemnaam
Line clamp menu-itemnaam regelt hoeveel regels van de itemnaam worden getoond voordat de tekst wordt ingekort.
| Instelling | Wat het regelt |
| ---------- | --------------------------------------------------------------- |
| Lines | Het maximum aantal regels dat wordt getoond voor menu-itemnamen |
Het instellen op `1` houdt itemnamen bijvoorbeeld waar mogelijk op één regel. Het verhogen van het aantal maakt het mogelijk dat langere itemnamen vollediger worden weergegeven.
#### Item-beschrijvingsregels
Item-beschrijvingsregels regelen hoeveel regels van de itembeschrijving worden getoond in de menu-item-preview.
| Instelling | Wat het regelt |
| ---------- | -------------------------------------------------------- |
| Lines | Het maximum aantal beschrijvingsregels dat wordt getoond |
| `0` | Verbergt itembeschrijvingen in de menu-item-preview |
Dit kan handig zijn als je een schonere menu-opmaak wilt of als beschrijvingen erg lang zijn.
#### Menu-item-tips
* Controleer producten met lange namen.
* Controleer producten met lange beschrijvingen.
* Bekijk items met modifiers of opties.
* Controleer items met productafbeeldingen.
* Controleer allergenenweergave waar allergenen-informatie wordt gebruikt.
* Gebruik lage voorraadweergave alleen als voorraad nauwkeurig is.
* Wees voorzichtig met leeftijdsgate-instellingen en gebruik ze alleen waar geschikt.
* Controleer de item-modal op desktop en mobiel voordat je opslaat.
* Vermijd opmaken die het menu te overvol laten voelen op mobiel.
Menu-iteminstellingen kunnen de bestelreis beïnvloeden. Open voor het opslaan enkele voorbeeldproducten en controleer of klanten itemdetails duidelijk kunnen lezen, modifiers kunnen selecteren en items aan de winkelmand kunnen toevoegen.
Design & Branding bepaalt hoe menu-items worden weergegeven. Productnamen, prijzen, beschrijvingen, afbeeldingen, modifiers, allergenen, voorraad en beschikbaarheid moeten mogelijk worden bijgewerkt vanuit de menu-editor of een andere relevante zone van de admin.
***
### Winkelmand
Met de sectie **Basket** kun je aanpassen hoe de winkelmand van de klant verschijnt tijdens de bestelreis.
Winkelmand-instellingen beïnvloeden hoe klanten geselecteerde items bekijken, prijzen zien en verder gaan naar checkout.
De winkelmand is een belangrijk onderdeel van checkout. Zorg dat klanten hun items duidelijk kunnen bekijken en hun bestelling kunnen plaatsen.
#### Itemafbeeldingen
Itemafbeeldingen regelen of productafbeeldingen worden getoond in de winkelmand.
| Optie | Wat het doet |
| ------ | --------------------------------------------------------- |
| None | Verbergt itemafbeeldingen in de winkelmand |
| Small | Toont kleine itemafbeeldingen naast winkelmand-items |
| Medium | Toont middelgrote itemafbeeldingen naast winkelmand-items |
| Large | Toont grotere itemafbeeldingen naast winkelmand-items |
#### Itemafbeeldingen aanpassen
Met de **Customise**-optie kun je de winkelmandafbeeldingsgrootte fijnafstellen.
| Instelling | Wat het regelt | Impact voor klanten |
| ------------------ | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| Afbeeldingsformaat | Fijnafstelling van de grootte van itemafbeeldingen in de winkelmand | Regelt hoeveel visuele ruimte itemafbeeldingen in de winkelmand innemen |
#### Prijzen
Prijsweergave regelt hoe prijzen in de winkelmand verschijnen.
| Optie | Wat het doet |
| ----------------- | --------------------------------------------------------------------------------------- |
| Show all | Toont itemprijzen en het winkelmandtotaal |
| Hide basket total | Verbergt het winkelmandtotaal terwijl itemprijzen indien beschikbaar nog worden getoond |
| Hide all | Verbergt prijzen in de winkelmand |
Wees voorzichtig met het verbergen van prijzen. Klanten moeten de kosten van hun bestelling duidelijk begrijpen vóór checkout.
#### Auto-breedte checkout-knop
De instelling **Auto-width checkout button** verandert de breedte van de checkout-knop op mobiel.
Wanneer ingeschakeld, gebruikt de checkout-knop een op inhoud aangepaste zwevende knop in plaats van een knop met volledige breedte op mobiel.
| Instelling | Wat het regelt | Impact voor klanten |
| -------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------- |
| Auto-breedte checkout-knop | Verandert de mobiele checkout-knop van volledige breedte naar inhoudsgrootte | Beïnvloedt hoe prominent de checkout-knop op mobiel verschijnt |
#### Winkelmand-tips
* Gebruik itemafbeeldingen als ze klanten helpen producten snel te herkennen.
* Verberg itemafbeeldingen als de winkelmand te overvol aanvoelt.
* Houd prijzen zichtbaar tenzij er een specifieke reden is om ze te verbergen.
* Controleer de winkelmand met meerdere items voordat je opslaat.
* Controleer de winkelmand met modifiers of item-opties.
* Bekijk de checkout-knop op mobiel.
* Zorg dat de checkout-knop gemakkelijk te zien en aan te tikken is.
Wijzigingen in de winkelmand kunnen de checkout-ervaring van de klant beïnvloeden. Controleer altijd de winkelmand op mobiel voordat je opslaat.
***
### Header-stijl
Met de sectie **Header-stijl** kun je de bovenkant van je bestelpagina aanpassen.
De header is een van de eerste dingen die klanten zien wanneer ze je bestelpagina openen, dus het heeft een sterke impact op de algehele look en feel van je winkel.
Toegang tot Header-stijl nodig? [Neem contact op met storekit Support](/docs/nl/getting-started/contact-support) om deze functie aan je account toe te voegen. Een **storekit+**-abonnement is vereist.
#### Wat je kunt aanpassen
| Instelling | Wat het beïnvloedt |
| -------------------------- | ------------------------------------------------- |
| Header-opmaak | Hoe de bovenkant van je bestelpagina is opgemaakt |
| Logoplaatsing | Waar je logo in de header verschijnt |
| Header-afbeeldingsweergave | Hoe je header-afbeelding verschijnt |
| Navigatiestijl | Hoe de bovenste navigatie verschijnt |
#### Header-tips
* Controleer of je logo duidelijk zichtbaar is.
* Gebruik een header-afbeelding die goed werkt op zowel desktop als mobiel.
* Houd belangrijke afbeeldingsinhoud gecentreerd.
* Vermijd header-afbeeldingen met tekst dicht bij de randen.
* Controleer hoe de header eruitziet na scrollen, vooral als een sticky navigatiebalk wordt gebruikt.
Header-afbeeldingen kunnen anders worden weergegeven afhankelijk van het schermformaat. Controleer altijd de mobiele preview voordat je opslaat.
***
## Inhoud
Content-instellingen bepalen extra informatie die op je bestelpagina wordt getoond.
De Content-sectie bevat:
* Description
* Notices
* Order status
* Custom sections
***
### Description
Met de sectie **Description** kun je de locatiebeschrijving die op je bestelpagina wordt getoond bijwerken.
Je kunt de beschrijving gebruiken om je locatie te introduceren, je keuken uit te leggen of nuttige bestelinformatie te verstrekken.
| Instelling | Wat het beïnvloedt | Impact voor klanten |
| ------------------------------ | --------------------------------------- | -------------------------------------------------------------- |
| Winkelbeschrijving | Beschrijvende tekst over je locatie | Helpt klanten je winkel, keuken of bestelervaring te begrijpen |
| Zichtbaarheid van beschrijving | Of en hoe de beschrijving wordt getoond | Beïnvloedt hoeveel informatie klanten op de pagina zien |
#### Beschrijvingstips
* Houd de beschrijving duidelijk en beknopt.
* Gebruik klantvriendelijke bewoording.
* Vermijd lange alinea's.
* Neem geen informatie op die snel verouderd kan raken tenzij je deze wilt onderhouden.
* Controleer hoe de beschrijving op mobiel verschijnt.
#### Voorbeeldgebruik
Je kunt de beschrijving gebruiken voor:
* Een korte locatie-introductie
* Keukenstype
* Bestelinstructies
* Merkboodschap
* Nuttige service-informatie
***
### Meldingen
Met de sectie **Notices** kun je klantgerichte berichten toevoegen aan je bestelpagina.
Meldingen kunnen worden gebruikt voor belangrijke updates, service-informatie of berichten die klanten moeten zien voordat ze bestellen.
#### Menu-melding
De **Menu notice** wordt onderaan je menu getoond.
Het wordt meestal gebruikt voor informatie zoals allergenen, calorieën of servicekosten.
| Instelling | Wat het beïnvloedt | Impact voor klanten |
| -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- |
| Menu-melding | Bericht getoond onderaan het menu | Helpt klanten belangrijke menu-gerelateerde informatie te zien voordat ze bestellen |
| Opmaak | Vet, cursief, onderstreept en hyperlinks | Laat je belangrijke tekst opmaken en nuttige links toevoegen |
| Karakterlimiet | Maximale lengte van melding | Menu-meldingen ondersteunen tot `500` tekens |
#### Gesloten-melding
De **Closed message** wordt getoond wanneer je winkel gesloten of snoozed is.
Hiermee kun je het bericht aanpassen dat klanten zien wanneer bestellen momenteel niet beschikbaar is.
| Instelling | Wat het beïnvloedt | Impact voor klanten |
| -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Gesloten-melding | Bericht getoond wanneer de winkel gesloten of snoozed is | Legt uit waarom bestellen niet beschikbaar is of wanneer klanten het opnieuw moeten proberen |
| Opmaak | Vet, cursief, onderstreept en hyperlinks | Laat je het bericht opmaken en nuttige links toevoegen |
| Karakterlimiet | Maximale lengte van bericht | Gesloten-berichten ondersteunen tot `500` tekens |
| Standaard herstellen | Herstelt het standaard gesloten-bericht | Handig als je wilt terugkeren naar het standaard storekit-bericht |
#### Opmaak en links
Beide meldingen ondersteunen basisopmaakopties:
* Vet
* Cursief
* Onderstreept
* Hyperlinks
Hyperlinks kunnen handig zijn om te linken naar extra informatie, zoals allergenen-advies, voorwaarden of een andere klantgerichte pagina.
Zorg dat alle links die je toevoegt correct en klantgericht zijn voordat je opslaat.
#### Meldingstips
* Houd meldingen kort en duidelijk.
* Gebruik de menu-melding voor informatie gerelateerd aan het menu, zoals allergenen, calorieën of servicekosten.
* Gebruik het gesloten-bericht om uit te leggen waarom bestellen niet beschikbaar is of wanneer klanten het opnieuw moeten proberen.
* Verwijder of update tijdelijke meldingen wanneer ze niet meer relevant zijn.
* Controleer of meldingen niet conflicteren met je openingstijden, menu of service-instellingen.
* Bekijk meldingen op mobiel voordat je opslaat.
Vermijd het toevoegen van meldingen die verouderd, onduidelijk zijn of waarschijnlijk conflicteren met andere winkelinstellingen.
***
### Bestelstatus
Met de sectie **Order status** kun je aanpassen of er een kaart wordt getoond op de bestelstatus-pagina van de klant.
Dit kan klanten helpen locatie- of bezorgingsgerelateerde informatie te begrijpen nadat ze een bestelling hebben geplaatst.
#### Zichtbaarheid van de kaart
Zichtbaarheid van de kaart regelt of de kaart wordt getoond of verborgen op de bestelstatus-pagina.
| Optie | Wat het doet |
| ------- | ------------------------------------------- |
| Visible | Toont de kaart op de bestelstatus-pagina |
| Hidden | Verbergt de kaart op de bestelstatus-pagina |
#### Kaart
De kaartinstellingen laten je aanpassen hoe de kaart verschijnt.
| Instelling | Wat het regelt | Impact voor klanten |
| ---------- | --------------------------------------- | ---------------------------------------------------- |
| Kaartstijl | De visuele stijl van de kaart | Verandert hoe de kaart aan klanten verschijnt |
| Pin-marker | De marker die op de kaart wordt getoond | Helpt de relevante locatie op de kaart aan te duiden |
#### Bestelstatus-tips
* Gebruik **Visible** als de kaart klanten helpt locatie- of bezorginformatie te begrijpen.
* Gebruik **Hidden** als de kaart niet nodig is voor je bestelstroom.
* Controleer de bestelstatus-pagina na het opslaan, indien mogelijk.
* Zorg dat elke kaartmarker of locatie die wordt getoond nauwkeurig is.
De kaart verschijnt mogelijk alleen waar deze wordt ondersteund door de bestelstatus-pagina en je winkelinstellingen.
***
### Aangepaste secties
Met het gebied **Custom sections** kun je extra inhoudsblokken aan je bestelpagina toevoegen.
Aangepaste secties kunnen worden gebruikt om promoties te benadrukken, visuele content toe te voegen, locatie-informatie te delen of aanvullende klantgerichte berichten op te nemen die niet passen in de standaardbeschrijving of meldingen.
Aangepaste secties moeten worden ingeschakeld door storekit Support. [Neem contact op met storekit Support](/docs/nl/getting-started/contact-support) om deze functie aan je account toe te voegen.
#### Een sectie toevoegen
Je kunt kiezen uit verschillende sectiesjablonen:
| Sectietype | Waar het voor wordt gebruikt |
| -------------- | --------------------------------------------------------------------------------------------------------- |
| Blank | Voegt een leeg gedeelte toe dat je vanaf nul kunt aanpassen |
| Hero | Voegt een groot visueel gedeelte toe met een achtergrondafbeelding en koptekst |
| Call to action | Voegt een sectie toe die is ontworpen om klanten aan te moedigen een actie te ondernemen, zoals bestellen |
| Info card | Voegt een eenvoudig informatieblok toe, zoals openingstijden of servicedetails |
| Announcement | Voegt een gemarkeerd berichtblok toe, zoals een promotie of belangrijke update |
| About us | Voegt een visueel gedeelte toe voor het delen van je locatieverhaal of merkboodschap |
***
#### Aangepaste secties bewerken
Nadat je een sectie hebt toegevoegd, kun je de inhoud en het ontwerp bewerken vanuit de aangepaste sectie-editor.
Beschikbare besturingselementen kunnen zijn:
| Besturingselement | Wat het beïnvloedt |
| --------------------- | ---------------------------------------------------------------------------------------- |
| Achtergrondkleur | Stelt de achtergrondkleur van de sectie in |
| Achtergrondafbeelding | Voegt de sectieafbeelding toe of wijzigt deze |
| Afbeeldingspositie | Regelt hoe de achtergrondafbeelding is gepositioneerd, zoals boven, midden of onder |
| Padding | Past de spatiëring binnen de sectie aan |
| Overlay | Voegt een kleuroverlay toe bovenop de afbeelding |
| Rand | Voegt de sectierand toe of past deze aan |
| Marge | Past de spatiëring boven of onder de sectie aan |
| Tekstopmaak | Laat je tekst opmaken met vet, cursief, onderstreept, koppen, uitlijning, kleur en links |
| Tekstformaat | Past de grootte van geselecteerde tekst aan |
| Links | Laat je hyperlinks toevoegen aan sectietekst |
Aangepaste secties ondersteunen hyperlinks. Zorg dat alle links die je toevoegt correct en klantgericht zijn voordat je opslaat.
***
#### Hero
De sectie **Hero** voegt een grote visuele banner toe aan de bestelpagina.
Het is handig om je locatie te introduceren, een sterke merkafbeelding te tonen of een belangrijke boodschap naast het menu te benadrukken.
Veelvoorkomende toepassingen zijn:
* Welkomstberichten
* Merkintroducties
* Seizoenscampagnes
* Featured beeldmateriaal
* Impactvolle visuele inhoud
#### Hero-tips
* Gebruik een landschapsafbeelding van hoge kwaliteit.
* Houd belangrijke afbeeldingsinhoud gecentreerd.
* Gebruik korte, duidelijke koptekst.
* Controleer of tekst leesbaar blijft over de afbeelding.
* Gebruik een overlay als de achtergrondafbeelding de tekst moeilijk leesbaar maakt.
* Controleer zowel desktop- als mobiele preview voordat je opslaat.
Hero-afbeeldingen kunnen anders worden bijgesneden afhankelijk van het schermformaat. Vermijd het plaatsen van belangrijke tekst, logo's of gezichten dicht bij de randen van de afbeelding.
***
#### Call to action
De sectie **Call to action** is ontworpen om klanten aan te moedigen een specifieke actie te ondernemen.
Het bevat meestal een korte boodschap en een link- of knopachtige aanwijzing, zoals nu bestellen of een menu bekijken.
Veelvoorkomende toepassingen zijn:
* Klanten aanmoedigen om te bestellen
* Bezorging of afhaal promoten
* Linken naar een specifieke pagina
* Een campagne markeren
* Klanten doorverwijzen naar een andere service
#### Call to action-tips
* Houd het bericht kort en direct.
* Maak de actie duidelijk.
* Gebruik een link als klanten ergens anders naartoe moeten.
* Controleer of de call-to-action-tekst gemakkelijk leesbaar is.
* Zorg dat de sectie er goed uitziet op mobiel.
***
#### Info card
De sectie **Info card** is handig voor eenvoudige informatieve content.
Het kan worden gebruikt om details te tonen die klanten mogelijk nodig hebben voordat ze bestellen.
Veelvoorkomende toepassingen zijn:
* Openingstijden
* Bezorginformatie
* Afhaalinstructies
* Servicebeschikbaarheid
* Locatie-opmerkingen
* Contactgegevens
#### Info card-tips
* Houd de informatie beknopt.
* Vermijd het toevoegen van te veel tekst.
* Zorg dat de details overeenkomen met je winkelinstellingen.
* Werk de kaart bij als de informatie verandert.
* Controleer de mobiele preview voordat je opslaat.
***
#### Announcement
De sectie **Announcement** voegt een gemarkeerd bericht toe aan de bestelpagina.
Het is handig voor promoties, tijdelijke updates of belangrijke berichten die moeten opvallen.
Veelvoorkomende toepassingen zijn:
* Aanbiedingen voor beperkte tijd
* Gratis bezorgpromoties
* Service-updates
* Vakantieberichten
* Tijdelijke wijzigingen
* Belangrijke herinneringen
#### Announcement-tips
* Houd aankondigingen kort.
* Verwijder of werk tijdelijke aankondigingen bij wanneer ze niet meer relevant zijn.
* Zorg dat promotionele details nauwkeurig zijn.
* Controleer of de aankondiging niet conflicteert met meldingen, menu-instellingen of service-instellingen.
* Gebruik leesbare kleuren met sterk contrast.
Vermijd het live laten staan van tijdelijke aankondigingen nadat ze niet meer relevant zijn.
***
#### About us
Met de sectie **About us** kun je meer delen over je locatie, merk, eten of verhaal.
Het is handig om persoonlijkheid toe te voegen aan je bestelpagina en klanten te helpen te begrijpen wat je locatie uniek maakt.
Veelvoorkomende toepassingen zijn:
* Locatieverhaal
* Merkboodschap
* Voedselfilosofie
* Lokale sourcing-informatie
* Communityboodschap
* Restaurantachtergrond
#### About us-tips
* Houd de tekst klantvriendelijk.
* Vermijd lange alinea's.
* Gebruik een sterke afbeelding die je locatie weerspiegelt.
* Zorg dat de tekst leesbaar blijft over de achtergrond.
* Controleer de sectie op mobiel voordat je opslaat.
***
#### Aangepaste sectie-tips
* Gebruik aangepaste secties om de bestelervaring te ondersteunen, niet om ervan af te leiden.
* Houd content kort en relevant.
* Vermijd het toevoegen van te veel secties.
* Gebruik afbeeldingen van hoge kwaliteit.
* Controleer tekstcontrast over afbeeldingen.
* Zorg dat hyperlinks werken voordat je opslaat.
* Bekijk de volledige bestelpagina op mobiel voordat je opslaat.
Te veel aangepaste secties kunnen de bestelpagina rommelig laten voelen. Houd de pagina gericht op het helpen van klanten om door het menu te bladeren en een bestelling te plaatsen.
***
## Best practices
### Begin met presets en pas dan aan
Voor kleuren, begin met een preset als je een snel thema wilt, en pas dan individuele kleurvelden handmatig aan.
Zet **Show contrast warnings** aan tijdens het bewerken, zodat je kunt controleren of tekst- en achtergrondkleurcombinaties gemakkelijk te lezen zijn.
### Controleer interactieve elementen
Controleer voor het opslaan belangrijke klantacties zoals:
* Toevoegen aan winkelmand
* Modifier-selectie
* Geselecteerde modifier-kaarten
* Winkelmand bekijken
* Checkout
* Bestelstatus-pagina
* Aangepaste sectie-links
### Controleer beperkte of gevoelige inhoud
Als je leeftijdsgates, allergenenweergave, weergave lage voorraad of macro-informatie gebruikt, zorg dan dat de informatie nauwkeurig is voordat je opslaat.
Besteed extra aandacht aan:
* Allergenenlabels
* Voorraadniveaus
* Items met leeftijdsgate
* Nutritionele of macro-informatie
* Prijszichtbaarheid in de winkelmand
### Houd aangepaste secties gefocust
Aangepaste secties moeten de bestelervaring ondersteunen.
Gebruik ze voor nuttige klantgerichte informatie zoals:
* Promoties
* Openingstijden
* Bezorg- of afhaalinformatie
* Locatieverhaal
* Allergenen- of service-informatie
* Calls to action
Vermijd het toevoegen van te veel secties, aangezien dit het bladeren door het menu moeilijker kan maken.
### Controleer mobiele preview
De meeste klanten bestellen vanaf mobiele apparaten, dus controleer altijd de mobiele preview voordat je opslaat.
Besteed extra aandacht aan:
* Bijsnijden van header-afbeelding
* Logo-zichtbaarheid
* Menu-opmaak
* Menu-itemkaarten
* Item-modals
* Modifier-selectie
* Zichtbaarheid van winkelmand
* Opmaak van checkout-knop
* Leesbaarheid van knoppen
* Meldingen
* Aangepaste secties
* Bestelstatus-kaart, waar gebruikt
### Gebruik duidelijke afbeeldingen
Voor het beste resultaat:
* Gebruik vierkante afbeeldingen voor logo's en favicons.
* Gebruik landschapsafbeeldingen voor headers.
* Houd belangrijke afbeeldingsinhoud gecentreerd.
* Vermijd afbeeldingen met veel tekst.
* Vermijd het uploaden van afbeeldingen die wazig of van lage kwaliteit zijn.
### Houd tekst beknopt
Lange tekst kan je bestelpagina moeilijker te gebruiken maken, vooral op mobiel.
Probeer het volgende kort en duidelijk te houden:
* Winkelbeschrijvingen
* Meldingen
* Aangepaste secties
* Productbeschrijvingen
### Prioriteer leesbaarheid
Zorg bij het kiezen van lettertypen en kleuren dat klanten het volgende gemakkelijk kunnen lezen:
* Productnamen
* Productbeschrijvingen
* Prijzen
* Meldingen
* Winkelmandtotalen
* Checkout-knoppen
### Houd de bestelreis duidelijk
Ontwerpwijzigingen moeten bestellen makkelijker maken, niet moeilijker.
Controleer voor het opslaan of klanten gemakkelijk kunnen:
* Door het menu bladeren
* Productopties begrijpen
* Items aan de winkelmand toevoegen
* Hun winkelmand bekijken
* Verder gaan naar checkout
* Een bestelling plaatsen
***
## Probleemoplossing
### Een sectie is vergrendeld of niet beschikbaar
Sommige Design & Branding-secties zijn alleen beschikbaar met **storekit+**.
Als een sectie in je admin vergrendeld is, [neem contact op met storekit Support](/docs/nl/getting-started/contact-support) om deze functie aan je account toe te voegen. Een **storekit+**-abonnement is vereist.
### Mijn tekst is moeilijk te lezen over een afbeelding
Als tekst moeilijk te lezen is over een header-afbeelding, hero-sectie of aangepaste sectie-afbeelding, probeer dan:
* Een donkerdere of lichtere overlay te gebruiken
* De tekstkleur te veranderen
* Een eenvoudigere afbeelding te kiezen
* Belangrijke tekst weg te houden van drukke delen van de afbeelding
* De sectie op mobiel te controleren
### Mijn menu ziet er overvol uit op mobiel
Als het menu te overvol aanvoelt, controleer dan:
* Mobiele kolommen
* Afbeeldingsformaat
* Itemrichting
* Grote afbeeldingen
* Item-beschrijvingsregels
* Line clamp menu-itemnaam
* Categorienavigatie-afbeeldingen
Minder kolommen, kleinere afbeeldingen of kortere beschrijvingspreviews gebruiken kan het menu gemakkelijker te bladeren maken.
### Mijn item-modal ziet er te groot of moeilijk te gebruiken uit
Controleer:
* Modal-afbeeldingsstijl
* Modal-desktopweergave
* Contentpositie
* Modifier-stijl
* Modal-rand
* Itemafbeeldingsformaat
* Mobiele preview
Open een paar producten met modifiers voordat je opslaat.
### Modifier-opties zijn moeilijk te begrijpen
Controleer de geselecteerde modifier-stijl.
Als modifier-opties moeilijk te scannen zijn, probeer dan een eenvoudigere opmaak of zorg dat modifier-namen en -afbeeldingen duidelijk zijn.
### Lage voorraad- of voorraadinformatie ziet er verkeerd uit
Weergave van lage voorraad en voorraad mag alleen worden gebruikt als voorraadniveaus nauwkeurig en actief worden onderhouden.
Als de aantallen er verkeerd uitzien, controleer dan de item-voorraadinstellingen voordat je de weergavestijl wijzigt.
### Allergenen-informatie ontbreekt of is onduidelijk
De allergenenweergave regelt hoe allergenen-informatie verschijnt, maar de allergenen-details zelf moeten mogelijk worden beheerd in de relevante menu-iteminstellingen.
Controleer of allergenen-informatie nauwkeurig is voordat je op de weergave vertrouwt.
### De winkelmand toont prijzen niet zoals verwacht
Controleer de instelling **Prices** in de Basket-sectie.
Winkelmandprijzen kunnen worden ingesteld op:
* Show all
* Hide basket total
* Hide all
Wees voorzichtig met het verbergen van prijzen, aangezien klanten hun bestelkosten duidelijk moeten begrijpen vóór checkout.
### Mijn aangepaste sectielink werkt niet
Controleer of de hyperlink correct en klantgericht is.
Zorg dat de link waar nodig de volledige URL bevat, sla vervolgens op en test deze op de live bestelpagina.
### De bestelstatus-kaart wordt niet getoond
Controleer:
* Zichtbaarheid van de kaart is ingesteld op **Visible**
* De bestelstatus-pagina ondersteunt de kaart voor je winkelinstellingen
* De kaartmarker of locatie is correct geconfigureerd
### Mijn wijzigingen verschijnen in de preview maar niet op de live bestelpagina
Zorg dat je op **Save** hebt geklikt. De preview wordt bijgewerkt terwijl je wijzigingen maakt, maar je live bestelpagina wordt pas bijgewerkt totdat de wijzigingen zijn opgeslagen.
Ververs na het opslaan je live bestelpagina en controleer of je de juiste winkel bekijkt.
### Mijn afbeelding lijkt bijgesneden
Sommige afbeeldingen, vooral header-afbeeldingen, worden automatisch bijgesneden om op verschillende schermformaten te passen.
Controleer de mobiele preview en gebruik een afbeelding waar de belangrijkste inhoud gecentreerd is.
Vermijd het plaatsen van belangrijke tekst, logo's of gezichten dicht bij de rand van header-afbeeldingen, aangezien ze op kleinere schermen kunnen worden bijgesneden.
### Mijn logo of favicon ziet er vervormd uit
Gebruik een vierkante afbeelding voor logo's en favicons.
Transparante PNG-bestanden werken meestal het beste voor logo's.
### Mijn kleuren zijn moeilijk te lezen
Controleer het contrast tussen je tekst, achtergrond en knoppen.
Klanten moeten duidelijk kunnen lezen:
* Productnamen
* Productbeschrijvingen
* Prijzen
* Meldingen
* Winkelmandtotalen
* Checkout-knoppen
### Mijn knoppen vallen niet op
Knopkleuren moeten duidelijk zichtbaar zijn tegen de pagina-achtergrond.
Controleer belangrijke klantacties zoals:
* Toevoegen aan winkelmand
* Winkelmand bekijken
* Checkout
* Bestelling plaatsen
### De mobiele versie ziet er niet goed uit
Schakel over naar mobiele preview en controleer:
* Bijsnijden van header-afbeelding
* Logo-zichtbaarheid
* Menu-categorienavigatie
* Productkaartopmaak
* Zichtbaarheid van winkelmand
* Leesbaarheid van knoppen
* Meldingen en aangepaste secties
### Mijn melding is niet meer relevant
Als een melding werd toegevoegd voor een tijdelijke update, denk er dan aan om deze te verwijderen of bij te werken zodra deze niet meer van toepassing is.
Voorbeelden zijn:
* Vakantie-openingsupdates
* Bezorgvertragingsberichten
* Tijdelijke sluitingsberichten
* Alleen-afhaalberichten
* Keukenprobleem-meldingen
### Mijn pagina voelt te rommelig aan
Te veel content kan de bestelpagina moeilijker te gebruiken maken.
Controleer of je het volgende kunt inkorten of verwijderen:
* Lange beschrijvingen
* Meerdere meldingen
* Te veel aangepaste secties
* Afbeeldingen met veel tekst
* Herhaalde informatie
***
## Wanneer contact opnemen met storekit Support
Neem contact op met storekit Support als:
* Een instelling niet opslaat.
* De live pagina niet wordt bijgewerkt na opslaan.
* Een Design & Branding-sectie vergrendeld is en je deze wilt inschakelen.
* Je een functie wilt toevoegen die **storekit+** vereist.
* Je de ontwerpoptie die je nodig hebt niet kunt vinden.
* Een afbeelding of kleur niet correct wordt weergegeven.
* Tekst of knoppen moeilijk leesbaar blijven na bewerken.
* Je bestelpagina er kapot uitziet na het maken van wijzigingen.
* Een aangepaste sectie niet wordt weergegeven zoals verwacht.
* Een hyperlink in een melding of aangepaste sectie niet werkt.
* De bestelstatus-kaart niet verschijnt zoals verwacht.
* Je hulp nodig hebt bij het aanpassen van een ontwerpelement dat niet beschikbaar is in Design & Branding.
## Related topics
- [Modifiers](/docs/nl/guides/menu/modifiers.md)
- [QR-codes voor je storekit-store downloaden en afdrukken](/docs/nl/guides/store-settings/qr-codes.md)
- [Modificatorgroepen tonen en verbergen](/docs/nl/guides/menu/show-hide-modifiers.md)
- [1. Maak je store aan](/docs/nl/getting-started/launch/create-your-store.md)
- [Store notices en gesloten-store-berichten](/docs/nl/guides/store-settings/store-notices.md)