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

# Designinstellingen

> Globale en per-blok designinstellingen voor de Aftersell Cart: kleuren, knoppen, lay-out en hoe blok-overrides erbovenop komen.

Het design van de Aftersell Cart werkt op twee niveaus: **globale** instellingen die de hele cart stylen, en **per-blok** overrides die een individueel blok verfijnen.

<div id="global-design-settings">
  ## Globale designinstellingen
</div>

Open **Cart settings** via de zijbalk van de editor om het globale design van de cart te bereiken. De instellingen zijn gegroepeerd in Design, Buttons en Layout.

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

| Instelling               | Wat het regelt                                                       | Standaard |
| ------------------------ | -------------------------------------------------------------------- | --------- |
| **Background color**     | De achtergrond van de cart.                                          | `#ffffff` |
| **Text color**           | Primaire tekst.                                                      | `#000000` |
| **Secondary text color** | Gedempte / secundaire tekst.                                         | `#a8a8a8` |
| **Accent color**         | Badges, scheidingslijnen en doorgestreepte prijzen.                  | `#f2f2f2` |
| **Border radius**        | Hoekafronding voor containers, kaarten, afbeeldingen en tekstvelden. | `8px`     |

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

| Instelling           | Wat het regelt                                               | Standaard |
| -------------------- | ------------------------------------------------------------ | --------- |
| **Background color** | Knopvulling.                                                 | `#000000` |
| **Text color**       | Knoplabel.                                                   | `#ffffff` |
| **Border color**     | Knoprand.                                                    | `#000000` |
| **Border radius**    | Hoekafronding voor knoppen, dropdowns en aantal-bedieningen. | `8px`     |

<div id="layout">
  ### Layout
</div>

| Instelling             | Wat het regelt                                        | Standaard |
| ---------------------- | ----------------------------------------------------- | --------- |
| **Horizontal padding** | Padding links/rechts binnen de cart.                  | `24px`    |
| **Desktop width**      | De breedte van de drawer op desktop (minimaal 320px). | `440px`   |

<div id="per-block-design-overrides">
  ## Design-overrides per blok
</div>

Elk blok behalve [**Custom code**](/nl/aftersell/cart/custom-code-blocks) heeft zijn eigen design-overrides per blok onderaan het instellingenpaneel — met de kop **Design** bij elk blok behalve **Express payments**, waarvan de overrides in naamloze secties Style en Spacing staan. (Custom code heeft helemaal geen instellingenpaneel — het blok *is* de code, dus het toont alleen een tabblad Code.) Ze regelen zaken als stijl, spacing en andere blokspecifieke designinstellingen. Deze **designinstellingen per blok** vallen, wanneer ze leeg zijn, terug op de globale instelling voor die eigenschap.

Veel blokken bevatten ook een sectie **Text** in hun Design-paneel, waarmee je de typografie kunt instellen voor specifieke tekstelementen in dat blok — font family, grootte, regelhoogte en letterspatiëring. Blokken met meerdere tekstelementen (zoals Notes en Empty cart) tonen een **Text element**-kiezer, zodat je elk element afzonderlijk kunt stylen.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Geanimeerde voorvertoning van het per-blok Design-instellingenpaneel in de cart-editor" title="Geanimeerde voorvertoning van het per-blok Design-instellingenpaneel in de cart-editor" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Lettertypen en drawer-positie
</div>

* **Lettertypen:** de cart neemt standaard het **lettertype van je thema** over. Je kunt een aangepaste font family instellen voor bepaalde tekstelementen (zoals de producttitel en de upsells-heading) via de sectie **Text** in de Design-instellingen van elk blok — zie [Cart items-blok](/nl/aftersell/cart/cart-items-block) en [Upsells-blok](/nl/aftersell/cart/upsells-block) voor details.
* **Drawer-positie:** de **breedte** van de drawer is instelbaar (Desktop width, hierboven); er is geen instelling voor links/rechts-positie.

<div id="behavior-settings">
  ## Gedragsinstellingen
</div>

Naast styling bevat **Cart settings** ook gedragsopties — de drawer openen bij toevoegen aan de cart, en de thema-selectors die je storefront synchroon houden. Zie [Cart-instellingen](/nl/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Wanneer je beter aangepaste CSS gebruikt
</div>

De ingebouwde instellingen dekken de gangbare gevallen. Voor alles daarbuiten — een specifiek element targeten, aangepaste spacing, responsieve aanpassingen — gebruik je [Aangepaste CSS](/nl/aftersell/cart/custom-css).