Customization

Add telephone number for shipping Option

Since every shipping option belongs to the specific carrier - and it's the carrier who eventually receives the "customer phone number" to notify about the delivery status, please find the detailed instruction explaining how to add "telephone number" in the Logistics Phone Number Field section.

Change positioning of Shipping Option

Since shipping options belong to the carriers (even if the carrier selector is not visible, eg. when there is only one available) we change the placement of the "shipping options" by moving the "carrier selector" to one of the 3 possible positions: Shipping Top, Shipping Bottom or Payment. Please read more about the placement here.

Change Shipping Option Position

Show Short Description in Shipping Option Component

By default, the Shipping Option component presents the customer in Checkout with the following information:

• Shipping option title
• Estimated delivery time
• Shipping cost

The view can be extended by adding a "short description" providing a more detailed explanation of the specific shipping option.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipping Options.

Configuration steps

To enable a short description for the Shipping Option, simply enable the Short toggle. Each shipping option has a corresponding translation key for the short description.

To modify these translations, use the following translation key:
shipping.carrier.optionDescriptions.${shippingOptionKey}.shortDescription.

Preview

Short description

Copy

Show Tool Tip in Shipping Option Component

By default, the Shipping Option component presents the customer in Checkout with the following information:

• Shipping option title
• Estimated delivery time
• Shipping cost

The view can be enhanced by adding a "tooltip" that provides an in-depth explanation of the shipping option. This additional information will appear when users hover over the info icon.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipping Options.

Configuration steps

To enable a tooltip for the Shipping Option, simply activate the Tool Tip toggle. Each shipping option has a corresponding translation key for the "short description."

To modify the tooltip headline, use the following translation key:
shipping.carrier.optionDescriptions.${shippingOptionKey}.toolTipHeadline
To update the tooltip content, use the key:
shipping.carrier.optionDescriptions.${shippingOptionKey}.toolTipText

Preview

Tool tip

Copy

Hide Delivery Estimations on Shipping Option Component

By default, the Shipping Option component presents the customer in Checkout with the following information:

• Shipping option title
• Estimated delivery time
• Shipping cost

The view can be adjusted to hide the "Estimated delivery time" if this information should not be communicated to the customer.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipping Options.

Configuration steps

To disabled Delivery Estimations on the Shipping Option Component, simply enable the toggle Hide Delivery Estimations.

Preview

Hide Delivery Estimation Hide Delivery Estimation

Copy

Adjust Shipping Options to Multi-country-setup

SCAYLE's Checkout system is designed to support various use cases tailored for multi-country setups. The following example illustrates how to manage the "hide delivery estimates" feature, showcasing the Checkout system's versatility in a multi-country configuration.

This can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipping Options.

Example Use Case: Imagine a scenario involving the United Kingdom, where strict regulations govern delivery delays. If a company promises a specific delivery date and fails to meet it, it may face legal consequences, including compensation claims. However, under the Consumer Rights Act, if no delivery date is provided, the item must be delivered within 30 days.

To minimize the risk of legal action, it may be beneficial to "hide" delivery estimates in such cases. But how can this be done effectively?

Step 1:Step 2:

Copy

Within the SCAYLE Panel, resembling the following:

• Global: Any configuration changes made will be applied globally across all country shops within the admin panel.
• United Kingdom: This option, preselected by default, applies changes exclusively to shops associated with the United Kingdom.
• en_GB: By selecting the language_COUNTRY dropdown, changes will be applied only to the shop in the chosen language version.

In this case, the changes are intended for all UK shops, so the preselected "United Kingdom" option is retained.

Notifications

In SCAYLE's Checkout Frontend, notifications are crucial for giving customer feedback and guidance throughout the process. They enhance the customer experience by updating customers on their actions and alerting them to any issues that need attention.

Below are the customer notifications along with a detailed explanation of their root causes.

HTML Slots

HTML Slots serve as dynamic placeholders within the Webcomponent. They act as small portals through which the parent website can inject customized content into the checkout Webcomponent, offering a flexible way to change the appearance.

Please refer to the general documentation to understand how to setup HTML Slots for Collection Points.