Customization

Overview

SCAYLE’s checkout offers exceptional flexibility, allowing extensive customization across various components to meet specific business needs:

Change position of Carrier selection

At SCAYLE, the individual position of the Carrier selection can be customized. This can influence the position on a specific page (top or bottom) or even the distinctive Checkout step where Carrier can be selected (Shipping page or Payment page).

This option can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Shipment and Delivery > Carrier Options.

Panel preview: Change Carrier Selection Position

Configuration steps

Select one of the following options to change the position of the Carrier selection

Configuration
Shipping Top (default)	By default, the Carrier Selection component is located the address form in the "Shipping Step."
Shipping Bottom	The Carrier Selection component is positioned below the address form in the "Shipping Step."
Payment Step (After Payment Options)	The Carrier Selection component is positioned in the "Payment Step".

Previews

Collapse Carrier options

By default, the Carrier options component is not collapsible. However you can turn that option on within a panel, to alternate the behavior of a carrier component and shorten the checkout experience for our returning users.

You can do this in the SCAYLE Panel under Shops > Storefront > Checkout Settings > Checkout Frontend Configuration > Generel Configuration > Shipment and Delivery > Carrier Options.

This option is especially beneficial for the returning users of the checkout, where "carrier options" selector is located at the "payment step". Then, instead of seeing a big "carrier selector" component - they will only scroll through short "carrier summary" based on previous carrier choice (being able to edit if needed) - making an entire experience even sweeter.

Compare the default state when "collapsible" option is off.

vs when collapsible option is turned on BEFORE "apply" button is clicked

vs when collapsible option is turned on AFTER "apply" button is clicked

SCAYLE offers an option to request customer consent for sharing personal data with the logistics carrier to enable a more personalized service after the shipment has been dispatched. This use case can be enabled through the SCAYLE "Checkbox" feature.

This can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Dynamic Fields > Payment Step > Checkboxes.

Configuration steps

Customize the Checkout Experience by adjusting the following parameters below

Configuration	Mandatory	Description
Name	✅	MUST be carrierConsent
Label	✅	Specifies the text for the Checkbox
Headline	❌	Optionally adds a headline to the Checkbox
Checkbox is mandatory	❌	Indicates whether the customer must provide consent in order to successfully complete their order

Preview

The default translation of the "carrier consent" lacks a link. To add one, a combination of Crowdin and Checkout configurations can be used to provide additional information, such as terms and conditions, without altering the core consent text.

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

Configuration steps

An array of objects appears, each with a key and value. The key serves as the unique link identifier for translations, and the value is the URL to which the customer is directed.
Add a new object to the end of the array with the key as "carrierTermsAndConditions" and the value as "https://test-carrier-link.com". Click Save.
Update the translation in Crowdin. Search for the "carrierConsent" translation key under payment > carrierConsent. Modify the text to:
"I agree to the <carrierTermsAndConditionsLink>terms and conditions</carrierTermsAndConditionsLink> and the use of my email address by the logistics carrier for shipment notifications
The link format includes the key (carrierTermsAndConditions) and the suffix "Link" in HTML angle brackets.
Save changes in Crowdin and deploy to staging or production.
Verify in checkout that the new translation includes the hyperlink to "https://test-carrier-link.com".

Automatically select Carrier by attribution

In case you have more than one Carrier and do not want to use the Rule Engine you can streamline the ordering process and reduce friction in the user journey, by enabling automatic carrier selection. This feature dynamically selects the optimal carrier based on predefined configurations and attribution strategies.

When using the automatic carrier selection one of four strategies is applied. See the flowchart to find the used strategy in each case.

Carrier Selection Strategies

Cost Optimal Carrier Selection Strategy

This strategy selects the most cost-effective carrier by applying predefined rules when both order merchants and carriers are applicable.

• Order Merchants are applicable if they are listed in carrier.selectionByAttributes.merchantIds.

• Order Carriers are applicable if those configured in carrier.selectionByAttributes.carrierGroupA and carrier.selectionByAttributes.carrierGroupB are suitable for all packages.

When both are applicable, rules from carrierARules and carrierBRules are used to determine whether to select carriers from carrierGroupA or carrierGroupB.

Best Guess Carrier Selection Strategy

The best-guess carrier selection strategy is employed when Order Merchants or Carriers are not applicable. The selection process follows these steps:

Single Carrier Group: If only one Carrier Group is available for the order packages, it is selected.
Single Mandatory Carrier Group: If only one mandatory Carrier Group is available, it is selected.
Multiple Mandatory Carrier Groups: If multiple mandatory Carrier Groups are available, the group with the most packages is selected. If applicable, the customer’s preferred Carrier will be chosen instead.
Multiple Non-Mandatory Carriers: If multiple Carriers are available but none are mandatory, the most recently selected Carrier or the customer’s preferred Carrier (whichever is available first) is chosen.

Random Carrier Selection Strategy

This strategy performs a weighted random selection.

The random carrier selection strategy is applied when the configuration option carrier.selectionByAttributes.randomCarrierForNewCustomers is set to true.

