⚠️ BELANGRIJKE MEDEDELING Deze selectors gelden alleen voor versie 2 (V2) van de Upcart-winkelwagenmodules. Als je versie 1 (V1) gebruikt, werken deze selectors niet. Raadpleeg voor V1-winkelwagens de documentatie over versie 1 CSS-selectors, die de legacy-modulestructuur en -selectors behandelt. Om te controleren welke versie je gebruikt, open je de Cart Editor en kijk je bovenaan het linkermenu. Daar verschijnt een dropdown Cart version zodra elke module in de winkelwagen op V2 draait; zie je deze niet, dan heeft je winkelwagen nog V1-modules. Zie voor meer informatie over migreren van V1 naar V2 de V2.0-migratiegids.

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

De volgende selectors werken met versie 2 van de Upcart-winkelwagenmodules. V2 introduceert een gestructureerd naamgevingssysteem met public- en internal-classprefixen.

Belangrijke richtlijnen voor V2-selectors

⚠️ Gebruik alleen public selectors voor aanpassingen

Public selectors (met het prefix upcart-public-) maken deel uit van de stabiele API en zijn veilig te gebruiken voor aangepaste styling
Internal selectors (met het prefix upcart-internal-) zijn gereserveerd voor intern gebruik en kunnen zonder waarschuwing wijzigen

✅ DOEN: Gebruik public class-namen voor styling

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ NIET DOEN: Internal class-namen overschrijven of diepe selectors gebruiken

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

CSS-selectors

Algemene componenten


CSS-selector	Beschrijving
`.upcart-public-skeleton`	Algemene skeleton-loader-wrapper voor de winkelwagen.
`.upcart-public-component__button`	Algemene knopcomponent die in alle modules wordt gebruikt.
`.upcart-public-component-loader`	Laadspinner-component.
`.upcart-public-component-tag`	Wrapper voor de tag-component.
`.upcart-public-component-tag__icon`	Icoon binnen een tag.
`.upcart-public-component-tag__text`	Tekstinhoud van een tag.
`.upcart-public-component-tag__remove-button`	Verwijderknop (“x”) binnen een verwijderbare tag.
`.upcart-public-component-collapse__dropdown-container`	Container voor inklapbare dropdown-secties.
`.upcart-public-component-collapse__expand-icon`	Icoon dat de uit-/ingeklapte status aangeeft.
`.upcart-public-component-carousel__container`	Buitenste wrapper van een carrousel.
`.upcart-public-component-carousel__window`	Clipvenster waarbinnen de slides scrollen.
`.upcart-public-component-carousel__track`	De bewegende track met de slides.
`.upcart-public-component-carousel__slide`	Een enkele carrousel-slide.
`.upcart-public-component-carousel__button`	Pijlknop voor vorige/volgende.
`.upcart-public-component-progress-bar`	Gewone (niet-gesegmenteerde) voortgangsbalkcomponent.
`.upcart-public-component-progress-bar__track`	Track van de gewone voortgangsbalk.
`.upcart-public-component-progress-bar__fill`	Gevulde deel van de gewone voortgangsbalk.
`.upcart-public-component-progress-bar__milestone`	Mijlpaalmarkering op de gewone voortgangsbalk.
`.upcart-public-component-progress-bar__milestone-icon`	Icoon bij een mijlpaal op de gewone voortgangsbalk.
`.upcart-public-component-progress-bar__milestone-label`	Label bij een mijlpaal op de gewone voortgangsbalk.

Header-module


CSS-selector	Beschrijving
`.upcart-public-header`	Hoofdcontainer voor de winkelwagen-header.
`.upcart-public-header__logo`	Logo-afbeelding in de winkelwagen-header.
`.upcart-public-header__close-button`	Knop om de cart drawer te sluiten.
`.upcart-public-header__close-button-icon`	Icoon dat in de sluitknop wordt weergegeven.

Announcements-module


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

Recommendation- en Upsell-modules


