📝 Opmerking V1-selectors zijn gericht op de modules van de legacy cart drawer. Als je hebt geüpgraded naar V2, komen de moduleselectors op deze pagina niet meer overeen — zie de V2 CSS-selectorbibliotheek voor de huidige selectors. Twee uitzonderingen zijn goed om te weten: .upcart-cart en .upcart-cart-body zitten op de drawer-schil in plaats van op een module, dus deze gelden nog steeds op V2. Layout-fixes die de drawer als geheel aanpakken (het beperken van de breedte, het stoppen van horizontale overflow) blijven werken na een upgrade.

Overzicht

Als je het uiterlijk van je winkelwagen wilt aanpassen, zoals een prijs verbergen, de tekstgrootte aanpassen of een knop verplaatsen, dan is dit de plek om te beginnen. Deze CSS-selectorbibliotheek biedt de tools die je nodig hebt om die wijzigingen met je eigen aangepaste code door te voeren. Alle beschikbare CSS-selectors zijn in dit artikel gegroepeerd, samen met links naar handige bronnen voor het schrijven en testen van je stijlen.

Opmerking

Hoewel we deze bibliotheek voor je gemak aanbieden, kan het Upcart-supportteam niet helpen bij het bouwen of repareren van aangepaste code. Dit is onderdeel van ons Aanpassingsbeleid. We raden aan om een Shopify Expert te raadplegen voor oplossingen met aangepaste code. Bekijk Shopify Experts

Upcart CSS-selectors gebruiken

Dit artikel is een bibliotheek met CSS-selectors die je kunt gebruiken om je Upcart cart drawer te stylen en aan te passen. Elke selector richt zich op een specifiek onderdeel van de winkelwagen — zoals de header, productregels, upsells, de beloningenmodule en meer. Je kunt deze selectors gebruiken om:

Elementen te verbergen of anders te stylen
Witruimte, lettertypen of kleuren te wijzigen
De lay-out aan te passen aan de branding van je winkel

Om je CSS toe te passen, open je de Cart Editor, ga je naar Settings, selecteer je het tabblad Custom CSS en plak je je stijlen in de editor.

Wat je moet weten voordat je CSS toevoegt

Voordat je aan je aangepaste stijlen begint, volgen hier enkele tips om alles soepel te laten verlopen. Deze maken het gemakkelijker om wijzigingen te testen, verrassingen te voorkomen en het gewenste uiterlijk te krijgen zonder iets in je winkelwagen kapot te maken.

Checklist voor CSS-aanpassingen:

Test in een veilige omgeving: Gebruik waar mogelijk een voorbeeld of niet-gepubliceerd thema voordat je live gaat.
Begin klein: Voer één wijziging tegelijk door, zodat je gemakkelijker kunt bijhouden wat wel of niet werkte.
Plak stijlen op de juiste plek: Gebruik het veld Upcart Editor > Settings > Custom CSS om je code toe te voegen.
Gebruik de Inspect-tool: Klik met de rechtermuisknop op elementen in je browser en selecteer Inspect om selectors live te vinden en te testen.
Vermijd aannames: Niet elk element verschijnt in alle winkelwagens — test met verschillende winkelwagens (met/zonder beloningen, upsells, enz.).

CSS-selectorbibliotheek

Hieronder vind je een lijst met alle CSS-selectors die beschikbaar zijn in Upcart. Deze zijn gegroepeerd per module (zoals header, producten, upsells, enz.) zodat je gemakkelijker kunt vinden wat je wilt aanpassen. Gebruik dit als referentie bij het schrijven van je eigen stijlen.

Algemene instellingen

Design-module


CSS-selector	Beschrijving
`.upcart-cart`	Hoofdcontainer voor de cart drawer.
`.upcart-cart-body`	Bevat de primaire inhoud van de winkelwagen.
`.upcart-backdrop`	De donkere overlay die achter de winkelwagen verschijnt.

Header-module


CSS-selector	Beschrijving
`.upcart-header`	Container voor de winkelwagen-header, inclusief het logo en de sluitknop.
`.upcart-header-close-button`	Knop om de cart drawer te sluiten.
`.upcart-header-close-button-icon`	Het icoon dat in de sluitknop wordt weergegeven.
`.upcart-header-logo`	Toont de logo-afbeelding in de winkelwagen-header.
`.upcart-header-text`	De titeltekst die in de winkelwagen-header wordt weergegeven.

Body-instellingen

Announcements-module


