> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header-module

> Leer hoe je de header in je Upcart-drawer bijwerkt, inclusief logo, titelstijlen, sluitknop en lay-out.

<div id="overview">
  # Overzicht
</div>

Met de Header-module kun je het bovenste gedeelte van je Upcart-drawer aanpassen met het logo van je merk, titeltekst, lay-out, achtergrondkleur en sluitknop. Visuele opties maken het eenvoudig om je header te stylen zonder exacte pixelgroottes te hoeven definiëren.

<div id="header-module-settings">
  # **Instellingen van de Header-module**
</div>

<div id="general">
  ## **Algemeen**
</div>

**Height** schakelt tussen **Slim** en **Tall** om de verticale ruimte te regelen. **Bottom border** is **None** of **Thin**. **Background color** accepteert een hexcode of de ingebouwde kleurkiezer, en ondersteunt transparantie.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Algemene instellingen van de Upcart Header-module met opties voor hoogte en achtergrondkleur naast een cart-preview" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Titel**
</div>

Er zijn **drie manieren** om de headertitel van je cart drawer te definiëren: de standaard titelstyling van je thema overnemen, het logo van je winkel weergeven of volledig aangepaste tekststijlen maken. Elke methode biedt flexibiliteit, afhankelijk van je designbehoeften.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Titelopties van de Upcart Header-module: thematitels overnemen, merklogo of aangepaste tekststijlen" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Overnemen van thematitels
</div>

Deze optie gebruikt de standaard kopstijlen van je thema, zodat het design visueel consistent blijft met de rest van je site. Je kunt je eigen titel toevoegen via het Text-veld en het aantal cart-items dynamisch opnemen met `{{cart_quantity}}`. De tekstuitlijning kan worden ingesteld op Side of Center, en je kunt het juiste kopniveau H2, H3 of H4 selecteren op basis van de contentstructuur van je winkel.

<div id="brand-logo">
  ## Merklogo
</div>

Als je liever een merklogo in plaats van tekst gebruikt, kun je in dit gedeelte rechtstreeks het logo van je winkel uploaden. Kies of je het logo aan de Side of Center uitlijnt, en schaal het met de slider **Logo size**, die van 14 px tot 48 px loopt. Er is geen verplichte limiet voor het bestand dat je uploadt, maar een PNG-bestand wordt aanbevolen voor schone transparantie en scherpe randen. JPEG's worden ook ondersteund, maar kunnen achtergrondruis bevatten of het detail van het logo verminderen. Houd voor de prestaties de bestandsgrootte geoptimaliseerd.

* We raden een **PNG**-bestand aan voor de beste kwaliteit en ondersteuning voor transparante achtergronden.
* JPEG's werken ook, maar zien er mogelijk minder strak uit, vooral als je logo een achtergrond of fijne details heeft.

<div id="define-text-styles">
  ## Tekststijlen definiëren
</div>

Als je de Text-optie selecteert, krijg je volledige controle over de styling van de titel, onafhankelijk van het thema van je winkel. Je kunt elke aangepaste titel invoeren en `{{cart_quantity}}` toevoegen voor dynamische updates. De tekstuitlijning kan worden ingesteld op Side of Center, met opties om het lettergewicht te wijzigen naar Normal, Semibold of Bold. De lettergrootte is instelbaar van 14px tot 48px met een visuele slider, en je kunt optioneel een tekstkleur-override toepassen.

<div id="close-button">
  # Sluitknop
</div>

De sluitknop is aanpasbaar zodat deze bij het design van je winkel past. **Location** plaatst de knop aan de linker- of rechterkant van de drawer. **Background**, **Icon** en **Border** hebben elk een kleur plus een aparte hoverkleur. **Icon size** is Small, Medium of Large, en **Icon thickness** is Normal of Thick. **Border** is None, Thin, Normal of Thick.

<Note>
  De velden voor de randkleur en de hoverkleur van de rand zijn uitgeschakeld zolang **Border** op **None** staat. Kies eerst een randbreedte en stel daarna de kleuren in.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Instellingen van de sluitknop van de Upcart Header-module voor locatie, kleuren, icoongrootte en rand" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # Aangepaste template
</div>

Op versie 2.0 van de Header-module verschijnt er een code-editor **Custom template** onder de instellingen, met één **Full**-template die de hele module dekt. Deze gebruikt React-gebaseerde JSX, en je moet eerst **Access custom templates** aanvinken onder **Settings > Cart settings > Advanced Settings** in de Cart Editor. Zie [Een aangepaste template instellen](/nl/upcart/setting_up_a_custom_template_in_upcart).

<div id="tips">
  # Tips
</div>

* **Wil je precieze ruimte of grootte?** Gebruik [Custom CSS](/nl/upcart/custom_css) voor volledige controle voorbij de sliders, ideaal voor exacte marges, padding of logoschaal.
* **Test op desktop en mobiel.** Headerelementen zoals tekst, logo en knoppen kunnen op verschillende schermformaten anders worden weergegeven
* **Gebruik de juiste kopniveaus.** Het kiezen van de juiste kop (H2, H3, H4) helpt bij toegankelijkheid en SEO. Volg de structuur van de content van je winkel.

Voor meer manieren om je cart te personaliseren, verken onze [Upcart Help Docs](/nl). Als je aangepaste wijzigingen nodig hebt, raden we aan contact op te nemen met een [Shopify Expert](https://www.shopify.com/ca/partners/directory).