CSS-selector	Beschrijving
`.upcart-public-upsell`	Hoofdwrapper voor de upsell-module.
`.upcart-public-upsell__header`	Header van de upsell-sectie.
`.upcart-public-upsell__title`	Titeltekst van de upsell-sectie.
`.upcart-public-upsell__shop-now-button`	Shop Now-knop op upsell-artikelen.
`.upcart-public-upsell__vertical-layout-wrapper`	Wrapper voor de verticale upsell-lay-out.
`.upcart-public-component-upsell-tile`	Kaartlay-out voor elk upsell-/aanbevelingsproduct.
`.upcart-public-component-upsell-tile__image-container`	Container voor de afbeelding van het upsell-product.
`.upcart-public-component-upsell-tile__image`	Afbeelding van het upsell-product.
`.upcart-public-component-upsell-tile__info`	Informatiesectie van de upsell-tegel.
`.upcart-public-component-upsell-tile__title-link`	Linkwrapper voor de producttitel.
`.upcart-public-component-upsell-tile__title`	Titel van het upsell-product.
`.upcart-public-component-upsell-tile__rating-row`	Rij met productbeoordelingen.
`.upcart-public-component-upsell-tile__stars`	Weergave van de sterrenbeoordeling.
`.upcart-public-component-upsell-tile__star--partial`	Gedeeltelijke ster voor fractionele beoordelingen.
`.upcart-public-component-upsell-tile__reviews`	Weergave van het aantal reviews.
`.upcart-public-component-upsell-tile__price-row`	Rij met prijsinformatie.
`.upcart-public-component-upsell-tile__price-compare-at`	Oorspronkelijke (doorgestreepte) prijs van de upsell.
`.upcart-public-component-upsell-tile__price`	Huidige prijs van het upsell-artikel.
`.upcart-public-component-upsell-tile__variant-row`	Rij met de variantselectie.
`.upcart-public-upsell__skeleton`	Skeleton-placeholder voor de upsell-module.
`.upcart-public-upsell__skeleton-title`	Skeleton voor de titel van de upsell-sectie.
`.upcart-public-upsell__skeleton-image`	Skeleton voor de afbeelding van het upsell-product.
`.upcart-public-upsell__skeleton-product-title`	Skeleton voor de titel van het upsell-product.
`.upcart-public-upsell__skeleton-product-price`	Skeleton voor de prijs van het upsell-product.

Notes-module


CSS-selector	Beschrijving
`.upcart-public-notes`	Hoofdcontainer voor de notitiesectie.
`.upcart-public-notes__text-container`	Container voor het tekstgebied van de notities.
`.upcart-public-notes__textarea`	Invoerveld voor het toevoegen van een aangepaste notitie aan de winkelwagen.

Kortingscodemodule


CSS-selector	Beschrijving
`.upcart-public-discount-code`	Hoofdcontainer voor de kortingscodesectie.
`.upcart-public-discount-code__form`	Formulierwrapper voor de kortingscode-invoer.
`.upcart-public-discount-code__input-wrapper`	Wrapper voor het invoerveld van de kortingscode.
`.upcart-public-discount-code__input`	Invoerveld voor het invoeren van kortingscodes.
`.upcart-public-discount-code__suffix`	Suffix-element voor het invoerveld.
`.upcart-public-discount-code__error`	Weergave van de foutmelding voor ongeldige codes.
`.upcart-public-discount-code__button`	Knop om de kortingscode toe te passen.
`.upcart-public-discount-code__skeleton`	Skeleton-placeholder voor de kortingscodemodule.
`.upcart-public-discount-code__skeleton-input`	Skeleton voor het invoerveld van de kortingscode.
`.upcart-public-discount-code__skeleton-button`	Skeleton voor de toepasknop van de kortingscode.

Trust badges-module


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

Gestaffelde beloningenmodule


CSS-selector	Beschrijving
`.upcart-public-rewards`	Hoofdcontainer voor de beloningensectie.
`.upcart-public-rewards__message`	Toont voortgangsberichten met betrekking tot beloningen.
`.upcart-public-rewards__bar`	Container voor de beloningsvoortgangsbalk.
`.upcart-public-component-segmented-progress-bar`	Gesegmenteerde voortgangsbalkcomponent.
`.upcart-public-component-segmented-progress-bar__segments-container`	Container voor alle segmenten van de voortgangsbalk.
`.upcart-public-component-segmented-progress-bar__segment`	Individueel segment van de voortgangsbalk.
`.upcart-public-component-segmented-progress-bar__segment-fill`	Gevulde deel van een voortgangsbalksegment.
`.upcart-public-component-segmented-progress-bar__milestone`	Mijlpaalmarkering op de voortgangsbalk.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	Mijlpaal onderaan gepositioneerd.
`.upcart-public-component-segmented-progress-bar__milestone--top`	Mijlpaal bovenaan gepositioneerd.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	Mijlpaal in het midden gepositioneerd.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	Icoon dat bij een mijlpaal wordt weergegeven.
`.upcart-public-component-segmented-progress-bar__milestone-label`	Labeltekst voor een mijlpaal.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	Rechts uitgelijnd mijlpaallabel.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	Gecentreerd mijlpaallabel.
`.upcart-public-rewards__skeleton`	Skeleton-container voor de beloningensectie.
`.upcart-public-rewards__skeleton-message`	Skeleton voor het voortgangsbericht van beloningen.
`.upcart-public-rewards__skeleton-bar`	Skeleton voor de beloningsvoortgangsbalk.

