Branding & Styling

Overview

To adjust the look and feel of your Checkout and make it more consistent with your branding,
you can customize:

Font styles
Colors
enable breadcrumbs
Assets (for example upload custom logo)
Upload a custom image in Checkout
Add a custom logo for a payment provider
Define the height of the header element for desktop and mobile

Check the Tricky CSS overwrites section for the list of elements requiring particular caution when overwriting.

Edit CSS

You can make quick adjustments to the theme by changing pre-defined CSS variables. The application comes with default styling, which you can edit.

To access CSS file in the SCAYLE Panel:

Go to Shops > Shop > Storefront > Checkout Settings > Checkout Frontend Configuration.
Select the Styles tab. When you open the style tab, the content is empty.
Add custom CSS to overwrite the frontend styling.

Check the following sections for the list of existing classes and accepted values.

Example

.product-details__title {
  color: green
}

*Custom CSS styling of Checkout Frontend*

Font styling

Typography settings can be changed using the following parameters:

Parameter	Description	Possible Values
`font`	font-family used application-wise	see MDN
`fontSizeExtraSmall`	font size for input field error messages and other small hints	max. `12px`
`fontSizeSmall`	font size for descriptive text throughout the application in places such as badges, product details, and disclaimers	max. `14px`
`fontSizeMedium`	font size in form fields, sub-headlines, prices, option selection, and vouchers	max. `16px`
`fontSizeLarge`	font size only for the main headline on a page	max. `32px`
`fontWeightNormal`	font weight used for normal text
`fontWeightBold`	font weight used for bold text

Input Styling

Input fields can be adjusted through the following settings:

Parameter	Description	Possible Values
`inputBorderColor`	general border colour of the input field	e.g `#ff0000`
`inputBorderSize`	width of all borders of the input field (top, left, right, bottom)	e.g. `0px` = no border
`inputBorderSizeBottom`	width of the border of only the bottom of the input field	e.g. `0px` = no underlining If the above attribute is set to `0` but this is set to `1px` or `2px` it will have the effect of being underlined. This should be the same value as the above `inputBorderSize` if the user does not desire an underline effect.
`inputLabelColor`	used as the input’s label and placeholder color	e.g `#000000`
`inputBackgroundColor`	background colour of all input and select fields	e.g `#ff0000`
`inputDisabledBackground`	background colour of all disabled input fields	e.g `#ff0000`
`inputDisabledColor`	text colour of all disabled input fields	e.g `#ff0000`

Notification Styling

You can change the background color of notifications that appear on top of the page and give feedback to the user based on certain events. Below are few parameters:

Parameter	Description	Possible Values
`successColor`	color for a successful event like voucher was applied successfully	e.g `#ff0000`
`errorColor`	color for checkout error events like payment method cannot be selected	e.g `#ff0000`
`warningColor`	color for warning events like to many items to basket	e.g `#ff0000`
`infoColor`	color for general information events like basket updated	e.g `#ff0000`

Border Styling

You can change application-wide border settings for all components except for the inputs which are styled with their own variables.

Parameter	Description	Possible Values
`borderRadius`	controls the border radius	e.g. `3px`
`borderColor`	controls the border color	e.g `#ff0000`

Options Styling

The options selector used for payment methods and shipping options can be configured using the following parameters:

Parameter	Description	Possible Values
`optionBackgroundInactive`	background color for a non-selected option	e.g `#ff0000`
`optionBackgroundInactive`	background color for a non-selected option	e.g `#ff0000`
`optionTextColor`	text color for an option	e.g `#ff0000`

Colors

The main theme of Checkout is defined by different colors (for instance background) that you can configure.

Parameter	Description	Possible Values
`primaryColor`	main color in the application primarily for backgrounds	e.g `#ff0000`
`primaryTextColor`	main text color in the application primarily typography	e.g `#ff0000`
`backgroundColor`	background of the entire page as well as key components	e.g `#ff0000`
`secondaryTextColor`	accent colour of less important text	e.g `#ff0000`
`secondaryBackgroundColor`	secondary background and is importantly used as the basket background in case that is active	e.g `#ff0000`
`tertiaryBackgroundColor`	the tertiary background color is used in elements such as the payment installment form, rule engine debugger, and the select field dropdown menus	e.g. `#eeeff1`
`quaternaryBackgroundColor`	quaternary background and is used in the delivery forecast within a basket item	e.g. `#ebf1f7`
`inactiveTextColor`	text of placeholders and inactive labels	e.g `#ff0000`
`secondaryInactiveTextColor`	text colour of secondary inactive text and used on background elements such as the breadcrumbs	e.g `#ff0000`
`imageBackgroundColor`	defines the default colour of background behind the product image in the basket	e.g `#ff0000`

