> ## 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 (V2)

> Dit artikel beschrijft de CSS-selectors die beschikbaar zijn in Upcart versie 2, ontworpen om aangepaste styling te ondersteunen voor de vernieuwde cart drawer en modulestructuur.

⚠️ **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](/nl/upcart/upcart_css_selector_library_v1)**, 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](/nl/upcart/upcart_v20_migration_guide).

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

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.

<div id="note">
  ## OPMERKING
</div>

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)

##

<div id="how-to-use-upcart-css-selectors">
  # Upcart CSS-selectors gebruiken
</div>

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.

<div id="what-to-know-before-adding-css">
  # Wat je moet weten voordat je CSS toevoegt
</div>

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.

<div id="css-customization-checklist">
  ## Checklist voor CSS-aanpassingen:
</div>

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

<div id="important-guidelines-for-v2-selectors">
  ## **Belangrijke richtlijnen voor V2-selectors**
</div>

⚠️ **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;   
}
```

#

<div id="css-selectors">
  # CSS-selectors
</div>

<div id="general-components">
  ### **Algemene componenten**
</div>

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

#

<div id="header-module">
  ### **Header-module**
</div>

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

<div id="announcements-module">
  ### **Announcements-module**
</div>

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

<div id="recommendation-and-upsell-modules">
  ### **Recommendation- en Upsell-modules**
</div>

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

<div id="notes-module">
  ### **Notes-module**
</div>

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

<div id="discount-code-module">
  ### **Kortingscodemodule**
</div>

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

<div id="trust-badges-module">
  ### **Trust badges-module**
</div>

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

<div id="tiered-rewards-module">
  ### **Gestaffelde beloningenmodule**
</div>

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

<div id="cart-items-module">
  ### **Cart items-module**
</div>

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

<div id="add-ons-module">
  ### **Add-ons-module**
</div>

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

<div id="express-payments-module">
  ### **Express payments-module**
</div>

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

<div id="cart-summary-module">
  ### **Cart summary-module**
</div>

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

<div id="helpful-resources-to-get-started">
  ## **Handige bronnen om te beginnen:**
</div>

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

##

##