> ## 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-instellingen voor de checkout

> Dit artikel leidt je door de Checkout Branding-instellingen en hoe je elke sectie gebruikt om je checkout aan te passen.

Met de branding-instellingen kun je de look-and-feel van je checkout aanpassen, van kleuren en typografie tot knoppen, formuliervelden en paginalay-out. Deze tools maken het eenvoudig om het design van je checkout af te stemmen op je merkidentiteit.

<div id="how-to-access-it">
  # Zo krijg je toegang
</div>

Open het **Checkout**-dashboard in Aftersell en klik op **Edit branding** bovenaan de pagina.

<Note>
  Om branding hier te bewerken, is een **Shopify Plus**-abonnement vereist. Shopify laat apps alleen op Plus de checkout-branding lezen en schrijven, dus op andere abonnementen kunnen deze instellingen niet worden opgeslagen. Als je winkel niet op Plus zit, breng je dezelfde wijzigingen aan in de Shopify checkout-editor: **Settings → Checkout → Customize** in je 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 met een pijl die naar de knop Edit branding wijst" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

De editor is georganiseerd in drie groepen: **Design system**, **Customizations** en **Advanced**.

***

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

De instellingen van het designsysteem vormen de basis. Componenten in de hele checkout erven ervan, tenzij een specifiekere instelling deze overschrijft.

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

Je merk- en systeemkleuren, gebruikt in je winkel en post-purchase ervaringen. Componenten gebruiken deze kleuren wanneer er geen kleurenschema is ingesteld.

**Merkkleuren**

* **Brand** – je primaire merkkleur.
* **Accent** – gebruikt voor interactieve en uitgelichte elementen.
* **Decorative** – gebruikt voor ondersteunende decoratieve elementen.

**Status- en systeemkleuren**

* **Success** – bevestigingsstatussen.
* **Warning** – waarschuwende berichten.
* **Critical** – fouten en meldingen.
* **Info** – informatieve berichten.

<Note>
  Oppervlakte- en knopkleuren worden hier niet ingesteld. Die vind je onder **Advanced > Color schemes**.
</Note>

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

* **Font size** – stel de **Base size** en de **Scale ratio** in waaruit de rest van de typografieschaal wordt afgeleid.
* **Primary font** – gebruikt voor de meeste componenten, zoals gewone tekst, knoppen en formulierelementen. Kies een **Font family**, **Base weight** en **Bold weight**.
* **Secondary font** – gebruikt voor kopcomponenten, met dezelfde drie instellingen.

<div id="corner-radius">
  ## Hoekafronding
</div>

Stelt de gedeelde hoekafrondingswaarden in waarnaar knoppen, formuliervelden, containers en andere componenten verwijzen. Je definieert drie formaten: **Small**, **Medium** en **Large**.

***

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

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

Apart geconfigureerd voor **Primary buttons** (de hoofdactie op een pagina) en **Secondary buttons** (ondersteunende acties). Elk heeft:

* **Corner radius** – Small, Medium, Large of None (vierkant).
* **Background** – Solid of None.
* **Vertical padding** en **Horizontal padding**.
* **Show border**.

<Note>
  Knopkleuren worden overgenomen van kleurenschema's. Als er geen schemawaarde is ingesteld, worden de globale kleuren gebruikt.
</Note>

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

Geldt voor alle ondersteunde veldtypen:

* **Corner radius**
* **Label position** – Inside of Outside.
* **Show border**

Met **veldspecifieke overrides** kun je voor bepaalde veldtypen afwijken van die gedeelde stijlen: **Text field borders**, **Dropdown borders**, **Choice list group spacing** en **Checkbox corner radius**.

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

Bepaalt hoe productafbeeldingen op de pagina worden weergegeven:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent (accentkleur van het schema) of Base (basiskleur van het schema).

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

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

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Checkout-pagina met de winkelnaam-header linksboven gemarkeerd" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Contentgebied
</div>

Bepaalt de **Divider** tussen het hoofdgebied en het bestellingsoverzicht: **Show divider**, **Border style** en **Border weight**.

<div id="main-area">
  ## Hoofdgebied
</div>

* **Section containers** – de achtergrond- en randomlijsting rond elke sectie: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** – de lijnen die tussen secties worden getoond.

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

* **Container** – het **Color scheme** dat wordt toegepast op de algehele container van het bestellingsoverzicht.
* **Section dividers** – **Show divider**, **Border style**, **Border weight**.
* **Section containers** – de achtergrond en rand rond elke sectie: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding** en **Shadow**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Productminiatuur in het bestellingsoverzicht met een gemarkeerde afbeeldingsrand" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

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

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

***

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

<div id="color-schemes">
  ## Kleurenschema's
</div>

Kleurenschema's zijn herbruikbare sets van oppervlakte-, tekst- en knopkleuren waarnaar andere secties verwijzen. Er zijn twee schema's beschikbaar:

* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**

Elk schema is opgedeeld in drie groepen:

* **Buttons** – gebruikt voor de hoofdbetaalknop en secundaire acties. **Primary button** en **Secondary button** worden apart geconfigureerd, elk met een eigen standaard- en hover-status.
* **Form controls** – gebruikt voor tekstvelden, dropdowns en keuzelijsten.
* **Base surfaces** – de oppervlakteachtergrond, bodytekst en ondersteunende rollen: rand, accent (links en focus), decoratief (subtiele accenten) en pictogramkleur.

Overal waar een sectie een instelling voor **Color scheme** biedt, kun je deze laten verwijzen naar **Scheme 1**, **Scheme 2** of **Transparent**.