Cart items-module


CSS-selector	Beschrijving
`.upcart-public-cart-items`	Hoofdwrapper voor de lijst met winkelwagenartikelen.
`.upcart-public-cart-item`	Wrapper voor een individueel winkelwagenartikel.
`.upcart-public-cart-items-skeleton__content`	Skeleton-loader voor winkelwagenartikelen.
`.upcart-public-component-product-tile`	Wrapper voor een individueel productartikel in de winkelwagen.
`.upcart-public-component-product-tile__content`	Inhoudsgebied van de producttegel.
`.upcart-public-component-product-tile__image-wrapper`	Wrapper rond de productafbeelding.
`.upcart-public-component-product-tile__image`	Afbeelding van het product in de winkelwagen.
`.upcart-public-component-product-tile__info`	Informatiesectie van de producttegel.
`.upcart-public-component-product-tile__header`	Headersectie van de producttegel.
`.upcart-public-component-product-tile__product-title`	Naam van het product in de winkelwagen.
`.upcart-public-component-product-tile__title-link`	Link die om de producttitel heen staat.
`.upcart-public-component-product-tile__remove-button`	Knop om het product uit de winkelwagen te verwijderen.
`.upcart-public-component-product-tile__variant`	Weergave van variantinformatie.
`.upcart-public-component-product-tile__properties`	Wrapper voor aanvullende productmetadata.
`.upcart-public-component-product-tile__bundle`	Sectie met bundelinformatie.
`.upcart-public-component-product-tile__product-pricing`	Prijssectie van de producttegel.
`.upcart-public-component-product-tile__price-compare-at`	Oorspronkelijke (doorgestreepte) prijs.
`.upcart-public-component-product-tile__price`	Uiteindelijke prijs die aan de klant wordt getoond.
`.upcart-public-component-product-tile__price-group`	Wrapper rond de prijs en de vergelijkingsprijs.
`.upcart-public-component-product-tile__savings`	Specifieke besparing voor een winkelwagenartikel.
`.upcart-public-component-product-tile__controls`	Sectie met bedieningselementen (aantal, enz.).
`.upcart-public-component-product-tile__quantity-selector`	Wrapper voor de aantalkiezer.
`.upcart-public-component-product-tile__quantity-minus`	Knop om het aantal te verlagen.
`.upcart-public-component-product-tile__quantity-plus`	Knop om het aantal te verhogen.
`.upcart-public-component-product-tile__discount-codes`	Kortingscodes die op het artikel zijn toegepast.
`.upcart-public-component-product-tile__subscription-upgrade`	Sectie voor abonnementsupgrades.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	Knop die de abonnementsupgrade toepast.
`.upcart-public-component-product-tile__select-wrapper`	Wrapper voor de select-dropdown.
`.upcart-public-component-product-tile__select`	Select-dropdown-element.
`.upcart-public-product-properties__subscription`	Toont abonnementsgegevens voor het artikel.
`.upcart-public-product-properties__item`	Individuele producteigenschap.
`.upcart-public-product-properties__link`	Link binnen de producteigenschappen.
`.upcart-public-cart-items__key-value-pair`	Key-value-paarweergave voor artikeleigenschappen.
`.upcart-public-bundle-properties`	Container voor bundeleigenschappen.
`.upcart-public-bundle-properties__variant-title`	Varianttitel voor bundelartikelen.
`.upcart-public-bundle-properties__header`	Header voor de sectie met bundeleigenschappen.
`.upcart-public-bundle-properties__item-components`	Container voor bundelartikelcomponenten.
`.upcart-public-bundle-properties__item-component-row`	Rij voor elke bundelartikelcomponent.
`.upcart-public-bundle-properties__image-wrapper`	Wrapper voor de afbeelding van het bundelartikel.
`.upcart-public-bundle-properties__content`	Inhoudsgebied voor het bundelartikel.
`.upcart-public-bundle-properties__product-title`	Producttitel voor het bundelartikel.

