Skip to main content
Branding-indstillingerne lader dig tilpasse udseendet og stemningen i din checkout, fra farver og typografi til knapper, formularfelter og sidelayout. Disse værktøjer gør det nemt at afstemme dit checkout-design med din brandidentitet.

​
Sådan får du adgang

Åbn Checkout-dashboardet i Aftersell, og klik på Edit branding øverst på siden.
Redigering af branding her kræver en Shopify Plus-plan. Shopify lader kun apps læse og skrive checkout-branding på Plus, så på andre planer kan disse indstillinger ikke gemmes. Hvis din butik ikke er på Plus, skal du foretage de samme ændringer i Shopify-checkout-editoren i stedet: Settings → Checkout → Customize i din Shopify-admin.
Aftersell Checkout-dashboard med en pil, der peger på Edit branding-knappen Editoren er organiseret i tre grupper: Design system, Customizations og Advanced.

​
Design system

Designsystem-indstillinger er fundamentet. Komponenter på tværs af checkout arver fra dem, medmindre en mere specifik indstilling tilsidesætter dem.

​
Globale farver

Dine brand- og systemfarver, som bruges på tværs af din butik og post-purchase-oplevelser. Komponenter bruger disse farver, når der ikke er angivet et farveskema. Brandfarver
  • Brand – din primære brandfarve.
  • Accent – bruges til interaktive og fremhævede elementer.
  • Decorative – bruges til understøttende dekorative elementer.
Status- og systemfarver
  • Success – bekræftelsestilstande.
  • Warning – advarselsbeskeder.
  • Critical – fejl og alarmer.
  • Info – informationsbeskeder.
Overflade- og knapfarver indstilles ikke her. De findes under Advanced > Color schemes.

​
Typografi

  • Font size – indstil Base size og Scale ratio, som afleder resten af skriftskalaen.
  • Primary font – bruges til de fleste komponenter såsom almindelig tekst, knapper og formularkontroller. Vælg en Font family, Base weight og Bold weight.
  • Secondary font – bruges til overskriftskomponenter med de samme tre kontroller.

​
Hjørneradius

Indstiller de fælles hjørneradius-værdier, som knapper, formularfelter, containere og andre komponenter refererer til. Du definerer tre størrelser: Small, Medium og Large.

​
Customizations

​
Knapper

Konfigureres separat for Primary buttons (hovedhandlingen på en side) og Secondary buttons (understøttende handlinger). Hver har:
  • Corner radius – Small, Medium, Large eller None (firkantet).
  • Background – Solid eller None.
  • Vertical padding og Horizontal padding.
  • Show border.
Knapfarver arves fra farveskemaer. Hvis der ikke er angivet en skemaværdi, bruges de globale farver.

​
Formularfelter

Gælder for alle understøttede felttyper:
  • Corner radius
  • Label position – Inside eller Outside.
  • Show border
Feltspecifikke tilsidesættelser lader dig afvige fra de fælles stilarter for bestemte felttyper: Text field borders, Dropdown borders, Choice list group spacing og Checkbox corner radius.

​
Produktminiaturer

Styrer, hvordan produktbilleder vises på siden:
  • Show border
  • Border radius
  • Fit
  • Badge background color – Accent (skemaets accentfarve) eller Base (skemaets basisfarve).
  • Layout – Placement (Top bar, Left section eller Right section) og Alignment (Left, Center eller Right).
  • Container – Padding, Color scheme og Show divider.
Checkout-side med butiksnavnets header fremhævet øverst til venstre

​
Indholdsområde

Styrer Divider mellem hovedområdet og ordreoversigtsområdet: Show divider, Border style og Border weight.

​
Hovedområde

  • Section containers – baggrunds- og kantindramningen omkring hver sektion: Background, Show border, Border style, Border weight.
  • Section dividers – linjerne, der vises mellem sektioner.

​
Ordreoversigt

  • Container – det Color scheme, der anvendes på den samlede ordreoversigtscontainer.
  • Section dividers – Show divider, Border style, Border weight.
  • Section containers – baggrunden og kanten omkring hver sektion: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding og Shadow.
Produktminiature i ordreoversigten med en fremhævet billedkant
  • Layout – Placement og Alignment.
  • Container – Show footer content, Padding, Color scheme og Show divider.

​
Advanced

​
Farveskemaer

Farveskemaer er genanvendelige sæt af overflade-, tekst- og knapfarver, som andre sektioner peger på. To skemaer er tilgængelige:
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Hvert skema er opdelt i tre grupper:
  • Buttons – bruges til den primære betalingsknap og sekundære handlinger. Primary button og Secondary button konfigureres separat, hver med sin egen standard- og hover-tilstand.
  • Form controls – bruges til tekstfelter, dropdowns og valglister.
  • Base surfaces – overfladebaggrunden, brødteksten og understøttende roller: kant, accent (links og fokus), decorative (diskrete fremhævninger) og ikonfarve.
Hvor end en sektion tilbyder en Color scheme-kontrol, kan du pege den på Scheme 1, Scheme 2 eller Transparent.