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
To adjust the positioning of the Shipping Option component, refer to the Carrier positioning as both components are directly related.
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
.
Notes: If your shipping option has a shippingOptionKey
named "least_packages," the corresponding Crowdin key to access and modify the translation would be:shipping.carrier.optionDescriptions.leastPackages.shortDescription
.
Preview
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
For example, if your shipping option has a shippingOptionKey
called "least_packages," the corresponding Crowdin key to access and modify the translation for the tooltip headline would be:shipping.carrier.optionDescriptions.leastPackages.toolTipHeadline
.
Preview
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
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?
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.
Notification | Root cause | Notification |
---|---|---|
editingCarriers | No Shipping Option selected | "You cannot proceed with your order without selecting a shipping option." |
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.