Customization
The basket page represents a critical opportunity to optimize the user experience and drive business results. By customizing its elements, tenants can effectively guide users toward completing their purchases, improve conversion rates, and reinforce brand loyalty. The following detailed suggestions outline how to meet both user needs and business objectives.
If you haven't already, please start by reading our General Overview of the Basket page.
Price Summary
The price summary section can be optimized by combining all discounts — including sale, campaign, and promotional discounts — into a single line item. This approach simplifies the pricing breakdown, making it easier for users to see their total savings at a glance.
For those who prefer more detailed insights, an expandable section can be still included to provide a breakdown of the combined discounts. This level of customization allows for a more streamlined user experience, reducing visual clutter while still providing transparency for users who want more details.
Example of a unified discount calculation:
Product Sorting
Customizing the product sorting logic allows for better organization of the basket contents. For example:
- Promotions: Sort products by active promotions, such as "Buy One, Get One Free" or "Seasonal Discounts," and visually separate them with headers.
- Product Name: Alphabetical sorting by product name ensures a tidy and predictable layout.
- Size: Especially for fashion or footwear stores, sorting products by size within the same category can make it easier for users to review their selections.
These grouping methods can be dynamically enabled based on the nature of the shop or user preferences.
Example of items sorted by name:
Adding Payment Method Icons
To build trust and improve transparency, adding icons for available payment methods at the bottom of the basket page is a valuable customization. These icons can include widely recognized methods such as credit cards, PayPal, or local payment solutions. Ensuring the icons are up-to-date and styled to match the page's design will maintain a polished appearance.
To add a new icon, place it in the /nuxt/assets/icons directory. The icon will then be accessible as a component named Icon<IconFileName>. For example, if you add an icon named CreditCard-MasterCard.svg, you can use it like this:
Deleting Items
The item deletion flow can be redesigned to improve usability and efficiency. Instead of using a separate modal for confirmation, consider integrating the delete option directly into the product card layout. A confirmation step could take the form of an "Undo" option that temporarily keeps the item visible in the basket after removal. This approach offers a seamless experience while still safeguarding against accidental deletions. The undo action should include a timer (e.g., 5–10 seconds) for users to act before the item is permanently removed.
.png)
Undo Flow Example
Adapting Delivery Costs
To display delivery costs and their description on the basket page, you can configure a custom deliveryCosts field in the SCAYLE Panel:
1. Create the Custom Data Field
- Navigate to: Settings → General → Custom Data → Shop Country
- Click on "Add Criteria" to create a new field
- Set the name to
deliveryCosts - Choose type:
JSON - Click the settings (gear) icon next to the field to define the JSON schema:
2. Set Values for Specific Countries
- Go to: Shops → Internationalization → Countries
- Select the country you want to configure
- Under Custom Data, set the value of
deliveryCostsusing the format:
These values will now be displayed on the basket page as the delivery cost and its disclaimer.
If no values are set, the default behavior is:
- Delivery cost defaults to
0 - Disclaimer falls back to the translation key:
'basket.summary.delivery_fees'
