⚠️ 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, 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.

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. Vi anbefaler at rådføre dig med en Shopify Expert til tilpassede kodeløsninger. Se Shopify Experts

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

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

Vigtige retningslinjer for V2-selektorer

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

CSS-selektorer

Generelle komponenter


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.

Header-modul


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.

Announcements-modul


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

Recommendation- og Upsell-moduler


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.

Notes-modul


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.

Discount code-modul


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.

Trust badges-modul


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

Tiered rewards-modul


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.

Cart items-modul


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.

Add-ons-modul


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.

Express payments-modul


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

Cart summary-modul


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.

Nyttige ressourcer til at komme i gang:

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

Reference for kurvfunktioner

CSS-reference

Stylingopskrifter

Funktionalitetsopskrifter

Tilpassede skabeloner

Upcarts offentlige API

Upcart CSS-selektorbibliotek (V2)

Oversigt

BEMÆRK

Sådan bruger du Upcarts CSS-selektorer

Hvad du bør vide, før du tilføjer CSS

Tjekliste til CSS-tilpasning:

Vigtige retningslinjer for V2-selektorer

CSS-selektorer

Generelle komponenter

Header-modul

Announcements-modul

Recommendation- og Upsell-moduler

Notes-modul

Discount code-modul

Trust badges-modul

Tiered rewards-modul

Cart items-modul

Add-ons-modul

Express payments-modul

Cart summary-modul

Nyttige ressourcer til at komme i gang:

​Oversigt

​BEMÆRK

​

​Sådan bruger du Upcarts CSS-selektorer

​Hvad du bør vide, før du tilføjer CSS

​Tjekliste til CSS-tilpasning:

​Vigtige retningslinjer for V2-selektorer

​

​CSS-selektorer

​Generelle komponenter

​

​Header-modul

​Announcements-modul

​Recommendation- og Upsell-moduler

​Notes-modul

​Discount code-modul

​Trust badges-modul

​Tiered rewards-modul

​Cart items-modul

​Add-ons-modul

​Express payments-modul

​Cart summary-modul

​Nyttige ressourcer til at komme i gang:

​

​

Oversigt

BEMÆRK

Sådan bruger du Upcarts CSS-selektorer

Hvad du bør vide, før du tilføjer CSS

Tjekliste til CSS-tilpasning:

Vigtige retningslinjer for V2-selektorer

CSS-selektorer

Generelle komponenter

Header-modul

Announcements-modul

Recommendation- og Upsell-moduler

Notes-modul

Discount code-modul

Trust badges-modul

Tiered rewards-modul

Cart items-modul

Add-ons-modul

Express payments-modul

Cart summary-modul

Nyttige ressourcer til at komme i gang: