Skip to main content
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.

​
Zo krijg je toegang

Open het Checkout-dashboard in Aftersell en klik op Edit branding bovenaan de pagina.
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.
Aftersell Checkout-dashboard met een pijl die naar de knop Edit branding wijst De editor is georganiseerd in drie groepen: Design system, Customizations en Advanced.

​
Design system

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

​
Globale kleuren

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.
Oppervlakte- en knopkleuren worden hier niet ingesteld. Die vind je onder Advanced > Color schemes.

​
Typografie

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

​
Hoekafronding

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

​
Customizations

​
Knoppen

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.
Knopkleuren worden overgenomen van kleurenschema’s. Als er geen schemawaarde is ingesteld, worden de globale kleuren gebruikt.

​
Formuliervelden

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.

​
Productminiaturen

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).
  • Layout – Placement (Top bar, Left section of Right section) en Alignment (Left, Center of Right).
  • Container – Padding, Color scheme en Show divider.
Checkout-pagina met de winkelnaam-header linksboven gemarkeerd

​
Contentgebied

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

​
Hoofdgebied

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

​
Bestellingsoverzicht

  • 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.
Productminiatuur in het bestellingsoverzicht met een gemarkeerde afbeeldingsrand
  • Layout – Placement en Alignment.
  • Container – Show footer content, Padding, Color scheme en Show divider.

​
Advanced

​
Kleurenschema’s

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.