CSS-selector	Beschrijving
`.upcart-announcement`	Banner- of aankondigingssectie in de winkelwagen.
`.upcart-announcement-skeleton`	Skeleton-placeholder voor de aankondigingssectie.

Rewards-module


CSS-selector	Beschrijving
`.upcart-rewards`	Hoofdcontainer voor de beloningensectie.
`.upcart-rewards-message`	Toont voortgangsberichten met betrekking tot beloningen.
`.upcart-rewards-bar-background`	Achtergrondlaag van de beloningsvoortgangsbalk.
`.upcart-rewards-bar-foreground`	Voorgrond/voortgangsvulling van de beloningsbalk.
`.upcart-rewards-tier`	Vertegenwoordigt een specifiek niveau in het beloningssysteem.
`.upcart-rewards-tier-circle`	Visuele cirkelindicator voor een beloningsniveau.
`.upcart-rewards-tier-icon`	Icoon in de cirkel van een beloningsniveau.
`.upcart-rewards-tier-description`	Beschrijvingstekst onder elk beloningsniveau.
`.upcart-rewards-skeleton`	Skeleton-container voor de beloningensectie.
`.upcart-rewards-message-skeleton`	Skeleton voor het voortgangsbericht van beloningen.
`.upcart-rewards-bar-skeleton`	Skeleton voor de beloningsvoortgangsbalk.

Recommendations-module


CSS-selector	Beschrijving
`.upcart-recommendation-module`	Wrapper voor de hele productaanbevelingsmodule.
`.upcart-recommendations-title`	Titeltekst voor de aanbevelingensectie.
`.upcart-recommendations-shop-now-button`	Knop om een aanbevolen product direct vanuit de winkelwagen te kopen.

Subscription Upgrades-module


CSS-selector	Beschrijving
`.upcart-subscription-upgrade-section`	Sectie voor het promoten van abonnementsupgrades in de winkelwagen.
`.upcart-subscription-upgrade-button`	Knop om een abonnementsupgrade te activeren.
`.upcart-subscription-upgrade-dropdown`	Dropdown om beschikbare abonnementsupgrade-opties te selecteren.

Upsells-module


CSS-selector	Beschrijving
`.upcart-upsells`	Hoofdcontainer voor de upsell-sectie.
`.upcart-upsells-module`	Wrapper voor de upsell-module.
`.upcart-upsells-title`	Titel van de upsell-sectie.
`.upcart-upsells-button`	Knop om upsell-artikelen aan de winkelwagen toe te voegen.
`.upcart-upsell-item-card`	Kaartlay-out voor elk upsell-product.
`.upcart-upsell-item-title`	Titel van het upsell-product.
`.upcart-upsell-item-image-wrapper`	Wrapper rond de afbeelding van het upsell-product.
`.upcart-upsell-item-image`	Afbeelding van het upsell-product.
`.upcart-upsell-item-price`	Prijs van het upsell-artikel.
`.upcart-upsell-item-price-row`	Rij met de prijs en vergelijkingsprijs.
`.upcart-upsell-item-compare-price`	Oorspronkelijke prijs (doorgestreept) van de upsell.
`.upcart-upsell-item-variant-selector`	Variant-dropdown voor upsell-producten.

Productinstellingen


CSS-selector	Beschrijving
`.upcart-products-section`	Container voor alle producten in de winkelwagen.
`.upcart-product-item`	Wrapper voor een individueel productartikel.
`.upcart-product-title`	Naam van het product in de winkelwagen.
`.upcart-product-title-link`	Link die om de producttitel heen staat.
`.upcart-item-prices-row`	Rij met prijsinformatie.
`.upcart-item-price`	Uiteindelijke prijs die aan de klant wordt getoond.
`.upcart-item-compare-price`	Oorspronkelijke (doorgestreepte) prijs.
`.upcart-product-savings`	Specifieke besparing voor een winkelwagenartikel.
`.upcart-item-option`	Container voor productopties zoals maat of kleur.
`.upcart-item-option-category`	Label voor de categorie van de productoptie.
`.upcart-item-option-value`	Waarde van de geselecteerde productoptie.
`.upcart-item-properties`	Wrapper voor aanvullende productmetadata.
`.upcart-item-property`	Individuele producteigenschap.
`.upcart-item-property-subscription`	Toont abonnementsgegevens voor het artikel.
`.upcart-product-quantity-input`	Invoerveld voor het aantal van het product.
`.upcart-product-quantity-minus`	Knop om het aantal te verlagen.
`.upcart-product-quantity-plus`	Knop om het aantal te verhogen.
`.upcart-product-image-wrapper`	Wrapper rond de productafbeelding.
`.upcart-quantity-warning`	Container voor een eventueel bericht over de aantallimiet.
`.upcart-quantity-warning-text`	Tekst van de aantalwaarschuwing die aan de gebruiker wordt getoond.

