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

# Branding-indstillinger for checkout

> Denne artikel gennemgår Checkout Branding-indstillingerne, og hvordan du bruger hver sektion til at tilpasse din checkout.

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.

<div id="how-to-access-it">
  # Sådan får du adgang
</div>

Åbn **Checkout**-dashboardet i Aftersell, og klik på **Edit branding** øverst på siden.

<Note>
  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.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Aftersell Checkout-dashboard med en pil, der peger på Edit branding-knappen" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

Editoren er organiseret i tre grupper: **Design system**, **Customizations** og **Advanced**.

***

<div id="design-system">
  # Design system
</div>

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

<div id="global-colors">
  ## Globale farver
</div>

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.

<Note>
  Overflade- og knapfarver indstilles ikke her. De findes under **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## Typografi
</div>

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

<div id="corner-radius">
  ## Hjørneradius
</div>

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

***

<div id="customizations">
  # Customizations
</div>

<div id="buttons">
  ## Knapper
</div>

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

<Note>
  Knapfarver arves fra farveskemaer. Hvis der ikke er angivet en skemaværdi, bruges de globale farver.
</Note>

<div id="form-fields">
  ## Formularfelter
</div>

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

<div id="product-thumbnails">
  ## Produktminiaturer
</div>

Styrer, hvordan produktbilleder vises på siden:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent (skemaets accentfarve) eller Base (skemaets basisfarve).

<div id="header">
  ## Header
</div>

* **Layout** – **Placement** (Top bar, Left section eller Right section) og **Alignment** (Left, Center eller Right).
* **Container** – **Padding**, **Color scheme** og **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Checkout-side med butiksnavnets header fremhævet øverst til venstre" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Indholdsområde
</div>

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

<div id="main-area">
  ## Hovedområde
</div>

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

<div id="order-summary">
  ## Ordreoversigt
</div>

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

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Produktminiature i ordreoversigten med en fremhævet billedkant" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## Footer
</div>

* **Layout** – **Placement** og **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme** og **Show divider**.

***

<div id="advanced">
  # Advanced
</div>

<div id="color-schemes">
  ## Farveskemaer
</div>

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