CSS variables

CSS variables in the configuration code sample

"styles": {
  "buttonPrimaryBackground": "#0076e4",
  "buttonPrimaryBorderColor": "#0076e4",
  "buttonPrimaryBorderSize": "1px",
  "buttonPrimaryColor": "#ffffff",
  "buttonSecondaryBackground": "#ffffff",
  "buttonSecondaryBorderColor": "black",
  "buttonSecondaryBorderSize": "2px",
  "buttonSecondaryColor": "black",
  "buttonDisabledBackground": "#e5e5e5",
  "buttonDisabledBorderColor": "black",
  "buttonDisabledBorderSize": "1px",
  "buttonDisabledColor": "black",
  "buttonLoadingBackground": "#d2d2d2",
  "buttonLoadingBorderSize": "1px",
  "buttonLoadingBorderColor": "#d2d2d2",
  "font": "system-ui, sans-serif",
  "fontSizeExtraSmall": "10px",
  "fontSizeSmall": "12px",
  "fontSizeMedium": "14px",
  "fontSizeLarge": "20px",
  "fontWeightNormal": "400",
  "fontWeightBold": "600",
  "imageBackgroundColor": "#f4f4f5",
  "inputBorderColor": "#dbe1e9",
  "inputBorderSize": "1px",
  "inputBorderSizeBottom": "1px",
  "inputLabelColor": "#000000",
  "inputBackgroundColor": "#ffffff",
  "inputDisabledBackground": "#f0f0f0",
  "inputDisabledColor": "black",
  "successColor": "#24d575",
  "warningColor": "#ffc738",
  "infoColor": "#0076e4",
  "dangerColor": "#f16363",
  "borderRadius": "3px",
  "borderColor": "#dbe1e9",
  "primaryColor": "#0076e4",
  "primaryTextColor": "#000c17",
  "backgroundColor": "#ffffff",
  "secondaryBackgroundColor": "#f9fafb",
  "dropdownHoverBackgroundColor": "#dbe1e9",
  "secondaryTextColor": "#76889d",
  "inactiveTextColor": "#36475c",
  "secondaryInactiveTextColor": "#afb9c5",
  "optionBackgroundInactive": "#ffffff",
  "optionBackgroundActive": "#f9fafb",
  "optionTextColor": "black"
}

Styling Options

Use the list of variables below to adjust the styling of buttons, font, notifications and many more UI components of Checkout.

There are two customizable button types called primary and secondary buttons in the frontend. Additionally, the buttons can have a disabled state. This state refers to situations where an API response is awaited and the buttons should not be clicked again until the response is received.

Parameter	Description	Possible Values
`buttonPrimaryBackground`	define the background colour of a primary button	e.g `#ff0000`
`buttonPrimaryColor`	used to define the text colour of a primary button	e.g `#ff0000`
`buttonPrimaryBorderColor`	used to define the border colour of a primary button	e.g `#ff0000`
`buttonPrimaryBorderSize`	used to define the border width of a primary button	e.g `1px`
`buttonSecondaryBackground`	used to define the background colour of a secondary button	e.g `#ff0000`
`buttonSecondaryColor`	used to define the text colour of a secondary button	e.g `#ff0000`
`buttonSecondaryBorderColor`	used to define the border colour of a secondary button	e.g `#ff0000`
`buttonSecondaryBorderSize`	used to define the border width of a secondary button	e.g `2px`
`buttonDisabledBackground`	used to define the background colour of a button with a disabled state	e.g `#ff0000`
`buttonDisabledColor`	used to define the text colour of a button with a disabled state	e.g `#ff0000`
`buttonDisabledBorderColor`	used to define the border colour of a button with a disabled state	e.g `#ff0000`
`buttonDisabledBorderSize`	used to define the border width of a button with a disabled state	e.g `1px`
`buttonLoadingBackground`	used for the background of the button when there is a loading action in the background	e.g `#d2d2d2`
`buttonLoadingBorderSize`	used for the border size of the button when there is a loading action in the background	e.g. `1px`
`buttonLoadingBorderColor`	used for the border colour of the button when there is a loading action in the background	e.g. `#d2d2d2`

Assets