Add-ons-module


CSS-selector	Beschrijving
`.upcart-addons`	Hoofdcontainer voor de add-ons-sectie.
`.upcart-addons-title`	Titel van de add-ons-sectie.
`.upcart-addons-product-description`	Beschrijving van het add-on-product.
`.upcart-addons-price`	Prijs van het add-on-product.
`.upcart-addons-compare-price`	Oorspronkelijke (doorgestreepte) prijs van de add-on.
`.upcart-addons-toggle`	Schakelaar om een add-on toe te voegen/te verwijderen.
`.upcart-addons-image-wrapper`	Wrapper voor de add-on-afbeelding.

Discount Codes-module

Besparingsregel


CSS-selector	Beschrijving
`.upcart-savings-row`	Wrapper voor de hele kortings-/besparingssectie in de winkelwagen.
`.styles_Footer__savingsCodes__`	Container voor het label (“Discounts”) en de bijbehorende kortingscodes.
`.upcart-discount-code-badge`	Wrapper voor elke kortingscode-badge die in de UI wordt getoond.
`.upcart-discount-code-icon`	Container voor het kortingsicoon (bijv. SVG-ticketsymbool).
`.upcart-discount-code-text`	Tekstuele weergave van de kortingscode (bijv. “AUTO 5”).
`.upcart-savings-amount`	Toont het daadwerkelijk bespaarde bedrag door kortingen.

Express Payments-module

Opmerking

De Express Payments-knoppen in Upcart dienen als visuele containers, terwijl de inhoud en functionaliteit erin volledig door Shopify worden beheerd. Daarom kunnen we het gedrag of uiterlijk ervan niet aanpassen. Raadpleeg de gids Express Payments-module voor meer informatie.


CSS-selector	Beschrijving
`.upcart-express-pay-buttons-container`	Container voor alle express pay-knoppen.
`.upcart-express-pay-buttons-row`	Rijlay-out voor express pay-knoppen.
`.upcart-express-pay-button`	Algemene selector voor een express-betaalknop.
`.upcart-express-pay-button-shop-pay`	Specifieke knop voor Shop Pay.
`.upcart-express-pay-button-google-pay`	Specifieke knop voor Google Pay.
`.upcart-express-pay-button-paypal`	Specifieke knop voor PayPal.
`.upcart-express-pay-button-apple-pay`	Specifieke knop voor Apple Pay.
`.upcart-express-pay-button-amazon-pay`	Specifieke knop voor Amazon Pay.
`.upcart-express-pay-button-meta-pay`	Specifieke knop voor Meta Pay.

Trust Badges-module


CSS-selector	Beschrijving
`.upcart-trust-badge`	Container voor de trust badges.
`.upcart-trust-badge-image`	Afbeeldingselement dat in een trust badge wordt gebruikt.

Additional Notes-module


CSS-selector	Beschrijving
`.NotesModule_NotesModule__`	Container voor de aanvullende notities.
`.NotesModule_NotesModule__titleContainer__`	Titelcontainer van de notitiesectie
`.NotesModule_NotesModule__dropdownContainer__`	Titel voor de dropdown van de notitiesectie
`.NotesModule_NotesModule__textModule__ textarea`	Invoerveld voor het toevoegen van een aangepaste notitie aan de winkelwagen.

Upcart Settings-module

Skeleton-selectors


