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

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

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Upcart CSS-selektorbibliotek (V1)

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:

CSS-selektorbibliotek

Generelle indstillinger

Design-modul

Header-modul

Body-indstillinger

Announcements-modul

Rewards-modul

Recommendations-modul

Subscription Upgrades-modul

Upsells-modul

Produktindstillinger

Footer-indstillinger

Add-ons-modul

Discount Codes-modul

Besparelsesrække

Express Payments-modul

Bemærk

Trust Badges-modul

Additional Notes-modul

Upcart Settings-modul

Skeleton-selektorer

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:

​CSS-selektorbibliotek

​Generelle indstillinger

​Design-modul

​Header-modul

​Body-indstillinger

​Announcements-modul

​Rewards-modul

​Recommendations-modul

​Subscription Upgrades-modul

​Upsells-modul

​Produktindstillinger

​Footer-indstillinger

​Add-ons-modul

​Discount Codes-modul

​Besparelsesrække

​Express Payments-modul

​Bemærk

​Trust Badges-modul

​Additional Notes-modul

​Upcart Settings-modul

​Skeleton-selektorer

​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:

CSS-selektorbibliotek

Generelle indstillinger

Design-modul

Header-modul

Body-indstillinger

Announcements-modul

Rewards-modul

Recommendations-modul

Subscription Upgrades-modul

Upsells-modul

Produktindstillinger

Footer-indstillinger

Add-ons-modul

Discount Codes-modul

Besparelsesrække

Express Payments-modul

Bemærk

Trust Badges-modul

Additional Notes-modul

Upcart Settings-modul

Skeleton-selektorer

Nyttige ressourcer til at komme i gang: