The Simple Cart displays the current order, including line items, totals, and customer details, similar to the Slideout Cart, but it stays fixed on the page rather than sliding in from the side. All key cart information updates in real time as the user interacts with the flow.
The Editor tab lets you control what appears in the Simple Cart, from customer chips to product and order details. You can customize visibility, labeling, and icon selection across the cart interface.
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 shown for each item in the cart. Clicking any line item opens the Edit Cart dialog box.
Show item unit – Displays the unit (ea, kg, etc.) next to each product.
Item unit label – Customize the label used for units.
Show variation details – Displays product variant info like size or color.
Show SKU – Shows the product SKU in the cart.
SKU label – Customize the label used for SKU display.
Show discounts and fees – Displays any discounts or fees applied to the item.
Show product notes – Displays notes under the product entry.
Show delete line item icon – Adds an icon for removing items from the cart.
Delete line item icon – Choose a custom icon for deleting products.
Show order notes – Toggle visibility of a note field at the bottom of the cart.
Order notes label – Customize the label shown above the notes field.
Control visibility and labeling for key order-level values.
Show cart subtotal – Shows the cart’s subtotal before taxes and discounts.
Cart subtotal label – Customize the label shown for subtotal.
Show cart discounts and fees – Displays total discounts and fees.
Show cart total – Displays the cart total before final order-level charges.
Cart total label – Customize the label for cart total.
Show taxes – Shows the tax value in the summary.
Taxes label – Customize the label for taxes.
Show balance – Shows the remaining balance due.
Balance label – Customize the balance due label.
Show order total – Displays the final total including all adjustments.
Order total label – Customize the label for the order total.
The Styler tab controls the appearance of the Simple Cart. You can adjust its background, size, borders, shadows, and typography, as well as icon styling.
Main section background – Sets the background color of the cart’s main area.
Total background – Sets the background behind the total summary area.
Divider lines color – Controls the color of divider lines that separate cart sections.
Width – Adjusts the cart’s width in pixels.
Height – Adjusts the cart’s height in pixels.
Radius – Rounds the corners of the cart. Set each corner independently or use Apply All for uniform rounding.
Styling – Choose which sides have visible borders (all, none, top only, etc.).
Border width – Sets the thickness of the border in pixels.
Border color – Pick a static color, or use a global or dynamic value.
Border style – Choose from solid, dashed, or dotted borders.
Shadows – Adds visual depth behind the cart. 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
Size – Sets the size of the active customer icon in pixels.
Rotate – Rotates the icon by the specified number of degrees.
Color – Sets the color for the active customer icon
Size – Sets the size of the remove customer icon in pixels.
Rotate – Rotates the icon by the specified number of degrees.
Color – Sets the color for the remove customer icon
Background Color – Sets the background color for the customer chip.
Radius – Rounds the corners of the chip. Use Apply All for uniform rounding.
Styling – Select which borders are applied to the chip.
Border width – Sets the thickness of the chip’s border in pixels.
Border color – Choose a color for the border.
Border style – Select from solid, dashed, or dotted.
Shadows – Add and configure shadows behind the chip for additional depth.
Color – Controls the color of the text inside the active customer chip.
Font Size – Sets the size of the text.
Text font – Choose a typeface.
Font Weight – Adjust the thickness of the font.
Color – Sets the text color for product names.
Font Size – Controls how large the product names appear.
Text font – Selects the typeface for product names.
Font Weight – Adjusts the thickness of the product font.
Color – Sets the text color for product subtext (such as variation or SKU).
Font Size – Controls the size of the subtext.
Text font – Selects the typeface for subtext.
Font Weight – Controls the boldness of the subtext.
Color – Sets the label text color.
Font Size – Adjusts label size.
Text font – Selects the label typeface.
Font Weight – Sets the label’s weight.
Color – Sets the text color of the note content.
Font Size – Adjusts note text size.
Text font – Selects the font for the note.
Font Weight – Adjusts the weight of the font.
Color – Sets the color for the subtotal label.
Font Size – Controls the size of the subtotal label.
Text font – Selects the font used.
Font Weight – Adjusts the weight of the subtotal text.
Color – Sets the color for explanatory or helper text in the summary section.
Font Size – Controls the size of this subtext.
Text font – Choose the font used.
Font Weight – Adjusts the font thickness.
Color – Sets the final total text color.
Font Size – Adjusts the font size of the total.
Text font – Selects the font.
Font Weight – Adjusts how bold the total appears.
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)
