Paazl-checkoutwidget stylen

Dit artikel beschrijft hoe elke stijlparameter van de checkout-widget het ontwerp van jouw widget beïnvloedt. Het artikel De Paazl checkout-widget stap voor stap integreren legt uit waar je deze variabelen definieert in de HTML-code van de checkout-pagina van jouw webshop.

De waarden die je aan de parameters kunt toekennen, zijn hetzelfde als de waarden die je aan de bijbehorende CSS-equivalenten geeft. Voorbeeldwaarden vind je in het codevoorbeeld in De Paazl checkout-widget stap voor stap integreren.

Standaard widgetstijl

Dit is hoe de checkout-widget er voor jouw klanten uitziet als je geen enkele styling toepast.

Tabs default

Buttons default

Algemene instellingen

brand-global-radius

Voorbeeld: brand-global-radius: 50px

Kleuren

In de onderstaande voorbeelden zijn de elementen die door de verschillende parameters worden beïnvloed rood gekleurd, zodat je precies ziet wat er verandert in jouw widget.

brand-color-background

Voorbeeld: brand-color-background: #FF0000

brand-color-body

Voorbeeld: brand-color-body: #FF0000

brand-color-border

Voorbeeld: brand-color-border: #FF0000

brand-color-focus

Voorbeeld: brand-color-focus: #FF0000

brand-color-primary

Deze parameter heeft alleen invloed op de knop "Select a different..." van de tabbladen "Store" en "Pickup".

Voorbeeld: brand-color-primary: #FF0000

brand-color-secondary

Deze parameter heeft invloed op zowel de geselecteerde verzendoptie als de inactieve (niet-geselecteerde) tabbladen.

Voorbeeld: brand-color-secondary: #FF0000

Lettertypen

In de onderstaande voorbeelden worden de elementen die door de verschillende parameters worden beïnvloed, weergegeven in het lettertype Courier of extra vetgedrukt.

brand-font-family-body

Voorbeeld: brand-font-family-body: Courier

brand-font-family-title

Voorbeeld: brand-font-family-title: "Courier"

brand-font-weight-bold

Voorbeeld: brand-font-weight-bold: 900

brand-font-weight-regular

Voorbeeld: brand-font-weight-regular: 900

Titel

Deze instellingen hebben invloed op titels. In het onderstaande voorbeeld is dit de titel "When Should We Deliver?".

brand-title-spacing

Voorbeeld: brand-title-spacing: 14px

brand-title-transform

Deze parameter kan een van de drie volgende waarden hebben: uppercase, lowercase en capitalize.

Voorbeeld: brand-title-transform: lowercase

brand-title-weight

Invoer

De randen die worden beïnvloed, zijn in het rood weergegeven.

brand-input-border-color

Voorbeeld: brand-input-border-color: #FF0000

brand-input-border-width

Voorbeeld: brand-input-border-width: 10px

Knoppen

Deze set parameters heeft alleen invloed op de knop "Select a different..." op de tabbladen "Store" en "Pickup".

brand-button-font-color

Voorbeeld: brand-button-font-color: #FF0000

brand-button-font-size

Voorbeeld: brand-button-font-size: 30px

brand-button-font-spacing

Voorbeeld: brand-button-font-spacing: 16px

brand-button-font-transform

Deze parameter kan een van de drie volgende waarden hebben: uppercase, lowercase en capitalize.

Voorbeeld: brand-button-font-transform: capitalize

brand-button-radius

Voorbeeld: brand-button-radius: 25px

brand-button-font-weight

Voorbeeld: brand-button-font-weight: 900