Skip to main content

​
Overzicht

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.

​
Instellingen van de Header-module

​
Algemeen

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. Algemene instellingen van de Upcart Header-module met opties voor hoogte en achtergrondkleur naast een cart-preview

​
Titel

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. Titelopties van de Upcart Header-module: thematitels overnemen, merklogo of aangepaste tekststijlen

​
Overnemen van thematitels

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. 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.

​
Tekststijlen definiëren

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.

​
Sluitknop

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.
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.
Instellingen van de sluitknop van de Upcart Header-module voor locatie, kleuren, icoongrootte en rand

​
Aangepaste template

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.

​
Tips

  • Wil je precieze ruimte of grootte? Gebruik 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. Als je aangepaste wijzigingen nodig hebt, raden we aan contact op te nemen met een Shopify Expert.