Component: Cart Items
Available from: Release 106
Purpose: Display a detailed list of all items, including offers and add-ons.
The Cart Items component is a diverse component that can be used in a variety of scenarios:
Show basket contents on standalone cart page
Show basket contents in the Modular Checkout in place of the Single Product Basket component
Summarise order contents in an order complete page
Encourage customers to upsell to higher value offers before they complete an order
The Cart Items is a very flexible component and can be customised using the props described below. There is also some built-in behaviour:
Item title
For offers, the item title will always be the display_name__limio attribute on the product, "-", display_name__limio attribute on the offer. For example, "Digital Product - Annual Offer".
For add-ons, the item title will always be the display_name__limio attribute on the add-on.
Quantity
The quantity selector behaviour depends on the pricing model of the offer or add-on:
Standard Multibuy: When the `allow_multibuy__limio` attribute is true, a standard quantity dropdown appears. The available quantities (min, max, and increments) are controlled by the `default_quantity_options__limio` attribute.
Volume Pricing: When an offer or add-on uses volume pricing (price type: `recurringVolume`), a specialised quantity selector appears automatically, replacing the standard multibuy selector. Volume pricing supports two formats:
Per Unit Pricing: Displays a number input field where customers can enter any quantity within the defined tiers. The price per unit changes based on the tier (e.g., 1-10 units at $50 each, 11-20 units at $45 each). The total price is calculated as quantity × tier price.
Flat Fee Pricing: Displays a dropdown showing tier ranges (e.g., "1 - 10", "11 - 20"). Each tier has a fixed price regardless of quantity selected within that tier. When a tier is selected, the quantity is automatically set to the ending unit of that tier.
Volume pricing takes precedence over multibuy - if both are configured, only the volume pricing selector will display.
Price
Price is pulled from the Limio Price field, or from configured external pricing on the offer and enabled, a per unit price will appear below the main item price. The item price will be the per unit price multiplied by the selected quantity.
If is being used:
For Per Unit tiers: The total price is calculated by multiplying the quantity by the applicable tier's unit price. For example, with tiers of $50/unit (1-10) and $45/unit (11-20), ordering 15 units costs $675 (15 × $45).
For Flat Fee tiers: The total price is the fixed tier price, regardless of quantity within that tier. For example, a tier of $100 for 1-50 units costs $100 whether you order 1 or 50 units.
The component automatically detects the pricing type from the offer's pricing configuration and displays the appropriate quantity selector and price calculation.
Empty basket
If there are no items in the basket, the Cart Items component will default to its empty state behaviour, which looks like the screenshot below. These fields can be further configured with the props below.
Show component in read-only
If the prop "Show component in read-only mode?" is set to true then the component will not render the quantity dropdown nor the item delete button. This is especially helpful when using the Cart Items on an page.
Upselling
If the prop "Display upsell offers" is true, upsell offers associated with the offer in the basket will be displayed. Read more about upselling here:
How to configure upselling in the cart and checkout
Discount note
The Cart Items component can help users clearly see their savings when purchasing a new subscription. With the addition of the Discount Note attribute, users can configure text to show next to the actual price of the offer. This can be used to show strikethrough pricing, which is proven to increase conversion rates. This new functionality allows for flexible messaging, such as “$49.99” or “Save 10%,” and integrates smoothly with promo codes.
Variables
The Cart Items component has been enhanced to support additional Limio variables around the customer’s subscription. This is useful when using the Cart Items component on an order complete screen. Those includes:
data.attributes.attributeName: Displays a custom or standard offer or add-on attribute by name.subscriptionNumber: Shows the subscription number, only on the complete page when logged in.termStartDate: Start date of the subscription term, only on the complete page when logged in.termEndDate: End date of the subscription term, only on the complete page when logged in.nextPaymentAmount: Amount of the next payment, only on the complete page when logged in.renewalPrice: Price for the next term after renewal, only on the complete page when logged in.
Go to for a full list.
Props
Show offer icons
boolean
true
If true, displays the attached asset image on the offer. If false, does not display any image with the offer. Read more about how to add images to offers here: How to add images to offers
Offer Additional Information
richtext
{{data.attributes.display_description__limio}}
Insert any offer attribute into this richtext field by entering {{data.attributes.attributeName}}. Read more about Limio Variables here: Variables that can be used in Limio Components
Add-On Additional Information
richtext
{{data.attributes.description__limio}}
Insert any add-on attribute into this richtext field by entering {{data.attributes.attributeName}}. Read more about Limio Variables here: Variables that can be used in Limio Components
Unit price label when multibuy is available
string
{{quantity}} x {{formattedPrice}} each
Only displays on an offer or add-on when multibuy = true.
Message when cart is empty
string
Your cart is empty, view offers to get started
Determines the text to display when the cart is empty.
CTA label when cart is empty
string
See offers
Determines the CTA on the button that displays when the cart is empty.
URL to direct users to when cart is empty
string
/default
Determines the URL on the button that displays when the cart is empty.
Display upsell offers
boolean
false
If true, shows any upsell offers associated with the offers in the basket. If false, does not allow upselling.
Show price in upsell offers
boolean
true
If true, displays the Limio price attribute of the upsell offer. If you are using externally priced upsell offers, this field is not supported and the prop should be false.
Show component in read-only mode?
boolean
false
If true, editable actions such as quantity change and item removal will not be actionable by the user.
Show discount note
boolean
false
If true, displays the Discount Note attribute from the offer. If false, this attribute will not be displayed.
Last updated
Was this helpful?