Styling the Paazl checkout widget

This article describes how each checkout widget style parameter affects the widget's design. Integrating the Paazl checkout widget step by step explains where to define these variables in your webshop's checkout page HTML.

The values you can assign the parameters are the same as those you would assign to their CSS equivalents. Example values are given in the code sample provided in Integrating the Paazl checkout widget step by step.

Default widget style

This is the how the checkout widget will look if you don't apply any styling.

00_brand-default.png

Global settings

brand-global-radius

Example: brand-global-radius: 20px

17_brand-global-radius.png

Colors

brand-color-background

Example: brand-color-background: #00FF00

07_brand-color-background.png

brand-color-body

Example: brand-color-body: #FF0000

08_brand-color-body.png

brand-color-border

Example: brand-border-color: #FF0000

09_brand-color-border.png

brand-color-focus

Example: brand-color-focus: #FF0000

10_brand-color-focus.png

brand-color-primary

Example: brand-color-primary: #FF463C

11_brand-color-primary.png

brand-color-secondary

Example: brand-color-secondary: #FF0000

12_brand-color-secondary.png

Fonts

brand-font-family-body

Example: brand-font-family-body: Quicksand

13_brand-font-family-body.png

brand-font-family-title

Example: brand-font-family-title: "Times New Roman", serif

14_brand-font-family-title.png

brand-font-weight-bold

Example: brand-font-weight-bold: 700

15_brand-font-weight-bold.png

brand-font-weight-regular

Example: brand-font-weight-regular: 400

16_brand-font-weight-regular.png

Title

brand-title-spacing

Example: brand-title-spacing: 1px

19_brand-title-spacing.png

brand-title-transform

Examples:

brand-title-transform: uppercase

brand-title-transform: lowercase

brand-title-transform: capitalize

20_widget-title-transform.png

brand-title-weight

Input

brand-input-border-color

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

21_brand-title-weight.png

brand-input-border-width

Example: brand-input-border-width: 4px

18_brand-input-border-width.png

Button

brand-button-font-color

Example: brand-button-font-color: #FF463C

01_brand-button-font-color.png

brand-button-font-size

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

02_brand-button-font-size.png

brand-button-font-spacing

Example: brand-button-font-spacing: 1px

03_brand-button-font-spacing.png

brand-button-font-transform

Examples:

brand-button-font-transform: uppercase

brand-button-font-transform: lowercase

brand-button-font-transform: capitalize

04_brand-button-font-transform.png

brand-button-radius

Example: brand-button-radius: 100px

05_brand-button-radius.png

brand-button-font-weight

Example: brand-button-font-weight: 700

06_brand-button-font-weight.png

Was this article helpful?