Within the Checkout Settings you'll find the Assets section to customize the default assets (images, icons). It allows you to:

If you want to customize an asset you can overwrite the default file with a custom file. The new asset will then automatically display in the Checkout UI.

The assets have to be in SVG format and should not exceed 100 KB in size.

Assets need to follow the default folder structure as indicated in the table below.

Folder	Details
`basket`	icons for product quantities
`benefits`	icons displayed in guest login
`carriers`	carrier logos
`collectionPoints`	carrier logos & icons for navigation in the Collection points section
`common`	cross-components, e.g. notification success
`delivery`	icons for delivery option
`discount`	icons for basket discounts
`flags`	country flags
`inputs`	cross-components, e.g. Voucher plus, PAYBACK
`login`	logos for login options like applyPay
`notifications`	icons for elements within the notification banner
`payment`	logos for different payment options/providers

Example

A basket icon would be under basket/cart.svg. The new asset is automatically visible in the Checkout UI.

The path of the uploaded assets is added to the frontend configuration JSON under customizedAssets. If you copy the JSON data to another environment, be sure to either clear the customizedAssets array, or upload the respective assets on that environment as well. Otherwise you will see broken icons in the Checkout UI.

*API Credentials for service costs and risk assessment*

Default Structure

├── basket
│   ├── cart.svg
│   ├── deliveryClock.svg
│   ├── deliverySuccess.svg
│   ├── empty.svg
│   ├── minus.svg
│   └── plus.svg
├── benefits
│   ├── benefit1.svg
│   ├── benefit2.svg
│   ├── benefit3.svg
│   ├── filter.svg
│   ├── follow.svg
│   └── track.svg
├── carriers
│   └── {carrier}.svg
├── collectionPoints
│   ├── chevronLeft.svg
│   ├── clock.svg
│   ├── list.svg
│   ├── listActive.svg
│   ├── location.svg
│   ├── map.svg
│   ├── mapActive.svg
│   ├── mapPin.svg
│   ├── mapPins
│   │   └── {collectionPointType}.svg
│   ├── phone.svg
│   └── squares
│       └── {collectionPointType}.svg
├── common
│   ├── calendar.svg
│   ├── gears.svg
│   ├── info.svg
│   ├── infoBlue.svg
│   ├── infoFill.svg
│   ├── remove.svg
│   ├── removeActive.svg
│   └── statusSuccess.svg
├── delivery
│   ├── collectionPoint.svg
│   ├── collectionPointActive.svg
│   ├── homeDelivery.svg
│   ├── homeDeliveryActive.svg
│   ├── storePickup.svg
│   └── storePickupActive.svg
├── discount
│   ├── discount.svg
│   ├── discountActive.svg
├── flags
│   └── {countryCode}.svg
├── header
│   └── chevronRight.svg
├── inputs
│   ├── add.svg
│   ├── chevronDown.svg
│   ├── chevronUp.svg
│   ├── error.svg
│   ├── eye.svg
│   ├── eyeClosed.svg
│   ├── loyaltyProgram.svg
│   ├── loyaltyProgramActive.svg
│   ├── success.svg
│   └── voucher.svg
├── login
│   ├── amazonPay.svg
│   ├── apple.svg
│   ├── applePay.svg
│   ├── facebook.svg
│   ├── keycloak.svg
│   └── payPal.svg
├── notifications
│   ├── close.svg
│   ├── error.svg
│   ├── info.svg
│   ├── success.svg
│   └── warning.svg
└── payment
    ├── confirmationPending
    │   └── pending.gif
    └── {paymentMethod}.svg

Use cases

Upload a custom image in Checkout

You can replace the custom image displayed in Checkout with your own custom image. Use SVG format not exceeding 100 KB in size. Checkout images are uploaded on the local shop level.

Go to Shops > {shop} > Storefront > Checkout Settings > Checkout Frontend Configuration > Assets.
Hover over the asset to open the upload image dialog.
Upload an image in an SVG format.
Click SAVE.

Upload custom logo for a payment provider

You can add a custom logo for a payment provider on a local shop level.

Go to Shops > {shop} > Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration (Beta).
External Assets > ADD PAIR .
Add payment/ and the name of your logo
Link to an image in an SVG format hosted over CDN. \

Add payment logo in Checkout

Example:
For example: https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg

Define the height of the header element for desktop and mobile

Go to Shops > {shop} > Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration (Beta).
Select Header.
Define the height of the header on desktop and mobile in pixels.
Click SAVE.