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

> Denne artikel gennemgår de CSS-selektorer, der er tilgængelige i Upcart Version 2, designet til at understøtte tilpasset styling af den opdaterede cart drawer og modulstruktur.

⚠️ **VIGTIG MEDDELELSE**

Disse selektorer gælder **kun for Version 2 (V2)** af Upcarts kurvmoduler. Hvis du bruger **Version 1 (V1)**, virker disse selektorer ikke.

For V1-kurve, se venligst **[dokumentationen for Version 1 CSS-selektorer](/da/upcart/upcart_css_selector_library_v1)**, som dækker den ældre modulstruktur og selektorerne.

For at tjekke, hvilken version du bruger, skal du åbne Cart Editor og kigge øverst i menuen til venstre. En **Cart version**-dropdown vises der, når alle moduler i kurven er på V2; hvis du ikke kan se den, har din kurv stadig V1-moduler. For mere information om migrering fra V1 til V2, se [V2.0-migreringsguiden](/da/upcart/upcart_v20_migration_guide).

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

Hvis du vil ændre kurvens udseende, som at skjule en pris, justere tekststørrelsen eller flytte en knap, er det her, du skal begynde. Dette CSS-selektorbibliotek giver dig de værktøjer, du skal bruge til at lave de ændringer med din egen tilpassede kode.

Alle tilgængelige CSS-selektorer er grupperet i denne artikel sammen med links til nyttige ressourcer til at skrive og teste dine styles.

<div id="note">
  ## BEMÆRK
</div>

Selvom vi stiller dette bibliotek til rådighed, kan Upcarts supportteam **ikke hjælpe med at bygge eller rette tilpasset kode.** Det er en del af vores [tilpasningspolitik](/da/upcart/upcart_customization_policy).

Vi anbefaler at rådføre dig med en Shopify Expert til tilpassede kodeløsninger.