Add-ons-module


CSS-selector	Beschrijving
`.upcart-public-addons`	Hoofdcontainer voor de add-ons-sectie.
`.upcart-public-addons__image-wrapper`	Wrapper voor de add-on-afbeelding.
`.upcart-public-addons__content-wrapper`	Inhoudswrapper voor add-on-informatie.
`.upcart-public-addons__content-title-wrapper`	Wrapper voor de add-on-titel.
`.upcart-public-addons__content-title`	Titel van het add-on-product.
`.upcart-public-addons__content-price`	Prijssectie voor de add-on.
`.upcart-public-addons__compare-at-price`	Oorspronkelijke (doorgestreepte) prijs van de add-on.
`.upcart-public-addons__price`	Huidige prijs van het add-on-product.
`.upcart-public-addons__content-description`	Beschrijving van het add-on-product.
`.upcart-public-addons__toggle-wrapper`	Wrapper voor de add-on-toggle.
`.upcart-public-addons__toggle`	Schakelaar om een add-on toe te voegen/te verwijderen.
`.upcart-public-addons__toggle-switch`	Switch-element van de toggle.
`.upcart-public-addons__toggle-slider`	Slider-element van de toggle.
`.upcart-public-addons__skeleton`	Skeleton-placeholder voor de add-ons-sectie.
`.upcart-public-addons__skeleton-image`	Skeleton voor de afbeelding van het add-on-product.
`.upcart-public-addons__skeleton-text`	Skeleton voor tekstinhoud in add-ons.

Express payments-module


CSS-selector	Beschrijving
`.upcart-public-express-payments__container`	Container voor express-betaalknoppen.

Cart summary-module


CSS-selector	Beschrijving
`.upcart-public-cart-summary`	Hoofdcontainer voor de winkelwagensamenvatting.
`.upcart-public-cart-summary__discount-codes`	Container voor kortingscodes in de samenvatting.
`.upcart-public-cart-summary__discount-label`	Label voor de kortingssectie.
`.upcart-public-cart-summary__slide-codes`	Schuivende container voor kortingscodes.
`.upcart-public-cart-summary__total-discount`	Weergave van het totale kortingsbedrag.

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.

Referentie winkelwagenfuncties

CSS-referentie

Stijlrecepten

Functionaliteitsrecepten

Aangepaste sjablonen

Openbare API van Upcart

Upcart CSS-selectorbibliotheek (V2)

Overzicht

OPMERKING

Upcart CSS-selectors gebruiken

Wat je moet weten voordat je CSS toevoegt

Checklist voor CSS-aanpassingen:

Belangrijke richtlijnen voor V2-selectors

CSS-selectors

Algemene componenten

Header-module

Announcements-module

Recommendation- en Upsell-modules

Notes-module

Kortingscodemodule

Trust badges-module

Gestaffelde beloningenmodule

Cart items-module

Add-ons-module

Express payments-module

Cart summary-module

Handige bronnen om te beginnen:

​Overzicht

​OPMERKING

​

​Upcart CSS-selectors gebruiken

​Wat je moet weten voordat je CSS toevoegt

​Checklist voor CSS-aanpassingen:

​Belangrijke richtlijnen voor V2-selectors

​

​CSS-selectors

​Algemene componenten

​

​Header-module

​Announcements-module

​Recommendation- en Upsell-modules

​Notes-module

​Kortingscodemodule

​Trust badges-module

​Gestaffelde beloningenmodule

​Cart items-module

​Add-ons-module

​Express payments-module

​Cart summary-module

​Handige bronnen om te beginnen:

​

​

Overzicht

OPMERKING

Upcart CSS-selectors gebruiken

Wat je moet weten voordat je CSS toevoegt

Checklist voor CSS-aanpassingen:

Belangrijke richtlijnen voor V2-selectors

CSS-selectors

Algemene componenten

Header-module

Announcements-module

Recommendation- en Upsell-modules

Notes-module

Kortingscodemodule

Trust badges-module

Gestaffelde beloningenmodule

Cart items-module

Add-ons-module

Express payments-module

Cart summary-module

Handige bronnen om te beginnen: