The Slideout Cart displays a running summary of the current cart contents. It typically slides in from the side and includes built-in fields for line items, subtotal, taxes, discounts, and total. The cart can also display the active customer. It’s commonly used in the flows where users need persistent access to the cart.
The Editor tab lets you configure the structure and display of the Slideout Cart. You can control which fields appear, set custom labels, choose the cart’s slide-in behavior, and define how the active customer is shown.
Show active – Toggles the visibility of the Slideout Cart in the builder.
Open mode – Sets the direction from which the cart slides in when opened. You can choose either Overlay from the right or Overlay from the left.
Cart name – Sets the name displayed at the top of the cart. This is purely visual and does not affect functionality.
Show cart subtotal – Displays the subtotal of all items in the cart.
Cart subtotal label – Sets the label text for the subtotal.
Show cart discount and fees – Toggles the display of any discounts or extra charges.
Show taxes – Shows the calculated taxes for the current cart contents.
Taxes label – Sets the label text for the taxes section.
Show balance – Displays the remaining balance still to be paid.
Balance label – Customizes the label for the balance field.
Show cart total – Displays the cart total before taxes and fees.
Cart total label – Sets the label for the total line.
Show order total – Shows the full order total, including all charges.
Order total label – Customizes the label text for the order total.
The active customer chip appears when a customer has been added to the cart. It includes two built-in actions:
Clicking the X icon removes the customer from the sale.
Clicking anywhere else on the chip opens the Edit Customer dialog box.
You can customize the information and icons displayed on the chip:
Select customer data – By default, this displays the customer’s name using Dynamic Data. You can change it to show another field, such as phone number or email.
Select active customer icon – Choose the icon shown on the chip.
Select remove customer icon – Choose the icon used for removing the customer.
This section controls which product-related details are displayed for each item in the cart. Clicking on any line item during checkout opens the Edit Cart dialog box. The following options are available to configure:
Show item unit – Displays the unit of measurement (e.g., ea, kg, pcs) next to the item.
Item unit label – Customize the label shown for item units.
Show variation details – Displays variant information such as size or color beneath the product name.
Show SKU – Displays the SKU of the product.
SKU label – Customize the label used for SKU display.
Show discounts and fees – Displays any applied discounts or added fees for the product.
Show product notes – Displays any notes added to the product during the sale, shown under the product it relates to.
Show delete line item icon – Displays an icon that allows users to remove a line item directly from the cart.
Delete line item icon – Select a custom icon to use for removing line items.
This section controls whether order-level notes are visible in the cart and how they are labeled.
Show order notes – Enables a field at the bottom of the cart for entering general order notes.
Order notes label – Toggles the display of a label above the notes field.
Order notes label text – Customize the label shown (e.g., “Order notes:”).
Select Icon – Pick an icon to visually represent the cart in the interface.
Select Icon – Choose an icon that will be shown to close the cart when it is open.
The Styler tab controls the appearance of the Slideout Cart. You can adjust its background, width, typography, icon styling, and chip appearance.
Main section background – Sets the background color of the line items section.
Total background – Sets the background color of the total and balance section.
Divider lines color – Controls the color of dividers between sections in the cart.
Width – Sets the width of the entire cart in pixels.
Gap – Sets the space between internal sections of the cart layout.
Color – Sets the title color shown at the top of the cart.
Font size – Controls the size of the cart title text.
Text font – Select a font for the cart title.
Font weight – Adjusts how thick or light the title appears.
Size – Sets the icon size in pixels.
Rotate – Rotates the icon by a set number of degrees.
Color – Defines the icon color.
Size – Sets the icon size in pixels.
Rotate – Rotates the icon by the specified number of degrees.
Color – Defines the icon color.
Background color – Sets the background of the chip that displays customer info.
Radius – Rounds the corners of the chip. You can customize each corner or use Apply All.
Styling – Choose which sides of the chip have visible borders.
Border width – Sets the thickness of the border in pixels.
Border color – Pick a static, global, or dynamic border color.
Border style – Choose from solid or dashed borders.
Shadows – Adds visual depth behind the chip. Use the shadow controls to:
Set X and Y offset values to move the shadow horizontally or vertically
Adjust Blur to soften or sharpen the shadow edges
Set Spread to control how far the shadow extends outward
Change the shadow color
Use Clear all shadows to remove them
Color – Sets the color of the customer name inside the chip.
Font size – Controls the size of the customer name text.
Text font – Choose a font for the customer name.
Font weight – Adjusts the thickness of the font.
Color – Controls the product name color in the cart.
Font size – Sets the product name size.
Text font – Select a font for product names.
Font weight – Adjusts how bold or light the product name appears.
Color – Sets the color of subtext like variation details or SKU.
Font size – Controls the size of the subtext.
Text font – Select the font used for subtext.
Font weight – Adjusts subtext thickness.
Color – Sets the font color of the order notes label.
Font size – Controls the size of the label text.
Text font – Select the font for this label.
Font weight – Controls font thickness.
Color – Sets the text color of the note content.
Font size – Controls the text size of the note.
Text font – Select the typeface for the note body.
Font weight – Adjusts how bold the note appears.
Color – Sets the subtotal label color.
Font size – Controls the font size for subtotal.
Text font – Choose a font for subtotal text.
Font weight – Adjusts the weight of the subtotal text.
Color – Defines the font color for tax, discounts, or other summary sublabels.
Font size – Adjusts the size of these sublabels.
Text font – Choose a font for this area.
Font weight – Adjust how bold the text is.
Color – Sets the total label and amount color.
Font size – Controls the size of the total line.
Text font – Choose a typeface for the total.
Font weight – Defines the boldness of the total.
Size – Adjusts the size of the icon that opens the cart.
Rotate – Rotates the icon by the specified number of degrees.
Size – Controls the size of the close icon inside the cart.
Rotate – Sets the rotation angle of the icon.
The Advanced tab provides options for adding custom styles and conditional behavior to the cart.
Use this field to apply custom CSS rules to the entire Slideout Cart. These styles override any settings configured in the Styler tab. This affects the cart container as a whole and not individual elements within it.
Conditional visibility lets you control when the cart appears, disappears, or becomes disabled based on logic.
To use:
Turn on conditions
Define your rule and choose what should happen if the condition applies (Show, Hide, or Disable)