[Se Shopify Experts](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # Sådan bruger du Upcarts CSS-selektorer
</div>

Denne artikel er et **bibliotek af CSS-selektorer**, du kan bruge til at style og tilpasse din Upcart cart drawer. Hver selektor er rettet mod en bestemt del af kurven — som headeren, produktrækker, upsells, rewards-modulet og mere.

Du kan bruge disse selektorer til at:

* Skjule eller omstyle elementer
* Ændre afstande, skrifttyper eller farver
* Justere layoutet efter din butiks branding

For at anvende din CSS skal du åbne Cart Editor, gå til **Settings**, vælge fanen **Custom CSS** og indsætte dine styles i editoren.

<div id="what-to-know-before-adding-css">
  # Hvad du bør vide, før du tilføjer CSS
</div>

Før du kaster dig over dine tilpassede styles, er her et par tips til at få det til at gå glat. De gør det nemmere at teste ændringer, undgå overraskelser og opnå det ønskede look uden at ødelægge noget i din kurv.

<div id="css-customization-checklist">
  ## Tjekliste til CSS-tilpasning:
</div>

* **Test i et sikkert miljø:** Brug en forhåndsvisning eller et ikke-publiceret tema, når det er muligt, før du går live.

* **Start i det små:** Lav én ændring ad gangen, så det er nemmere at spore, hvad der virkede eller ikke virkede.

* **Indsæt styles det rigtige sted:** Brug feltet **Upcart Editor > Settings > Custom CSS** til at tilføje din kode.

* **Brug inspektionsværktøjet:** Højreklik på elementer i din browser, og vælg **Inspect** for at finde og teste selektorer live.

* **Undgå antagelser:** Ikke alle elementer vises i alle kurve — test med forskellige kurve (med/uden rewards, upsells osv.).

Følgende selektorer virker med Version 2 af Upcarts kurvmoduler. V2 introducerer et struktureret navngivningssystem med **public**- og **internal**-klassepræfikser.

<div id="important-guidelines-for-v2-selectors">
  ## **Vigtige retningslinjer for V2-selektorer**
</div>

⚠️ **Brug kun public-selektorer til tilpasning**

* **Public-selektorer** (med præfikset `upcart-public-`) er en del af det stabile API og sikre at bruge til tilpasset styling
* **Internal-selektorer** (med præfikset `upcart-internal-`) er reserveret til intern brug og kan ændres uden varsel

✅ **GØR:** Brug public-klassenavne til styling

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

❌ **UNDGÅ:** At tilsidesætte internal-klassenavne eller bruge dybe selektorer

```
/* ❌ 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-selektorer
</div>

<div id="general-components">
  ### **Generelle komponenter**
</div>

|                                                          |                                                       |
| -------------------------------------------------------- | ----------------------------------------------------- |
| **CSS-selektor**                                         | **Beskrivelse**                                       |
| `.upcart-public-skeleton`                                | Generel skeleton loader-wrapper for kurven.           |
| `.upcart-public-component__button`                       | Generel knapkomponent brugt på tværs af moduler.      |
| `.upcart-public-component-loader`                        | Indlæsningsspinner-komponent.                         |
| `.upcart-public-component-tag`                           | Wrapper for tag-komponenten.                          |
| `.upcart-public-component-tag__icon`                     | Ikon inde i et tag.                                   |
| `.upcart-public-component-tag__text`                     | Tekstindhold i et tag.                                |
| `.upcart-public-component-tag__remove-button`            | Fjern-knap ("x") inde i et tag, der kan fjernes.      |
| `.upcart-public-component-collapse__dropdown-container`  | Container for sammenklappelige dropdown-sektioner.    |
| `.upcart-public-component-collapse__expand-icon`         | Ikon, der viser udvid/sammenklap-tilstand.            |
| `.upcart-public-component-carousel__container`           | Ydre wrapper for en karrusel.                         |
| `.upcart-public-component-carousel__window`              | Klippevindue, som slides scroller inde i.             |
| `.upcart-public-component-carousel__track`               | Det bevægelige spor, der holder slides.               |
| `.upcart-public-component-carousel__slide`               | Et enkelt karrusel-slide.                             |
| `.upcart-public-component-carousel__button`              | Forrige/næste-pileknap.                               |
| `.upcart-public-component-progress-bar`                  | Almindelig (usegmenteret) statusbjælke-komponent.     |
| `.upcart-public-component-progress-bar__track`           | Spor på den almindelige statusbjælke.                 |
| `.upcart-public-component-progress-bar__fill`            | Udfyldt del af den almindelige statusbjælke.          |
| `.upcart-public-component-progress-bar__milestone`       | Milepælsmarkør på den almindelige statusbjælke.       |
| `.upcart-public-component-progress-bar__milestone-icon`  | Ikon ved en milepæl på den almindelige statusbjælke.  |
| `.upcart-public-component-progress-bar__milestone-label` | Label ved en milepæl på den almindelige statusbjælke. |

#

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

|                                            |                                    |
| ------------------------------------------ | ---------------------------------- |
| **CSS-selektor**                           | **Beskrivelse**                    |
| `.upcart-public-header`                    | Hovedcontainer for kurvens header. |
| `.upcart-public-header__logo`              | Logobillede i kurvens header.      |
| `.upcart-public-header__close-button`      | Knap til at lukke cart draweren.   |
| `.upcart-public-header__close-button-icon` | Ikon vist inde i luk-knappen.      |

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

|                                        |                                            |
| -------------------------------------- | ------------------------------------------ |
| **CSS-selektor**                       | **Beskrivelse**                            |
| `.upcart-public-announcement`          | Banner- eller meddelelsessektion i kurven. |
| `.upcart-public-announcement-skeleton` | Skeleton loader for meddelelsesbjælken.    |

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

|                                                          |                                                  |
| -------------------------------------------------------- | ------------------------------------------------ |
| **CSS-selektor**                                         | **Beskrivelse**                                  |
| `.upcart-public-upsell`                                  | Hovedwrapper for upsell-modulet.                 |
| `.upcart-public-upsell__header`                          | Header for upsell-sektionen.                     |
| `.upcart-public-upsell__title`                           | Titeltekst for upsell-sektionen.                 |
| `.upcart-public-upsell__shop-now-button`                 | Shop Now-knap på upsell-varer.                   |
| `.upcart-public-upsell__vertical-layout-wrapper`         | Wrapper for vertikalt upsell-layout.             |
| `.upcart-public-component-upsell-tile`                   | Kortlayout for hvert upsell-/anbefalingsprodukt. |
| `.upcart-public-component-upsell-tile__image-container`  | Container for upsell-produktets billede.         |
| `.upcart-public-component-upsell-tile__image`            | Billede af upsell-produktet.                     |
| `.upcart-public-component-upsell-tile__info`             | Informationssektion på upsell-kortet.            |
| `.upcart-public-component-upsell-tile__title-link`       | Link-wrapper for produkttitlen.                  |
| `.upcart-public-component-upsell-tile__title`            | Titel på upsell-produktet.                       |
| `.upcart-public-component-upsell-tile__rating-row`       | Række med produktbedømmelser.                    |
| `.upcart-public-component-upsell-tile__stars`            | Visning af stjernebedømmelse.                    |
| `.upcart-public-component-upsell-tile__star--partial`    | Delvis stjerne for brøkdelsbedømmelser.          |
| `.upcart-public-component-upsell-tile__reviews`          | Visning af antal anmeldelser.                    |
| `.upcart-public-component-upsell-tile__price-row`        | Række med prisoplysninger.                       |
| `.upcart-public-component-upsell-tile__price-compare-at` | Oprindelig (gennemstreget) pris for upsellen.    |
| `.upcart-public-component-upsell-tile__price`            | Aktuel pris på upsell-varen.                     |
| `.upcart-public-component-upsell-tile__variant-row`      | Række med variantvalg.                           |
| `.upcart-public-upsell__skeleton`                        | Skeleton-pladsholder for upsell-modulet.         |
| `.upcart-public-upsell__skeleton-title`                  | Skeleton for upsell-sektionens titel.            |
| `.upcart-public-upsell__skeleton-image`                  | Skeleton for upsell-produktets billede.          |
| `.upcart-public-upsell__skeleton-product-title`          | Skeleton for upsell-produktets titel.            |
| `.upcart-public-upsell__skeleton-product-price`          | Skeleton for upsell-produktets pris.             |

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

|                                        |                                                               |
| -------------------------------------- | ------------------------------------------------------------- |
| **CSS-selektor**                       | **Beskrivelse**                                               |
| `.upcart-public-notes`                 | Hovedcontainer for notesektionen.                             |
| `.upcart-public-notes__text-container` | Container for noternes tekstområde.                           |
| `.upcart-public-notes__textarea`       | Tekstinputområde til at tilføje en tilpasset note til kurven. |

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

|                                                 |                                            |
| ----------------------------------------------- | ------------------------------------------ |
| **CSS-selektor**                                | **Beskrivelse**                            |
| `.upcart-public-discount-code`                  | Hovedcontainer for rabatkodesektionen.     |
| `.upcart-public-discount-code__form`            | Formular-wrapper for rabatkode-input.      |
| `.upcart-public-discount-code__input-wrapper`   | Wrapper for rabatkode-inputfeltet.         |
| `.upcart-public-discount-code__input`           | Inputfelt til at indtaste rabatkoder.      |
| `.upcart-public-discount-code__suffix`          | Suffiks-element til inputfeltet.           |
| `.upcart-public-discount-code__error`           | Fejlbeskedvisning for ugyldige koder.      |
| `.upcart-public-discount-code__button`          | Knap til at anvende rabatkode.             |
| `.upcart-public-discount-code__skeleton`        | Skeleton-pladsholder for rabatkodemodulet. |
| `.upcart-public-discount-code__skeleton-input`  | Skeleton for rabatkode-inputfeltet.        |
| `.upcart-public-discount-code__skeleton-button` | Skeleton for rabatkodens anvend-knap.      |

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

|                                      |                                       |
| ------------------------------------ | ------------------------------------- |
| **CSS-selektor**                     | **Beskrivelse**                       |
| `.upcart-public-trust-badges`        | Container for trust badges.           |
| `.upcart-public-trust-badges__image` | Billedelement brugt i et trust badge. |

<div id="tiered-rewards-module">
  ### **Tiered rewards-modul**
</div>

|                                                                                  |                                                      |
| -------------------------------------------------------------------------------- | ---------------------------------------------------- |
| **CSS-selektor**                                                                 | **Beskrivelse**                                      |
| `.upcart-public-rewards`                                                         | Hovedcontainer for rewards-sektionen.                |
| `.upcart-public-rewards__message`                                                | Viser fremskridtsbeskeder relateret til belønninger. |
| `.upcart-public-rewards__bar`                                                    | Container for belønningsbjælken.                     |
| `.upcart-public-component-segmented-progress-bar`                                | Segmenteret statusbjælke-komponent.                  |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | Container for alle statusbjælkens segmenter.         |
| `.upcart-public-component-segmented-progress-bar__segment`                       | Enkelt segment af statusbjælken.                     |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | Udfyldningsdel af et statusbjælke-segment.           |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | Milepælsmarkør på statusbjælken.                     |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | Milepæl placeret i bunden.                           |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | Milepæl placeret i toppen.                           |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | Milepæl placeret i midten.                           |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | Ikon vist ved en milepæl.                            |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | Labeltekst for en milepæl.                           |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | Højrejusteret milepælslabel.                         |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | Centreret milepælslabel.                             |
| `.upcart-public-rewards__skeleton`                                               | Skeleton-container for rewards-sektionen.            |
| `.upcart-public-rewards__skeleton-message`                                       | Skeleton for belønningernes fremskridtsbesked.       |
| `.upcart-public-rewards__skeleton-bar`                                           | Skeleton for belønningsbjælken.                      |

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

|                                                                   |                                              |
| ----------------------------------------------------------------- | -------------------------------------------- |
| **CSS-selektor**                                                  | **Beskrivelse**                              |
| `.upcart-public-cart-items`                                       | Hovedwrapper for listen over kurvvarer.      |
| `.upcart-public-cart-item`                                        | Wrapper for den enkelte kurvvare.            |
| `.upcart-public-cart-items-skeleton__content`                     | Skeleton loader for kurvvarer.               |
| `.upcart-public-component-product-tile`                           | Wrapper for en enkelt produktvare i kurven.  |
| `.upcart-public-component-product-tile__content`                  | Indholdsområde på produktkortet.             |
| `.upcart-public-component-product-tile__image-wrapper`            | Wrapper omkring produktbilledet.             |
| `.upcart-public-component-product-tile__image`                    | Billede af produktet i kurven.               |
| `.upcart-public-component-product-tile__info`                     | Informationssektion på produktkortet.        |
| `.upcart-public-component-product-tile__header`                   | Headersektion på produktkortet.              |
| `.upcart-public-component-product-tile__product-title`            | Navn på produktet i kurven.                  |
| `.upcart-public-component-product-tile__title-link`               | Link, der omslutter produkttitlen.           |
| `.upcart-public-component-product-tile__remove-button`            | Knap til at fjerne produktet fra kurven.     |
| `.upcart-public-component-product-tile__variant`                  | Visning af variantinformation.               |
| `.upcart-public-component-product-tile__properties`               | Wrapper for yderligere produktmetadata.      |
| `.upcart-public-component-product-tile__bundle`                   | Sektion for bundle-information.              |
| `.upcart-public-component-product-tile__product-pricing`          | Prissektion på produktkortet.                |
| `.upcart-public-component-product-tile__price-compare-at`         | Oprindelig (gennemstreget) pris.             |
| `.upcart-public-component-product-tile__price`                    | Endelig pris vist til kunden.                |
| `.upcart-public-component-product-tile__price-group`              | Wrapper omkring prisen og compare-at-prisen. |
| `.upcart-public-component-product-tile__savings`                  | Specifik besparelse for en kurvvare.         |
| `.upcart-public-component-product-tile__controls`                 | Kontrolsektion (antal osv.).                 |
| `.upcart-public-component-product-tile__quantity-selector`        | Wrapper for antalsvælgeren.                  |
| `.upcart-public-component-product-tile__quantity-minus`           | Knap til at mindske antal.                   |
| `.upcart-public-component-product-tile__quantity-plus`            | Knap til at øge antal.                       |
| `.upcart-public-component-product-tile__discount-codes`           | Rabatkoder anvendt på varen.                 |
| `.upcart-public-component-product-tile__subscription-upgrade`     | Sektion for abonnementsopgradering.          |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | Knap, der anvender abonnementsopgraderingen. |
| `.upcart-public-component-product-tile__select-wrapper`           | Wrapper for select-dropdown.                 |
| `.upcart-public-component-product-tile__select`                   | Select-dropdown-element.                     |
| `.upcart-public-product-properties__subscription`                 | Viser abonnementsdetaljer for varen.         |
| `.upcart-public-product-properties__item`                         | Enkelt produktegenskab.                      |
| `.upcart-public-product-properties__link`                         | Link inde i produktegenskaber.               |
| `.upcart-public-cart-items__key-value-pair`                       | Nøgle-værdi-visning af vareegenskaber.       |
| `.upcart-public-bundle-properties`                                | Container for bundle-egenskaber.             |
| `.upcart-public-bundle-properties__variant-title`                 | Varianttitel for bundle-varer.               |
| `.upcart-public-bundle-properties__header`                        | Header for sektionen med bundle-egenskaber.  |
| `.upcart-public-bundle-properties__item-components`               | Container for bundle-varens komponenter.     |
| `.upcart-public-bundle-properties__item-component-row`            | Række for hver bundle-varekomponent.         |
| `.upcart-public-bundle-properties__image-wrapper`                 | Wrapper for bundle-varens billede.           |
| `.upcart-public-bundle-properties__content`                       | Indholdsområde for bundle-varen.             |
| `.upcart-public-bundle-properties__product-title`                 | Produkttitel for bundle-varen.               |

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

|                                                |                                                 |
| ---------------------------------------------- | ----------------------------------------------- |
| **CSS-selektor**                               | **Beskrivelse**                                 |
| `.upcart-public-addons`                        | Hovedcontainer for add-ons-sektionen.           |
| `.upcart-public-addons__image-wrapper`         | Wrapper for add-on-billedet.                    |
| `.upcart-public-addons__content-wrapper`       | Indholds-wrapper for add-on-information.        |
| `.upcart-public-addons__content-title-wrapper` | Wrapper for add-on'ens titel.                   |
| `.upcart-public-addons__content-title`         | Titel på add-on-produktet.                      |
| `.upcart-public-addons__content-price`         | Prissektion for add-on'en.                      |
| `.upcart-public-addons__compare-at-price`      | Oprindelig (gennemstreget) pris på add-on'en.   |
| `.upcart-public-addons__price`                 | Aktuel pris på add-on-produktet.                |
| `.upcart-public-addons__content-description`   | Beskrivelse af add-on-produktet.                |
| `.upcart-public-addons__toggle-wrapper`        | Wrapper for add-on-togglen.                     |
| `.upcart-public-addons__toggle`                | Toggle-kontakt til at tilføje/fjerne en add-on. |
| `.upcart-public-addons__toggle-switch`         | Kontakt-element i togglen.                      |
| `.upcart-public-addons__toggle-slider`         | Slider-element i togglen.                       |
| `.upcart-public-addons__skeleton`              | Skeleton-pladsholder for add-ons-sektionen.     |
| `.upcart-public-addons__skeleton-image`        | Skeleton for add-on-produktets billede.         |
| `.upcart-public-addons__skeleton-text`         | Skeleton for tekstindhold i add-ons.            |

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

|                                              |                                        |
| -------------------------------------------- | -------------------------------------- |
| **CSS-selektor**                             | **Beskrivelse**                        |
| `.upcart-public-express-payments__container` | Container for express payment-knapper. |

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

|                                               |                                           |
| --------------------------------------------- | ----------------------------------------- |
| **CSS-selektor**                              | **Beskrivelse**                           |
| `.upcart-public-cart-summary`                 | Hovedcontainer for kurvopsummeringen.     |
| `.upcart-public-cart-summary__discount-codes` | Container for rabatkoder i opsummeringen. |
| `.upcart-public-cart-summary__discount-label` | Label for rabatsektionen.                 |
| `.upcart-public-cart-summary__slide-codes`    | Glidende container for rabatkoder.        |
| `.upcart-public-cart-summary__total-discount` | Visning af samlet rabatbeløb.             |

<div id="helpful-resources-to-get-started">
  ## **Nyttige ressourcer til at komme i gang:**
</div>

* **[Kom godt i gang med tilpasset CSS](/da/upcart/custom_css):** Lær, hvordan du sikkert tilføjer tilpasset CSS i Upcart.
* **[Introduktion til tilpasninger i Upcart](/da/upcart/getting_started_with_upcart_customizations):** Forstå, hvordan tilpasning fungerer, og hvor du skal starte.
* **[Brug AI til at skrive tilpasset kode til Upcart](/da/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** Få hjælp til at skrive CSS eller JavaScript med enkle prompts.
* **[Best practices til at øge kurvkonverteringer](/da/upcart/best_practices_to_increase_upcart_conversions):** Optimér dit kurvdesign med gennemprøvede tips.

##

##