> ## 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.
# Design-module
> Dit artikel legt uit hoe je de designinstellingen van Upcart aanpast.
Met de Design-module kun je het uiterlijk van je cart aanpassen, waaronder de lay-out, merkkleuren en knopstijlen.
# Algemeen
## Lettertypen overnemen uit het thema
Met deze instelling gebruikt Upcart de lettertypen die zijn gedefinieerd in je Shopify-themainstellingen. Om je huidige lettertypekeuzes te bekijken, open je de [Shopify Theme Editor](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) en ga je naar het gedeelte Typography.
## **🚧 Cart-preview 🚧**
Lettertypen die uit je thema worden overgenomen, verschijnen niet in het Upcart-previewvenster, maar worden wel correct weergegeven op je live storefront.
## Doorgestreepte prijzen tonen
Schakel deze instelling in om een doorgestreepte prijs (ook bekend als de [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) naast elk item in de cart te tonen. Dit weerspiegelt kortingsprijzen, net als op je productpagina's.
## Subtotaalregel inschakelen
Voegt een subtotaalregel toe aan de cart. Als je dit inschakelt, verschijnt er ook een veld **Subtotal text color** onder **Colors**, zodat het subtotaal apart van de rest van de cart-tekst kan worden gestyled. Als de instelling uit staat, is dat kleurveld verborgen.
## Cart-breedte
Bepaalt hoe breed de drawer is, apart in te stellen per viewport:
* **Desktop** - **Default** of **Wide**
* **Mobile** - **Full** (van rand tot rand) of **Nearly full** (een kleine marge aan de rand)
***
# Kleuren
## Achtergrondkleur
Stelt de hoofdachtergrondkleur van de cart in, exclusief de footer en upsell-kaarten.
## Cart-accentkleur
Bepaalt de achtergrondkleur van de cart-footer en de kaarten van upsell-items.
## Cart-tekstkleur
Definieert de kleur van alle cart-tekst, behalve knoptekst en besparingstekst, die apart worden geregeld.
## Kleur besparingstekst
Stelt de kleur in van de besparingstekst die onder de productprijs wordt getoond.
## Tekstkleur subtotaal
Stelt de kleur van de subtotaalregel in. Dit veld verschijnt alleen wanneer **Enable subtotal line** is ingeschakeld onder **General**.
## 🚧 **Cart-preview** 🚧
De preview-editor geeft de uiteindelijke styling mogelijk niet exact weer. Het thema van je winkel kan custom CSS bevatten die de tekstgrootte of kleur beïnvloedt. Controleer wijzigingen altijd op je live storefront.
***
# Knopinstellingen
Upcart biedt geavanceerde opties voor knopstyling, inclusief specifieke aanpassingen voor de checkout-knop. Dit omvat methoden voor CSS-aanpassingen en integratie van de brandingtools van Shopify.
## Hoekradius
Past de rondheid van de knophoeken aan, van **0 px tot 40 px**. `0` geeft scherpe, vierkante hoeken; `40` is het rondste dat de slider kan. De waarde geldt voor de checkout-knop, upsell-knop, kortingsknop en upgrade-knop samen.
De slider stopt bij 40 px. Voor een volledig pilvormige knop heb je [Custom CSS](/nl/upcart/custom_css) nodig — zie [Geavanceerde CSS-aanpassing](#advanced-css-customization-for-checkout-buttons) hieronder.
## Knopkleur
Stelt de achtergrondkleur in voor alle knoppen in de cart, waaronder:
* Checkout-knop
* Upsell-knop "Add to Cart"
* Kortingsknop "Apply"
* Upgrade-knop voor abonnementen. Je kunt de kleur van deze knoppen aanpassen via de Cart Editor. Voor verdere geavanceerde aanpassingen zoals CSS-wijzigingen verwijzen we je naar het gedeelte over geavanceerde aanpassingen.
## Knoptekstkleur
Bepaalt de tekstkleur die in alle cart-knoppen wordt gebruikt.
## Hoverkleur knoptekst
Regelt de kleur van de knoptekst wanneer een klant er met de muis overheen beweegt. Als deze bijvoorbeeld op groen is ingesteld, wordt de tekst groen bij hover.
## Knop Verder winkelen tonen
Voegt een knop **Continue shopping** toe aan de cart, waarmee klanten de drawer kunnen sluiten en verder kunnen browsen zonder het sluit-icoon te gebruiken.
# Geavanceerde CSS-aanpassing voor checkout-knoppen
Voor grote designwijzigingen kun je Custom CSS-code gebruiken om de checkout-knop aan te passen:
1. Open in de Cart Editor **Settings** en selecteer het tabblad **Custom CSS**.
2. Gebruik de relevante CSS-selector, zoals `.checkout`. Voorbeeld-CSS-snippets: om een pilvormige knop te maken:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Om een zwarte rand toe te voegen:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Vervang `.checkout` door de daadwerkelijke CSS-class van je knop. Extra styling omvat hover-effecten, padding, tekstkleuren of lettertypen.
# Shopify-branding integreren voor knopaanpassing
Als je Shopify gebruikt, kun je het design van je checkout-knop bijwerken via de Shopify-admin:
1. Log in op je Shopify Admin.
2. Ga naar `Settings > Checkout > Customize`.
3. Gebruik de brandingopties om het lettertype, de rondheid of de kleur aan te passen voor een naadloos design.
