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

00_brand-default_-_TAB__new_.png

Buttons default

00_brand-default_-_BUTTON__new_.png

Global settings

brand-global-radius

Example: brand-global-radius: 50px

17_brand-global-radius.png

Colors

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

brand-color-background

Example: brand-color-background: #FF0000

07_brand-color-background.png

brand-color-body

Example: brand-color-body: #FF0000

08_brand-color-body.png

brand-color-border

Example: brand-color-border: #FF0000

09_brand-color-border.png

brand-color-focus

Example: brand-color-focus: #FF0000

10_brand-color-focus.png

brand-color-primary

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

Example: brand-color-primary: #FF0000

11_brand-color-primary.png

brand-color-secondary

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

Example: brand-color-secondary: #FF0000

12_brand-color-secondary.png

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

13_brand-font-family-body.png

brand-font-family-title

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

14_brand-font-family-title.png

brand-font-weight-bold

Example: brand-font-weight-bold: 900

15_brand-font-weight-bold.png

brand-font-weight-regular

Example: brand-font-weight-regular: 900

16_brand-font-weight-regular.png

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

19_brand-title-spacing.png

brand-title-transform

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

Example:

brand-title-transform: lowercase

20_widget-title-transform.png

brand-title-weight

21_brand-title-weight.png

Input

The borders affected are shown in red.

brand-input-border-color

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

17_brand-input-border-color.png

brand-input-border-width

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

18_brand-input-border-width.png

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

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: 16px

03_brand-button-font-spacing.png

brand-button-font-transform

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

Example:

brand-button-font-transform: capitalize

04_brand-button-font-transform.png

brand-button-radius

Example: brand-button-radius: 25px

05_brand-button-radius.png

brand-button-font-weight

Example: brand-button-font-weight: 900

21_brand-title-weight.png

Was this article helpful?