CSS-selector	Beschrijving
`.upcart-skeleton`	Algemene skeleton-loader-wrapper voor de winkelwagen.
`.upcart-product-item-skeleton`	Placeholder terwijl een product laadt.
`.upcart-product-image-skeleton`	Placeholder voor een productafbeelding.
`.upcart-product-title-skeleton`	Placeholder voor de producttiteltekst.
`.upcart-product-price-container-skeleton`	Placeholder voor het prijsgedeelte.
`.upcart-product-quantity-skeleton`	Placeholder voor de aantalknoppen.
`.upcart-item-option-skeleton`	Placeholder voor artikelopties.
`.upcart-upsells-module-skeleton`	Skeleton voor de upsell-module.
`.upcart-upsells-title-skeleton`	Skeleton voor de titel van de upsell-sectie.
`.upcart-upsell-item-image-skeleton`	Skeleton voor de afbeelding van het upsell-product.
`.upcart-upsell-item-title-skeleton`	Skeleton voor de titel van het upsell-product.
`.upcart-upsell-item-price-skeleton`	Skeleton voor de prijs van het upsell-product.
`.upcart-upsells-button-skeleton`	Skeleton voor de actieknop van de upsell.
`.upcart-trust-badge-skeleton`	Skeleton voor de trust badge-container.
`.upcart-trust-badge-image-skeleton`	Skeleton voor de trust badge-afbeelding.
`.upcart-announcement-skeleton`	Skeleton-placeholder voor aankondigingen.
`.upcart-rewards-skeleton`	Skeleton voor de beloningensectie.
`.upcart-rewards-message-skeleton`	Skeleton voor beloningsberichten.
`.upcart-rewards-bar-skeleton`	Skeleton voor de beloningsvoortgangsbalk.
`.upcart-addons-skeleton`	Skeleton voor de add-ons-sectie.
`.upcart-addons-image-wrapper-skeleton`	Skeleton voor de afbeelding van het add-on-product.
`.upcart-addons-skeleton-text-container`	Skeleton voor tekstinhoud in add-ons.
`.upcart-discount-code-module-skeleton`	Skeleton voor de kortingscodemodule.
`.upcart-discount-code-input-skeleton`	Skeleton voor de kortingscode-invoer.
`.upcart-discount-code-button-skeleton`	Skeleton voor de toepasknop van de kortingscode.
`.upcart-checkout-button-container-skeleton`	Skeleton voor de wrapper van de checkout-knop.
`.upcart-checkout-button-skeleton`	Skeleton voor de checkout-knop.
`.upcart-express-pay-buttons-container-skeleton`	Skeleton voor de express-betaalcontainer.
`.upcart-express-pay-button-skeleton`	Skeleton voor een individuele express-betaalknop.

Handige bronnen om te beginnen:

Aan de slag met Custom CSS: Leer hoe je veilig aangepaste CSS toevoegt in Upcart.
Introductie tot aanpassingen in Upcart: Begrijp hoe aanpassingen werken en waar je moet beginnen.
Gebruik AI om aangepaste code voor Upcart te schrijven: Krijg hulp bij het schrijven van CSS of JavaScript met eenvoudige prompts.
Best practices om winkelwagenconversies te verhogen: Optimaliseer je winkelwagenontwerp met bewezen tips.

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Upcart CSS-selectorbibliotheek (V1)

Overzicht

Opmerking

Upcart CSS-selectors gebruiken

Wat je moet weten voordat je CSS toevoegt

Checklist voor CSS-aanpassingen:

CSS-selectorbibliotheek

Algemene instellingen

Design-module

Header-module

Body-instellingen

Announcements-module

Rewards-module

Recommendations-module

Subscription Upgrades-module

Upsells-module

Productinstellingen

Footer-instellingen

Add-ons-module

Discount Codes-module

Besparingsregel

Express Payments-module

Opmerking

Trust Badges-module

Additional Notes-module

Upcart Settings-module

Skeleton-selectors

Handige bronnen om te beginnen:

​Overzicht

​Opmerking

​Upcart CSS-selectors gebruiken

​Wat je moet weten voordat je CSS toevoegt

​Checklist voor CSS-aanpassingen:

​CSS-selectorbibliotheek

​Algemene instellingen

​Design-module

​Header-module

​Body-instellingen

​Announcements-module

​Rewards-module

​Recommendations-module

​Subscription Upgrades-module

​Upsells-module

​Productinstellingen

​Footer-instellingen

​Add-ons-module

​Discount Codes-module

​Besparingsregel

​Express Payments-module

​Opmerking

​Trust Badges-module

​Additional Notes-module

​Upcart Settings-module

​Skeleton-selectors

​Handige bronnen om te beginnen:

Overzicht

Opmerking

Upcart CSS-selectors gebruiken

Wat je moet weten voordat je CSS toevoegt

Checklist voor CSS-aanpassingen:

CSS-selectorbibliotheek

Algemene instellingen

Design-module

Header-module

Body-instellingen

Announcements-module

Rewards-module

Recommendations-module

Subscription Upgrades-module

Upsells-module

Productinstellingen

Footer-instellingen

Add-ons-module

Discount Codes-module

Besparingsregel

Express Payments-module

Opmerking

Trust Badges-module

Additional Notes-module

Upcart Settings-module

Skeleton-selectors

Handige bronnen om te beginnen: