> ## 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 (V1) > Denne artikel gennemgår de CSS-selektorer, der er tilgængelige i Upcart Version 1, så du kan anvende tilpasset styling på den ældre cart drawer. 📝 **Bemærk** V1-selektorer er rettet mod modulerne i den ældre cart drawer. Hvis du har opgraderet til V2, matcher modulselektorerne på denne side ikke længere — se [V2 CSS-selektorbiblioteket](/da/upcart/upcart_css_selector_library_v2) for aktuelle selektorer. To undtagelser er værd at kende: `.upcart-cart` og `.upcart-cart-body` sidder på selve drawer-skallen og ikke på et modul, så de gælder stadig på V2. Layoutrettelser, der er rettet mod draweren som helhed (begrænsning af bredden, stop af horisontalt overflow), virker fortsat efter en opgradering.
# Oversigt
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.
## **Bemærk**
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)
# Sådan bruger du Upcarts CSS-selektorer
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.
# Hvad du bør vide, før du tilføjer CSS
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.
## Tjekliste til CSS-tilpasning:
* **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.).
# CSS-selektorbibliotek
Nedenfor er en liste over alle CSS-selektorer, der er tilgængelige i Upcart. De er grupperet efter **modul** (som header, produkter, upsells osv.) for at gøre det nemmere for dig at finde det, du vil tilpasse. Brug den som reference, når du skriver dine egne styles.
## Generelle indstillinger
### Design-modul
| | | | ------------------- | ---------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-cart` | Hovedcontainer for cart draweren. | | `.upcart-cart-body` | Indeholder kurvens primære indhold. | | `.upcart-backdrop` | Det mørke overlay, der vises bag kurven. |
### Header-modul
| | | | ---------------------------------- | --------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-header` | Container for kurvens header, inklusive logo og luk-knap. | | `.upcart-header-close-button` | Knap til at lukke cart draweren. | | `.upcart-header-close-button-icon` | Ikonet, der vises inde i luk-knappen. | | `.upcart-header-logo` | Viser logobilledet i kurvens header. | | `.upcart-header-text` | Titelteksten, der vises i kurvens header. |
## Body-indstillinger
### Announcements-modul
| | | | ------------------------------- | ---------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-announcement` | Banner- eller meddelelsessektion i kurven. | | `.upcart-announcement-skeleton` | Skeleton-pladsholder for meddelelsessektionen. |
### Rewards-modul
| | | | ---------------------------------- | ---------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-rewards` | Hovedcontainer for rewards-sektionen. | | `.upcart-rewards-message` | Viser fremskridtsbeskeder relateret til belønninger. | | `.upcart-rewards-bar-background` | Baggrundslag for belønningsbjælken. | | `.upcart-rewards-bar-foreground` | Forgrund/fremskridtsudfyldning af belønningsbjælken. | | `.upcart-rewards-tier` | Repræsenterer et bestemt trin i belønningssystemet. | | `.upcart-rewards-tier-circle` | Visuel cirkelindikator for et belønningstrin. | | `.upcart-rewards-tier-icon` | Ikon inde i et belønningstrins cirkel. | | `.upcart-rewards-tier-description` | Beskrivelsestekst under hvert belønningstrin. | | `.upcart-rewards-skeleton` | Skeleton-container for rewards-sektionen. | | `.upcart-rewards-message-skeleton` | Skeleton for belønningernes fremskridtsbesked. | | `.upcart-rewards-bar-skeleton` | Skeleton for belønningsbjælken. |
### Recommendations-modul
| | | | ----------------------------------------- | --------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-recommendation-module` | Wrapper for hele produktanbefalingsmodulet. | | `.upcart-recommendations-title` | Titeltekst for anbefalingssektionen. | | `.upcart-recommendations-shop-now-button` | Knap til at købe et anbefalet produkt direkte fra kurven. |
### Subscription Upgrades-modul
| | | | --------------------------------------- | ------------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-subscription-upgrade-section` | Sektion til promovering af abonnementsopgraderinger i kurven. | | `.upcart-subscription-upgrade-button` | Knap til at udløse en abonnementsopgradering. | | `.upcart-subscription-upgrade-dropdown` | Dropdown til at vælge tilgængelige abonnementsopgraderinger. |
### Upsells-modul
| | | | -------------------------------------- | --------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-upsells` | Hovedcontainer for upsells-sektionen. | | `.upcart-upsells-module` | Wrapper for upsells-modulet. | | `.upcart-upsells-title` | Titel for upsells-sektionen. | | `.upcart-upsells-button` | Knap til at tilføje upsell-varer til kurven. | | `.upcart-upsell-item-card` | Kortlayout for hvert upsell-produkt. | | `.upcart-upsell-item-title` | Titel på upsell-produktet. | | `.upcart-upsell-item-image-wrapper` | Wrapper omkring upsell-produktets billede. | | `.upcart-upsell-item-image` | Billede af upsell-produktet. | | `.upcart-upsell-item-price` | Pris på upsell-varen. | | `.upcart-upsell-item-price-row` | Række med pris og sammenligningspris. | | `.upcart-upsell-item-compare-price` | Oprindelig pris (gennemstreget) for upsellen. | | `.upcart-upsell-item-variant-selector` | Variant-dropdown for upsell-produkter. |
### Produktindstillinger
| | | | ------------------------------------ | ------------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-products-section` | Container for alle produkter i kurven. | | `.upcart-product-item` | Wrapper for en enkelt produktvare. | | `.upcart-product-title` | Navn på produktet i kurven. | | `.upcart-product-title-link` | Link, der omslutter produkttitlen. | | `.upcart-item-prices-row` | Række, der indeholder prisoplysninger. | | `.upcart-item-price` | Endelig pris vist til kunden. | | `.upcart-item-compare-price` | Oprindelig (gennemstreget) pris. | | `.upcart-product-savings` | Specifik besparelse for en kurvvare. | | `.upcart-item-option` | Container for produktindstillinger som størrelse eller farve. | | `.upcart-item-option-category` | Label for produktindstillingens kategori. | | `.upcart-item-option-value` | Værdi af den valgte produktindstilling. | | `.upcart-item-properties` | Wrapper for yderligere produktmetadata. | | `.upcart-item-property` | Enkelt produktegenskab. | | `.upcart-item-property-subscription` | Viser abonnementsdetaljer for varen. | | `.upcart-product-quantity-input` | Inputfelt for produktets antal. | | `.upcart-product-quantity-minus` | Knap til at mindske antal. | | `.upcart-product-quantity-plus` | Knap til at øge antal. | | `.upcart-product-image-wrapper` | Wrapper omkring produktbilledet. | | `.upcart-quantity-warning` | Container for eventuel besked om antalsgrænse. | | `.upcart-quantity-warning-text` | Tekst for antalsadvarslen vist til brugeren. |
### Add-ons-modul
| | | | ------------------------------------ | ----------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-addons` | Hovedcontainer for add-ons-sektionen. | | `.upcart-addons-title` | Titel for add-ons-sektionen. | | `.upcart-addons-product-description` | Beskrivelse af add-on-produktet. | | `.upcart-addons-price` | Pris på add-on-produktet. | | `.upcart-addons-compare-price` | Oprindelig (gennemstreget) pris på add-on'en. | | `.upcart-addons-toggle` | Toggle-kontakt til at tilføje/fjerne en add-on. | | `.upcart-addons-image-wrapper` | Wrapper for add-on-billedet. |
### Discount Codes-modul
### Besparelsesrække
| | | | -------------------------------- | ------------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-savings-row` | Wrapper for hele rabat-/besparelsessektionen i kurven. | | `.styles_Footer__savingsCodes__` | Container for labelen ("Discounts") og tilhørende rabatkoder. | | `.upcart-discount-code-badge` | Wrapper for hvert rabatkode-badge vist i brugerfladen. | | `.upcart-discount-code-icon` | Container for rabatikonet (f.eks. SVG-billetsymbol). | | `.upcart-discount-code-text` | Tekstlig gengivelse af rabatkoden (f.eks. "AUTO 5"). | | `.upcart-savings-amount` | Viser det faktiske beløb sparet gennem rabatter. |
### Express Payments-modul
## Bemærk
Express Payments-knapperne i Upcart fungerer som visuelle containere, mens indholdet og funktionaliteten i dem styres fuldstændigt af Shopify. Derfor kan vi ikke ændre deres adfærd eller udseende. Se guiden [**Express Payments-modul**](/da/upcart/express_payments_module) for mere information. | | | | --------------------------------------- | --------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-express-pay-buttons-container` | Container for alle express pay-knapper. | | `.upcart-express-pay-buttons-row` | Rækkelayout for express pay-knapper. | | `.upcart-express-pay-button` | Generel selektor for en express payment-knap. | | `.upcart-express-pay-button-shop-pay` | Specifik knap for Shop Pay. | | `.upcart-express-pay-button-google-pay` | Specifik knap for Google Pay. | | `.upcart-express-pay-button-paypal` | Specifik knap for PayPal. | | `.upcart-express-pay-button-apple-pay` | Specifik knap for Apple Pay. | | `.upcart-express-pay-button-amazon-pay` | Specifik knap for Amazon Pay. | | `.upcart-express-pay-button-meta-pay` | Specifik knap for Meta Pay. |
### Trust Badges-modul
| | | | --------------------------- | ------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-trust-badge` | Container for trust badges. | | `.upcart-trust-badge-image` | Billedelement brugt i et trust badge. |
### Additional Notes-modul
| | | | ------------------------------------------------- | -------------------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.NotesModule_NotesModule__` | Container for de ekstra noter. | | `.NotesModule_NotesModule__titleContainer__` | Titelcontainer for notesektionen | | `.NotesModule_NotesModule__dropdownContainer__` | Titel for dropdown-menuen i notesektionen | | `.NotesModule_NotesModule__textModule__ textarea` | Inputområde til at tilføje en tilpasset note til kurven. |
## Upcart Settings-modul
### Skeleton-selektorer
| | | | ------------------------------------------------ | ---------------------------------------------- | | **CSS-selektor** | **Beskrivelse** | | `.upcart-skeleton` | Generel skeleton loader-wrapper for kurven. | | `.upcart-product-item-skeleton` | Pladsholder, mens et produkt indlæses. | | `.upcart-product-image-skeleton` | Pladsholder for et produktbillede. | | `.upcart-product-title-skeleton` | Pladsholder for produkttiteltekst. | | `.upcart-product-price-container-skeleton` | Pladsholder for prisområdet. | | `.upcart-product-quantity-skeleton` | Pladsholder for antalskontroller. | | `.upcart-item-option-skeleton` | Pladsholder for vareindstillinger. | | `.upcart-upsells-module-skeleton` | Skeleton for upsells-modulet. | | `.upcart-upsells-title-skeleton` | Skeleton for upsell-sektionens titel. | | `.upcart-upsell-item-image-skeleton` | Skeleton for upsell-produktets billede. | | `.upcart-upsell-item-title-skeleton` | Skeleton for upsell-produktets titel. | | `.upcart-upsell-item-price-skeleton` | Skeleton for upsell-produktets pris. | | `.upcart-upsells-button-skeleton` | Skeleton for upsell-handlingsknappen. | | `.upcart-trust-badge-skeleton` | Skeleton for trust badge-containeren. | | `.upcart-trust-badge-image-skeleton` | Skeleton for trust badge-billedet. | | `.upcart-announcement-skeleton` | Skeleton-pladsholder for meddelelser. | | `.upcart-rewards-skeleton` | Skeleton for rewards-sektionen. | | `.upcart-rewards-message-skeleton` | Skeleton for belønningsbeskeder. | | `.upcart-rewards-bar-skeleton` | Skeleton for belønningsbjælken. | | `.upcart-addons-skeleton` | Skeleton for add-ons-sektionen. | | `.upcart-addons-image-wrapper-skeleton` | Skeleton for add-on-produktets billede. | | `.upcart-addons-skeleton-text-container` | Skeleton for tekstindhold i add-ons. | | `.upcart-discount-code-module-skeleton` | Skeleton for rabatkodemodulet. | | `.upcart-discount-code-input-skeleton` | Skeleton for rabatkode-inputfeltet. | | `.upcart-discount-code-button-skeleton` | Skeleton for rabatkodens anvend-knap. | | `.upcart-checkout-button-container-skeleton` | Skeleton for checkout-knappens wrapper. | | `.upcart-checkout-button-skeleton` | Skeleton for checkout-knappen. | | `.upcart-express-pay-buttons-container-skeleton` | Skeleton for express payment-containeren. | | `.upcart-express-pay-button-skeleton` | Skeleton for den enkelte express payment-knap. |
## **Nyttige ressourcer til at komme i gang:**
* **[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.