Theming & Assets
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
}
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.
Button Styling
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:
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
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.
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. \
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.