Using Cart Components in the Limio Page Builder

Available from: Release 106

Our new out-of-the-box cart components give the Limio Commerce user complete flexibility when configuring a cart, particularly for companies that allow customers to purchase multiple offers at once.

We have documented each of these individual components under the Cart Components section - so for more detail for each of the components referenced here today, please refer to this section!

Cart components can be used to create a cart for two main use cases:

• A standalone cart page
• A cart alongside a Modular Checkout

We will show how to achieve both as part of this article. 

Standalone Cart

You may want your customers to be directed to a standalone cart page to further configure their cart before they enter the checkout.

When would I use this set up?

Standalone carts allow you to add a lot of detail separate from the checkout. You can add more specific product and offer information, clarify terms and conditions, and apply promo codes.

They also provide an opportunity for you to display some Upsell or Cross-sell offers to your customers. 

Our upsell and cross-sell documentation is coming soon, with Release 107.

Set up

Below is a basic example of a cart that leverages all the cart components. In the diagram there is a key indicating which cart items are being used. 

Key	Component	Purpose
A	TEXT	Free text field to enrich the information on your cart.
B	SEPARATOR	Adds spacing to the cart, allowing you more easily to control the look and feel.
C	CART-ITEMS	Lists all the items in the cart, including quantity, price, features and item-specific promo code discounts
D	CART-SUMMARY	Summarises the subtotal, the tax, any cart-level promo code, and total amount due
E	BILLING-DETAILS	Pricing breakdown of the amount due now and the amount due next for the current cart items.
F	COMPONENT-PROMO-CODE-REDEEM	Allows the user to enter a promo code. Find out how to configure promo codes [HERE].
G	INITIATE-CHECKOUT-BUTTON	Will send users to the checkout configured on the offer (only used for standalone cart).
H	BACK-BUTTON	Will send the user back to the page that they had originally accessed the cart from.

For more detail on any of these components, please read the Cart Components section in Zendesk. 

The key component for the Standalone Cart will be the INITIATE-CHECKOUT-BUTTON (G in the image above). This button is how the user accesses the checkout from the cart page. 

Cart alongside Checkout

Another application of the Limio Cart Components is to configure the cart on the same page as the checkout. This tends to be the preferred option when marketers want to keep their cart and checkout lightweight and minimise friction. 

When would I use this set up?

Deploying the cart alongside the checkout is the best approach for those who want to minimise friction in their purchase flow. Limio lets you build a lean and lightweight order overview by combining the cart and checkout in one place. The flexibility of the Modular Checkout and the cart components give the Limio App User the toolbox to easily and quickly experiment with what layout works best.

Set up

You can leverage new page layout functionality from Limio to get the most out of the cart and checkout configuration. 

An example of how this could look can be seen below:

Or, another example: 

Both pages leverage a new layout in the Limio pages; "6040 Columns".  

This layout is very popular for cart and checkout configuration, and can be applied to your page by doing the following:

Config > Templates > Pages > [Select a Page] > Layout > Select Two Column - 60/40

In summary, the new Limio Cart Components will give Limio Commerce users much more control over how their checkout experience will look. You can spin up new checkouts and carts in minutes, all without any coding, giving you all the resources you need to experiment and find the cart layout that works best for you. 

You can even evaluate how successful each iteration of your cart and checkout are, through Limio Analytics! If you head to Analytics > Checkout Conversion, you'll see a full breakdown of how successful each of your checkouts are. 

Find out more about Checkout Conversion here: Limio Analytics: Checkout Conversion Rate.