This strategy uses the configuration options carrier.selectionByAttributes.carrierShareA and carrier.selectionByAttributes.carrierShareB to perform a weighted random selection between carrier.selectionByAttributes.carrierGroupAand carrier.selectionByAttributes.carrierGroupB.

Last Setting Carrier Selection Strategy

This strategy improves performance by using the last selected carrier from a previous evaluation for subsequent selections.

To save evaluations and to increase performance, the entire evaluation is only run once and uses the last setting Carrier selection (based on the remembered Carrier in the state) in the subsequent evaluations.

Configuration

All settings for the automatic carrier selection are stored in the checkouts backend that currently can be edited using SCAYLE's import feature or by your SCAYLE Account Manager.

In the Attribution configuration table you can browse all possible configuration options.

Attribution configuration


`carrier.selectionByAttributes.enabled`	true\|false	Enable/disable the feature.
`carrier.selectionByAttributes.merchantIds`	[5,9,130]	Use the cost-optimal carrier selection if the order merchants match those.
`carrier.selectionByAttributes.randomCarrierForNewCustomers`	true\|false	Choose a Carrier randomly if the customer is a new one.
`carrier.selectionByAttributes.carrierGroupA`	hermes	Carrier to be used in random carrier selection and cost-optimal carrier selection based on `carrierShareA` and `carrierARules`.
`carrier.selectionByAttributes.carrierGroupB`	dhl	Carrier to be used in random carrier selection and cost-optimal carrier selection based on `carrierShareB` and `carrierBRules`.
`carrier.selectionByAttributes.carrierShareA`	1.00	Used as weight for `carrierGroupA` in random carrier selection.
`carrier.selectionByAttributes.carrierShareB`	0.00	Used as weight for `carrierGroupB` in random carrier selection.
`carrier.selectionByAttributes.carrierARules`	[{"maxVolume":null,"maxWeight":null,"minVolume":0,"minWeight":0}]	Used in cost-optimal carrier selection to identify which `carrierGroupA` should be applied.
`carrier.selectionByAttributes.carrierBRules`	[{"maxVolume":null,"maxWeight":null,"minVolume":0,"minWeight":0}]	Used in cost-optimal carrier selection to identify which `carrierGroupB` should be applied.
`carrier.selectionByAttributes.logging`	true\|false	Enable/disable logging.

Add Carrier Customer ID field

In certain countries, like Austria, some Delivery Options (Collection Points) require a Carrier Customer Id for successful delivery. To accommodate this, SCAYLE's checkout flow can be configured to include an optional "Carrier Customer ID Field."

This option can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Dynamic Fields.

Configuration steps

Select the placement for the input field, ideally within the "Collection Point" area to ensure relevance. To enable this area, toggle the grey button at the top right corner of the screen.

Adjust Carrier to multi-country-setup

SCAYLE's Checkout supports a range of specific use cases for a multi-country setup. The following example demonstrates how to handle the customer telephone number to illustrate the overall Checkout capabilities in a multi-country configuration.

This option can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Dynamic Fields.

Exemplary use case: Consider a scenario where a specific country, such as Austria, legally requires the collection of customer phone numbers for every transaction. A method is needed to allow users to input their phone numbers exclusively for this country, without impacting other shops. How can this be accomplished?

Configuration steps

Navigate to Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Dynamic Fields

Preview

Add logistic phone number field

When configuring the carrier settings, consider collecting a logistics phone number to share with the Carrier. This allows the customer or any recipient whose number is provided to receive delivery status notifications.

This option can be configured in the SCAYLE Panel under Storefront > Checkout Settings > Checkout Frontend Configuration > General Configuration > Dynamic Fields.

Note: The Logistics Phone Number is crucial for carrier-customer communication. Without it, or if only the standard Phone Number is provided, customers won't receive updates about their delivery status. This field is different from the regular customer number used by customer service.

In case user consent needs to be obtained, please refer to the Configure Carrier Consent Option chapter for more details.

Phone number validation is done through by libphonenumber-js.

Configuration steps

Choose the placement for the logistics phone number input field within the Checkout flow. There are 8 possible placements available. For example, select "Collection Point".

After selecting the placement, a widget will appear at the top of the screen. Toggle the "Enable area" button to activate it.
In the enabled area, locate the logistics phone number input field from the list of available input fields. Toggle the button next to it to access additional configuration options.

Configure the field according to the relevant options and click the Save button at the top right of the screen. Congratulations! The logistics phone number input field has been successfully added to the Collection Point step. Review the Checkout flow to ensure the implementation functions as expected.

Preview

Change Carrier logo

You can change the logo in the SCAYLE Panel under Shops > Storefront > Checkout Settings > Checkout Frontend Configuration > Assets.

Search for the name of the Carriers logo you want too change, hover it and click on the pencil to replace the image with a new one.

Contact your SCAYLE Account Manager

to define new Carrier logos in the Checkout flow
if a Carrier needs to be added that is not covered by the predefined carrierGroupKey