docs
  1. SCAYLE Resource Center
  2. Developer Guides
  3. Checkout
  4. Theming & Assets

Theming & Assets

Overview

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

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:

  1. Go to Shops > Shop > Storefront > Checkout Settings > Checkout Frontend Configuration.
  2. Select the Styles tab. When you open the style tab, the content is empty.
  3. 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:

ParameterDescriptionPossible Values
fontfont-family used application-wisesee MDN
fontSizeExtraSmallfont size for input field error messages and other small hintsmax. 12px
fontSizeSmallfont size for descriptive text throughout the application in places such as badges, product details, and disclaimersmax. 14px
fontSizeMediumfont size in form fields, sub-headlines, prices, option selection, and vouchersmax. 16px
fontSizeLargefont size only for the main headline on a pagemax. 32px
fontWeightNormalfont weight used for normal text
fontWeightBoldfont weight used for bold text

Input Styling

Input fields can be adjusted through the following settings:

ParameterDescriptionPossible Values
inputBorderColorgeneral border colour of the input fielde.g #ff0000
inputBorderSizewidth of all borders of the input field (top, left, right, bottom)e.g. 0px = no border
inputBorderSizeBottomwidth of the border of only the bottom of the input fielde.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.
inputLabelColorused as the input’s label and placeholder colore.g #000000
inputBackgroundColorbackground colour of all input and select fieldse.g #ff0000
inputDisabledBackgroundbackground colour of all disabled input fieldse.g #ff0000
inputDisabledColortext colour of all disabled input fieldse.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:

ParameterDescriptionPossible Values
successColorcolor for a successful event like voucher was applied successfullye.g #ff0000
errorColorcolor for checkout error events like payment method cannot be selectede.g #ff0000
warningColorcolor for warning events like to many items to baskete.g #ff0000
infoColorcolor for general information events like basket updatede.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.

ParameterDescriptionPossible Values
borderRadiuscontrols the border radiuse.g. 3px
borderColorcontrols the border colore.g #ff0000

Options Styling

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

ParameterDescriptionPossible Values
optionBackgroundInactivebackground color for a non-selected optione.g #ff0000
optionBackgroundInactivebackground color for a non-selected optione.g #ff0000
optionTextColortext color for an optione.g #ff0000

Colors

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

ParameterDescriptionPossible Values
primaryColormain color in the application primarily for backgroundse.g #ff0000
primaryTextColormain text color in the application primarily typographye.g #ff0000
backgroundColorbackground of the entire page as well as key componentse.g #ff0000
secondaryTextColoraccent colour of less important texte.g #ff0000
secondaryBackgroundColorsecondary background and is importantly used as the basket background in case that is activee.g #ff0000
tertiaryBackgroundColorthe tertiary background color is used in elements such as the payment installment form, rule engine debugger, and the select field dropdown menuse.g. #eeeff1
quaternaryBackgroundColorquaternary background and is used in the delivery forecast within a basket iteme.g. #ebf1f7
inactiveTextColortext of placeholders and inactive labelse.g #ff0000
secondaryInactiveTextColortext colour of secondary inactive text and used on background elements such as the breadcrumbse.g #ff0000
imageBackgroundColordefines the default colour of background behind the product image in the baskete.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.

ParameterDescriptionPossible Values
buttonPrimaryBackgrounddefine the background colour of a primary buttone.g #ff0000
buttonPrimaryColorused to define the text colour of a primary buttone.g #ff0000
buttonPrimaryBorderColorused to define the border colour of a primary buttone.g #ff0000
buttonPrimaryBorderSizeused to define the border width of a primary buttone.g 1px
buttonSecondaryBackgroundused to define the background colour of a secondary buttone.g #ff0000
buttonSecondaryColorused to define the text colour of a secondary buttone.g #ff0000
buttonSecondaryBorderColorused to define the border colour of a secondary buttone.g #ff0000
buttonSecondaryBorderSizeused to define the border width of a secondary buttone.g 2px
buttonDisabledBackgroundused to define the background colour of a button with a disabled statee.g #ff0000
buttonDisabledColorused to define the text colour of a button with a disabled statee.g #ff0000
buttonDisabledBorderColorused to define the border colour of a button with a disabled statee.g #ff0000
buttonDisabledBorderSizeused to define the border width of a button with a disabled statee.g 1px
buttonLoadingBackgroundused for the background of the button when there is a loading action in the backgrounde.g #d2d2d2
buttonLoadingBorderSizeused for the border size of the button when there is a loading action in the backgrounde.g. 1px
buttonLoadingBorderColorused for the border colour of the button when there is a loading action in the backgrounde.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.

FolderDetails
basketicons for product quantities
benefitsicons displayed in guest login
carrierscarrier logos
collectionPointscarrier logos & icons for navigation in the Collection points section
commoncross-components, e.g. notification success
deliveryicons for delivery option
discounticons for basket discounts
flagscountry flags
inputscross-components, e.g. Voucher plus, PAYBACK
loginlogos for login options like applyPay
notificationsicons for elements within the notification banner
paymentlogos 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.

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

Upload custom logo for a payment provider

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

  1. Go to Shops > {shop} > Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration (Beta).
  2. External Assets > ADD PAIR .
  3. Add payment/ and the name of your logo
  4. 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

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