> ## 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. # Upcart CSS-selectorbibliotheek (V1) > Dit artikel beschrijft de CSS-selectors die beschikbaar zijn in Upcart versie 1, waarmee je aangepaste styling kunt toepassen op de legacy cart drawer. 📝 **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](/nl/upcart/upcart_css_selector_library_v2) 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](/nl/upcart/upcart_customization_policy). We raden aan om een Shopify Expert te raadplegen voor oplossingen met aangepaste code. [Bekijk Shopify Experts](https://www.shopify.com/ca/partners/directory)
# 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**](/nl/upcart/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](/nl/upcart/custom_css):** Leer hoe je veilig aangepaste CSS toevoegt in Upcart. * **[Introductie tot aanpassingen in Upcart](/nl/upcart/getting_started_with_upcart_customizations):** Begrijp hoe aanpassingen werken en waar je moet beginnen. * **[Gebruik AI om aangepaste code voor Upcart te schrijven](/nl/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** Krijg hulp bij het schrijven van CSS of JavaScript met eenvoudige prompts. * **[Best practices om winkelwagenconversies te verhogen](/nl/upcart/best_practices_to_increase_upcart_conversions):** Optimaliseer je winkelwagenontwerp met bewezen tips.