The IRP basket pages incorporate UX and accessibility best practices on the desktop (Basket.aspx), mobile (Mobile/MobileBasket.aspx) and trade (Trade/Basket.aspx) sites.
All pages are optimised for conversion across all device types and have been designed from the ground up to maximise your revenues, margins and profits.
Basket summaries
On the majority of desktop screens, the basket layout displays as two columns with a 'sticky' basket summary area (unless click & collect has been selected):
For mobiles or narrow websites, the contents will display as a single column with the basket summary showing below the basket contents:
Note on adding vouchers
Although not shown in the screen captures above, in the 'Enter a voucher code' sections of the 'Your Order' box, an Apply button will be shown in place of the 'add' sign (+). You can edit this text using Small Translation ID 3203.
- If a customer clicks the button without entering a voucher code, they will see the message Could not find deal associated with this voucher (Small Translation ID 2708).
- If they enter an incorrect code, they will see the message The Gift Voucher code does not exist (Small Translation ID 789).
Quantity updates
Customers select small quantity updates (<10 items) using a drop-down list:
Customers select large quantity updates (10+ items) by manually entering the quantity value in a standard text box. Items with quantity discounts display a link and pop-up list of the quantity discount breakdown in the list of basket items:
Remove or save for later
Customers can easily remove items from their basket by clicking the 'waste bin' icon. Alternatively, they can save an item in their Wish List by clicking the 'heart' icon. Both icons are shown in the following screen capture
You can change the default text of the 'Remove' option using Small Translation 3151 (used by standard controls) and the 'Save for later' option using Small Translation 3181 (the standard wish list text).
Additional order information
Optionally, you can display an 'Enter additional order information' text box on the basket page for customers to enter notes. You toggle this on or off using the Show Basket Additional Information Text Box Application Setting ('Basket' grouping). This is disabled by default. (Customers can always enter additional order information when they are on the order summary pages in checkout.) Note that this has a maximum length of 100. Here is an example of the additional information text box:
You can change the default title text of the text box using Small Translation 1255.
Promotions
A basket promotions scroller control displays on the desktop, mobile and trade basket pages when applicable promotions are available and have associated basket text. These will scroll automatically or manually and all promotions can be listed at once.
The promotions scroller can display at the top or bottom of the basket contents as determined by the Promotions Basket Position Application Setting (in the 'Promotions And Vouchers' grouping). Note that you can customise your promotional description, button text and tooltips using the settings on the PromotionEdit.aspx and TradePromotionEdit.aspx pages:
'Promotions Basket Position' Application Setting set to 'Top':
'Promotions Basket Position' Application Setting set to 'Bottom':
Optionally, you can include a unique basket image for promotions and trade promotions. You upload these on the PromotionEdit.aspx and TradePromotionEdit.aspx pages using the Basket Image setting in the 'Basket Messaging' section:
Note that the images must be in JPEG format. The images are stored under Images/Promotions/BasketImages. As with all imagery, you should test how the basket image appears before setting it live on your website.
Click & Collect
All basket pages show which items are unavailable when Click and Collect is enabled and a location has been selected. This allows customers to edit their baskets based on which locations are most convenient for them.
Note that the messaging under the main Click & Collect heading is configurable via Small Translation 3180 (in the screen capture above, this reads We have a strict social distancing policy in our store).
The built-in geo-location finder (Use my location) allows customers to find their nearest location (if supported by their browser). If an item is not in stock in some locations, an 'Unavailable' label will be displayed against those locations, for example:
This allows the customer to change location or remove items before proceeding. If they select the 'unavailable' location, their basket summary will be greyed-out and the following message will be presented (Small Translation 3153):
You define how many locations are displayed to customers by configuring the Application Setting called Click And Collect Maximum Locations To Display Before Search Required (in the 'Click And Collect' grouping). For example, if you enter a value of '3' for this setting, then search options will display on the basket (and checkout) pages for Click and Collect stock locations only when there are more than 3 available locations.
For more details about using Click and Collect on the IRP, see Click and Collect Overview.
Progressing to the checkout
Customers click the Checkout Now button (Small Translation 3170) to progress to the high-converting IRP checkout process. See IRP Checkout Overview for details.
Alternatively, if you have enabled Click & Collect, customers can click the Click & Collect Checkout button (Small Translation 3168) to make use of that facility in the checkout. See Click and Collect Overview for details. They can also revert to standard delivery by clicking the Delivery Checkout button (Small Translation 3169).
