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.

Tabs default

Buttons default

Global settings

brand-global-radius

Example: brand-global-radius: 50px

Colors

In the examples below, the elements affected by the various parameters are colored red.

brand-color-background

Example: brand-color-background: #FF0000

brand-color-body

Example: brand-color-body: #FF0000

brand-color-border

Example: brand-color-border: #FF0000

brand-color-focus

Example: brand-color-focus: #FF0000

brand-color-primary

This parameter only affects the "Select a different..." button of the "Store" and "Pickup" tabs.

Example: brand-color-primary: #FF0000

brand-color-secondary

This parameter affects both the selected shipping option as the inactive (unselected) tabs.

Example: brand-color-secondary: #FF0000

Fonts

In the examples below, the elements affected by the various parameters are either displayed in Courier font or heavily bolded.

brand-font-family-body

Example: brand-font-family-body: Courier

brand-font-family-title

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

brand-font-weight-bold

Example: brand-font-weight-bold: 900

brand-font-weight-regular

Example: brand-font-weight-regular: 900

Title

These settings affect titles. In the example below, this is the title "When Should We Deliver?"

brand-title-spacing

Example: brand-title-spacing: 14px

brand-title-transform

This parameter can take one of three values: uppercase, lowercase and capitalize.

Example: brand-title-transform: lowercase

brand-title-weight

Input

The borders affected are shown in red.

brand-input-border-color

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

brand-input-border-width

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

Button

This set of parameters only affects the "Select a different ..." button on the "Store" and "Pickup" tabs.

brand-button-font-color

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

brand-button-font-size

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

brand-button-font-spacing

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

brand-button-font-transform

This parameter can take one of three values: uppercase, lowercase and capitalize.

Example: brand-button-font-transform: capitalize

brand-button-radius

Example: brand-button-radius: 25px

brand-button-font-weight

Example: brand-button-font-weight: 900