Code
Props
Props should be passed as attributes to the component element.string
The path to the checkout page.Defaults to
/checkoutstring
The message to display when the cart is empty.Defaults to
You have nothing in your cart.string
The path to the shop page.Defaults to
/shopFeatures
Free Shipping Notification
The cart can display a progress message showing how much more a customer needs to spend to qualify for free shipping. This is configured in your web component settings and includes a customisable message with an{amount} placeholder and per-market display thresholds.
The amount remaining is measured on the goods total after discounts, matching how the shipping method’s minimum order value is applied. The banner is hidden once there’s nothing left to add, so it never tells a customer they’re £0.00 away.
Checkout Requirements
If you’ve set a minimum item count or full-case requirement, the cart tells the customer what’s missing and won’t let them continue until it’s met. A customer who reaches checkout below the minimum is sent back to the cart.Related Products
Display product recommendations within the cart to encourage additional purchases. Configure the section title, number of products, and toggle visibility from your web component settings.Container Styling
The cart component supports optional background colour and border styling, configurable from your web component settings.Styling
The following parts are available to style the cart component:The containing
<div> around the cart.The checkout button element.
The
<img> element that contains the product image.The containing
<div> around the product image.The “continue shopping” link element.
The
<div> that contains the empty cart message.The pulsating loading elements that are shown when the cart is loading.