Skip to main content
Design-modulet giver dig mulighed for at tilpasse kurvens udseende, herunder layout, brandfarver og knapstile.

​
Generelt

​
Nedarv skrifttyper fra temaet

Denne indstilling gør, at Upcart bruger de skrifttyper, der er defineret i dine Shopify-temaindstillinger. For at se dine nuværende skrifttypevalg skal du åbne Shopify Theme Editor og gå til sektionen Typography.

​
🚧 Kurv-forhåndsvisning 🚧

Skrifttyper, der nedarves fra dit tema, vises ikke i Upcarts forhåndsvisningsvindue, men de vises korrekt i din live webshop.

​
Vis gennemstregede priser

Aktivér denne indstilling for at vise en gennemstreget pris (også kendt som Compare At Price) ved siden af hver vare i kurven. Det afspejler rabatterede priser, ligesom på dine produktsider. Kurvvare med en gennemstreget originalpris ved siden af den rabatterede pris og besparelsen

​
Aktivér subtotallinje

Tilføjer en subtotallinje til kurven. Når denne slås til, vises der også et felt for Subtotal text color under Colors, så subtotalen kan styles separat fra resten af kurvens tekst. Når indstillingen er slået fra, er farvefeltet skjult.

​
Kurvens bredde

Styrer, hvor bred draweren er, indstillet separat for hver viewport:
  • Desktop - Default eller Wide
  • Mobil - Full (kant til kant) eller Nearly full (en lille afstand til kanten)

​
Farver

​
Baggrundsfarve

Angiver kurvens primære baggrundsfarve, eksklusive footeren og upsell-kortene.

​
Kurvens accentfarve

Styrer baggrundsfarven på kurvens footer og upsell-varekort. Upcart Colors-indstillinger med kurvens accentfarve anvendt på lyserøde upsell-kort

​
Kurvens tekstfarve

Definerer farven for al tekst i kurven, undtagen knaptekst og besparelsestekst, som styres separat.

​
Farve på besparelsestekst

Angiver farven på besparelsesteksten, der vises under produktprisen. Kurvvare med besparelsesbeløbets tekst fremhævet i magenta

​
Farve på subtotaltekst

Angiver farven på subtotallinjen. Dette felt vises kun, når Enable subtotal line er slået til under General.

​
🚧 Kurv-forhåndsvisning 🚧

Forhåndsvisningseditoren afspejler muligvis ikke den endelige styling præcist. Din butiks tema kan indeholde brugerdefineret CSS, der påvirker tekststørrelse eller farve. Bekræft altid ændringerne i din live webshop.

​
Knapindstillinger

Upcart tilbyder avancerede muligheder for styling af knapper, herunder specifik tilpasning af checkout-knappen. Det omfatter metoder til CSS-justeringer og integration af Shopifys branding-værktøjer.

​
Hjørneradius

Justerer, hvor runde knappernes hjørner er, fra 0 px til 40 px. 0 giver skarpe, firkantede hjørner; 40 er det rundeste, slideren går. Værdien gælder for checkout-knappen, upsell-knappen, rabatknappen og opgraderingsknappen samlet.
Slideren stopper ved 40 px. Til en helt pilleformet knap skal du bruge brugerdefineret CSS — se Avanceret CSS-tilpasning nedenfor.
Slider for hjørneradius sat til 16 pixels, som afrunder checkout-knappen

​
Knapfarve

Angiver baggrundsfarven for alle knapper i kurven, herunder:
  • Checkout-knappen
  • Upsell-knappen “Add to Cart”
  • Rabatknappen “Apply”
  • Knappen til abonnementsopgradering Du kan tilpasse disse knappers farve via Cart Editor. For yderligere avancerede tilpasninger som CSS-ændringer, se sektionen om avanceret tilpasning.

​
Knappens tekstfarve

Angiver den tekstfarve, der bruges på alle kurvens knapper.

​
Knaptekstens hover-farve

Styrer farven på knapteksten, når en kunde fører musen hen over den. Hvis den for eksempel er sat til grøn, bliver teksten grøn ved hover.

​
Vis knappen Fortsæt med at handle

Tilføjer en Continue shopping-knap til kurven, så kunderne kan lukke draweren og fortsætte med at browse uden at bruge luk-ikonet.

​
Avanceret CSS-tilpasning af checkout-knapper

Til større designændringer kan du bruge brugerdefineret CSS-kode til at ændre checkout-knappen:
  1. Åbn Settings i Cart Editor, og vælg fanen Custom CSS.
  2. Brug den relevante CSS-selektor, såsom .checkout. Eksempler på CSS-snippets: For at lave en pilleformet knap:
    For at tilføje en sort kant:
    Erstat .checkout med den faktiske CSS-klasse for din knap. Yderligere styling omfatter hover-effekter, padding, tekstfarver eller skrifttyper.

​
Integration af Shopify-branding til knaptilpasning

Hvis du bruger Shopify, kan du opdatere designet af din checkout-knap via Shopify-administratoren:
  1. Log ind på din Shopify Admin.
  2. Gå til Settings > Checkout > Customize.
  3. Brug branding-mulighederne til at ændre skrifttypen, rundingen eller farven for et sammenhængende design.
Forhåndsvisning af Upcart cart drawer med en upsell Add-knap og checkout-knap