Look and Feel

Styling the SCAYLE checkout

Multiple categories of UI configuration are available to give you full control of how your checkout looks and feels, to ensure it fits the branding of your shop and seamlessly fits your brand.

Our SCAYLE Panel offers a dedicated section related to the theming of the checkout web component. As these values are updated, you will see them reflected in our demo instance in real-time, giving you clear feedback of what you are changing and how the layout is affected.

These variables are used throughout the checkout web component in a strategic way to make sure elements fit together correctly, accounting for things such as line breaks, and spacing.

You can configure this in the SCAYLE Panel under Checkout ➜ Customization ➜ General Settings ➜ Layout ➜ Styles.

Key Features

The SCAYLE Checkout comes packed with powerful customization options to make your checkout integrate seamlessly within your shop's design:

Animations

Transition Speed

Typography

Font Family
Font Sizes
Font Weight

General Theming

Borders
Buttons
Enabled / Inactive / Disabled / Loading Views
Notifications

CSS Overwrites

To extend the theming functionality even further, without requesting additional features from SCAYLE, we offer more fine-tuned control of the checkout styling via CSS overwrites.

How it works

Within the SCAYLE Panel, there is a section where custom CSS can be written. This is saved to an overwrites.css file, which is loaded after the main checkout styles to take priority.

You can configure this in the SCAYLE Panel under Checkout ➜ Customization ➜ General Settings ➜ CSS Overwrites.

As anything can be done here to affect the styles, please test carefully to avoid any negative consequences.

Custom Assets

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.

Upload the custom asset via the SCAYLE Panel

You can replace default images such as payment icons and carrier logos with your own custom images if needed. Ensure that you use SVG formats not exceeding 100 KB in size.

You can configure this in the SCAYLE Panel under Checkout ➜ Assets.