The cart builder

The builder is where you assemble a cart. Open it from My Carts → Edit on any cart, or from New cart. It has three columns: the widget library and layer list on the left, a live preview in the middle, and the settings panel for whatever you have selected on the right.

#The preview is the real thing

The middle column is not a mockup. It renders the exact same code your storefront runs, with your fonts, colours, animations and interactions. What you see is what shoppers get.

Switch between three views with the buttons above the preview:

#Adding widgets

The left column lists every widget, grouped into Core, Promotions, Trust & Social, Media and Engagement, with a search box above them. Click a widget to add it to the end of the cart, or drag it straight onto the position you want.

Most widgets can be added more than once — two upsell rows in different positions, or a separate animation for each rewards checkpoint. A few are single-instance and grey out once used.

#Arranging them

• Drag a widget in the layer list or on the canvas to reorder it.
• Position relative to the product list matters: widgets above it render above the cart items, widgets below it render underneath. That is how a free-shipping bar ends up at the top and an upsell row under the items.
• Some widgets can be pinned to the footer so they stay stuck above the checkout button while the cart body scrolls.
• Drag a widget's bottom edge (or select it and use the arrow keys) to change its height.

#Configuring a widget

Click any widget — in the layer list or directly in the preview — to open its settings on the right. Every field has an info tip explaining what it does, and the preview updates as you type. Click Save changes to commit the panel's edits.

Full per-widget documentation lives in the widget reference.

#Cart settings — the shell around the widgets

The Cart settings button opens the cart's own appearance: colours, fonts, corner radius, the header (title, logo, item count, close button) and the footer (subtotal, shipping row, taxes note). You can also click the header or footer directly in the preview to jump to those settings. See Cart appearance & settings.

#Saving, undo, and leaving

• Autosave — edits are saved to the draft about a second and a half after you stop making them. There is no Save button to hunt for.
• Undo / redo — Ctrl/Cmd + Z and Ctrl/Cmd + Shift + Z walk back through your changes.
• Delete — with a widget selected, the Delete or Backspace key removes it.
• Leaving mid-save — if you navigate away while an edit is still saving, Cartie warns you and offers Save & leave.
• Save as Draft — stores the current arrangement as a reusable saved layout you can load into any cart later.

#Publishing

Publish changes makes this cart the live cart and pushes it to the CDN. Shoppers see it within about a minute. Until you publish, everything stays a private draft — you can experiment freely on a cart that is not live without touching your storefront.