Customization

Use the Customization UI to tailor your checkout frontend to your business needs. Adjust layouts, text and behaviors for each market or country, preview changes in real time and publish a checkout experience that matches your brand and process requirements.

Accessing the customization UI

1. Open the SCAYLE Panel.
2. From the main menu, select Settings → Checkout → Customization.
3. The Customization UI appears, split into three areas:
   1. A top bar with global controls.
   2. A left-hand navigation tree.
   3. A central preview panel showing your checkout page.

Configuration toolbar

The top navigation contains:

• High‑level settings selector – switch between areas: General Settings, Basket, Payment Step, Sign In Step and Delivery Step.
• Overwrite level selector – choose Global, Country or Market scope.
• Display mode icons – three icons in the top right to toggle desktop view, mobile view and fullscreen editor.

Edit setting

The edit settings panel on the left displays configuration items organized by the high‑level area selected in the configuration toolbar (General Settings, Basket, Payment Step, Sign In Step, Delivery Step).

Use this panel to adjust settings directly. After making changes, click the green Save button in the top right of the UI to apply your updates immediately at the selected overwrite level.

Expand categories to reveal their settings groups.

If a setting has been overridden at a different scope, an indicator appears next to its label in the sidebar.
Hover over the indicator to see whether the value is set at Global, Country or Market level.

When you drill down to the deepest level, you can modify settings directly.

Hover over any setting label to highlight the corresponding area in the preview panel, so you can see exactly which part of the checkout page you’re configuring

Preview

The central preview panel updates in real time to reflect your configuration changes. It displays your checkout page with interactive elements and controls. In the top right corner use the device icons to toggle between desktop and mobile views and the fullpage icon to enter fullscreen editor mode. Use this pane to test workflows and verify layout, text and functionality before saving.