Customization

Overview

Change Default View of Collection Points from a Map to a List

When customers search for a Collection Point, the results can be displayed either on a map or as a list. You can easily toggle between these options in the SCAYLE Panel. For default configurations, please refer to the Checkout defaults.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipment & Delivery > Collection Points.

Configuration steps

To change the default view of Collection Points, use the Preferred View toggle to switch between Map and List as needed.

Change Default View of Collection Point from Map to List

Preview

Adjust Collection Point Options Displayed based on Distance

When a customer enters an address in the Collection Point Search, options within a predefined radius are shown. Both the default selection and more detailed options in the dropdown can be individually configured.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipment & Delivery > Collection Points.

Configuration steps

Collection Points Options based on distance is defined by Default Maximum Distance and Maximum Distancen Options.

Adjust Collection Point Options based on Distance

Parameter	Description
`Default Maximum Distance`	Distance is defined in "km". By default, the search is conducted within a 10 km radius of the selected address. Please enter only numeric values.
`Maximum Distancen Options`	Defines the dropdown options within the Collection Point component. Each value represents the search radius used to find the closest collection points. To change these values, replace the current numbers with new ones, keeping them in a numeric array separated by commas (e.g., [2, 4, 6, 8]). Ensure that the Default Maximum Distance is included in this list

Preview

Enable Google Autocomplete to make us address suggestion

Another useful enhancement is the Google Autocomplete feature for Collection Point Search. As customers type in their address within the Collection Point component, Google Autocomplete will suggest addresses in a dropdown, eliminating the need to manually enter full details like street address, city, and zip code.

This can be done in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipment & Delivery > Collection Points.

Please note that Google Autocomplete is currently free of charge and operates through SCAYLE's GCP account. For more details, contact your SCAYLE Account Manager

Configuration steps

To enable Google Autocomplete, simply turn on the Google Maps Autocomplete toggle. SCAYLE will automatically apply internal API keys for the respective environment.

Preview

Collection Points with Google Autocomplete disabled

Autoselect Collection Point as default Delivery Option

When a customer enters the Checkout flow for the first time, SCAYLE can autoselect a specific Delivery Option within the Shipping step. This feature helps promote certain Delivery Options over others.

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

Configuration steps

To Autoselect COllection Point as the default Delivery Option, change the Preferred selection within the Delivery Option configuration from Home Delivery to Collection Point.

Autoselect Collection Points as Default Delivery Option

Change the following parameter below to change Autoselect Logic for Collection Points

Parameter	Description	Preview
Home Delivery	By default, the Delivery Option Selection component "Home Delivery" is autoselected
Collection Point	The Delivery Option Selection component "Collection Points" is autoselected
Store Pickup	The Delivery Option Selection component "Store Pickup" is autoselected

Checkout Experience

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	Notification	Root cause
`validationError`	"The input provided is invalid. Please revise your input and try again."
`noDeliveryMethods`	"Currently there are no delivery methods available."
`collectionPointUnavailable`	"The pickup location has unfortunately become unavailable. Please select an alternative delivery address."
`noCollectionPointsFound`	"There are no collection points available in this area. Please try again with an increased search radius or a different search address."
`noCollectionPointsFoundAutocomplete`	"There are no collection points available in this area. Please try again with a different search address."
`incompleteAddressComponents`	"Unfortunately, this address cannot be used to search for collection points. Please try a different input."
`myLocationUnavailable`	"Unfortunately, we cannot use your location to search for collection points at this time. Please enter an address manually."
`noDeliveryType`	"Please select a delivery type to proceed to the next step."
`noCollectionPointSelected`	"Please select a collection point to proceed to the next step."

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.