> ## Documentation Index
> Fetch the complete documentation index at: https://docs.upmind.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Understanding Cart 2.0

> A breakdown of Cart 2.0's architecture, layers, and storefront changes over Cart 1.0.

* **Time** — 8 minutes
* **Difficulty** — Beginner

**What You'll Learn:** A clear understanding of how Cart 2.0 is structured, what's changed from Cart 1.0, and how each layer of the cart system fits together to support your storefront and checkout experience.

**Prerequisites:**

* An active [Upmind account](https://upmind.com/start).
* Familiarity with your current storefront setup (Cart 1.0 or otherwise).
* Basic understanding of how products and categories are configured in Upmind.

Upmind’s cart is a storefront and checkout system that provides a ready-made shopping experience you can run immediately, plus a set of reusable layers you can adopt as your needs grow. Each layer handles a clear responsibility, so users can pick only what they need.

The layers include:

* Cart & Portal - The ready-to-use customer interfaces where users browse products, manage accounts, and complete checkout.
* Client Vue - A frontend starter framework that provides the structural building blocks needed to assemble cart and checkout experiences.
* Upmind UI - The shared design system of reusable UI components used to ensure visual and interaction consistency.
* Headless Upmind - A frontend-agnostic layer that exposes commerce logic and state so teams can build fully custom checkout experiences.
* XState Machines - The internal workflow engines that manage checkout state, transitions, and edge cases behind the scenes.
* Upmind API - The core backend APIs that power products, pricing, billing, subscriptions, orders, and payments.

The result is a platform that supports multiple ways to sell: fast-launch hosted carts, full-featured client portals, and fully custom frontends, all using the same underlying commerce logic.

This means you can mix and match approaches depending on your business needs, while ensuring consistency in pricing, configuration, and checkout behaviour.

Below, we show the **major differences between Cart 1.0 and Cart 2.0**:

## Registration

With Cart 2.0, the registration experience has been refined into a cleaner, faster, and more brand-aligned flow.

<Frame caption="Cart 1.0 registration">
  <img src="https://mintcdn.com/upmind/z5ofg3t7by4uN44v/images/fb/f054870348599c0f.png?fit=max&auto=format&n=z5ofg3t7by4uN44v&q=85&s=9d016dc561d7bfe5bd4448a7c30e9584" alt="Cart 1.0 registration" className="mx-auto" style={{ width:"99%" }} width="2812" height="1524" data-path="images/fb/f054870348599c0f.png" />
</Frame>

Improved typography, spacing, and visual hierarchy make the page easier to scan and complete, reducing friction and helping customers register with greater confidence as part of a cohesive buying journey.

<Frame caption="Cart 2.0 registration">
  <img src="https://mintcdn.com/upmind/2ooSxDpt6PiIGMr-/images/fb/06fb7481c916b280.png?fit=max&auto=format&n=2ooSxDpt6PiIGMr-&q=85&s=accc3c4d5131f679a570f254ae78260a" alt="Cart 2.0 registration" className="mx-auto" style={{ width:"99%" }} width="2430" height="1542" data-path="images/fb/06fb7481c916b280.png" />
</Frame>

## Login

In Cart 2.0, the login experience has been brought fully in line with the rest of the cart and checkout.

<Frame caption="Cart 1.0 login">
  <img src="https://mintcdn.com/upmind/6knUVC8F1nK4E5CY/images/fb/c1b437ac5cd94de5.png?fit=max&auto=format&n=6knUVC8F1nK4E5CY&q=85&s=bc59eabd2dd8d9f27beba96119193869" alt="Cart 1.0 login" className="mx-auto" style={{ width:"99%" }} width="2802" height="1384" data-path="images/fb/c1b437ac5cd94de5.png" />
</Frame>

A clearer layout, improved typography, and better responsiveness create a more polished and reassuring experience that feels integrated with your storefront and reinforces trust in your brand.

<Frame caption="Cart 2.0 login">
  <img src="https://mintcdn.com/upmind/1xguIfYUrfespmVI/images/fb/7cae33e5ec9d96a7.png?fit=max&auto=format&n=1xguIfYUrfespmVI&q=85&s=963f2b181f9393e91bcf8c2643055158" alt="Cart 2.0 login" className="mx-auto" style={{ width:"98%" }} width="2658" height="1522" data-path="images/fb/7cae33e5ec9d96a7.png" />
</Frame>

## Product categories

Cart 2.0 enhances product categories with a more visual and informative category layout.

<Frame caption="Cart 1.0 product categories">
  <img src="https://mintcdn.com/upmind/bPO2bBzOxYQR4tYr/images/fb/f9ec926d43cff815.png?fit=max&auto=format&n=bPO2bBzOxYQR4tYr&q=85&s=f6e76ef8cd39fe84ab5fcd34abc67121" alt="Cart 1.0 product categories" className="mx-auto" style={{ width:"99%" }} width="2800" height="1158" data-path="images/fb/f9ec926d43cff815.png" />
</Frame>

Clearer descriptions, improved spacing, and a more prominent position at the top of the store page help customers understand what’s available more quickly and navigate the catalogue with greater ease.

<Frame caption="Cart 2.0 product categories">
  <img src="https://mintcdn.com/upmind/ObllJJl59DabnmMn/images/fb/cec90fa04e9ecc0a.png?fit=max&auto=format&n=ObllJJl59DabnmMn&q=85&s=c0ce906a2b30c9c9f0de20bf17557730" alt="Cart 2.0 product categories" className="mx-auto" style={{ width:"99%" }} width="2800" height="1316" data-path="images/fb/cec90fa04e9ecc0a.png" />
</Frame>

Users can get into individual category pages to browse and search products more easily.

<Frame caption="Cart 2.0 Individual category page">
  <img src="https://mintcdn.com/upmind/z5ofg3t7by4uN44v/images/fb/ed99245b8e4b84de.png?fit=max&auto=format&n=z5ofg3t7by4uN44v&q=85&s=298038535df360f0744cb7250d3e9eb7" alt="Cart 2.0 Individual category page" className="mx-auto" style={{ width:"99%" }} width="1810" height="1528" data-path="images/fb/ed99245b8e4b84de.png" />
</Frame>

Domain purchases are now simplified with a dedicated flow, allowing users to search and buy standalone domains directly through `/order/domains`. Exact matches for your search will also be provided.

<Frame caption="Cart 2.0 domain purchase flow">
  <img src="https://mintcdn.com/upmind/uxzVUXAKtJ2bRWCI/images/fb/6eb9327863042b15.png?fit=max&auto=format&n=uxzVUXAKtJ2bRWCI&q=85&s=76c03fb1bf6503d293fd71dc8fabc06e" alt="Cart 2.0 domain purchase flow" className="mx-auto" style={{ width:"99%" }} width="2116" height="1538" data-path="images/fb/6eb9327863042b15.png" />
</Frame>

## Product catalogue

With Cart 2.0, the catalogue experience moves to a lighter, more structured layout. The new catalogue introduces improved spacing, clearer visual hierarchy, and more flexible layouts.

This makes products easier to scan and compare, while giving brands more control over presentation.

<Frame caption="Cart 1.0 product catalogue">
  <img src="https://mintcdn.com/upmind/VnCXiz5rboywDnvn/images/fb/db73aed48cb58889.png?fit=max&auto=format&n=VnCXiz5rboywDnvn&q=85&s=3c1c4e36c806270e421295570210a9bd" alt="Cart 1.0 product catalogue" className="mx-auto" width="2798" height="1144" data-path="images/fb/db73aed48cb58889.png" />
</Frame>

Promotional offers on products are also highlighted properly for customers to see.

<Frame caption="Cart 2.0 product catalogue">
  <img src="https://mintcdn.com/upmind/VnCXiz5rboywDnvn/images/fb/db006bfc50deda86.png?fit=max&auto=format&n=VnCXiz5rboywDnvn&q=85&s=24018389391e3fb3d82cc21e85229e9a" alt="Cart 2.0 product catalogue" className="mx-auto" style={{ width:"99%" }} width="2278" height="1530" data-path="images/fb/db006bfc50deda86.png" />
</Frame>

## Product configuration

Cart 2.0 builds on the solid foundation of Cart 1.0 by introducing a clearer and more guided configuration flow. Layout improvements and a stronger visual structure make [product options](/using-upmind/product-management/how-to-add-product-options) and pricing changes easier to follow, especially for more complex products.

<Frame caption="Cart 1.0 product configuration">
  <img src="https://mintcdn.com/upmind/z5ofg3t7by4uN44v/images/fb/f1d8c65714bfbb0b.png?fit=max&auto=format&n=z5ofg3t7by4uN44v&q=85&s=358aaa2e2fb3a558a19c1ac0736f3d8d" alt="Cart 1.0 product configuration" className="mx-auto" style={{ width:"97%" }} width="1792" height="1534" data-path="images/fb/f1d8c65714bfbb0b.png" />
</Frame>

The result is a smoother configuration experience with better clarity at each step.

<Frame caption="Cart 2.0 product configuration">
  <img src="https://mintcdn.com/upmind/FQ1NhxALxjSHvvWW/images/fb/b59ac6af8c9437ec.png?fit=max&auto=format&n=FQ1NhxALxjSHvvWW&q=85&s=3ecd806f36a08d60ffdf72b667fef3b3" alt="Cart 2.0 product configuration" className="mx-auto" style={{ width:"97%" }} width="1378" height="1536" data-path="images/fb/b59ac6af8c9437ec.png" />
</Frame>

## Recommendations/upsells

In Cart 2.0, product recommendations are given a more prominent and intentional role in the buyer journey. The updated design adds clearer context, stronger visual cues, and better alignment with the surrounding content.

<Frame caption="Cart 1.0 product recommendations">
  <img src="https://mintcdn.com/upmind/A-RwNPXmK_xnEEqe/images/fb/76145b3bf3e6ad3a.png?fit=max&auto=format&n=A-RwNPXmK_xnEEqe&q=85&s=6eda51203ce677ec054d932ad843f27c" alt="Cart 1.0 product recommendations" className="mx-auto" style={{ width:"99%" }} width="2626" height="1534" data-path="images/fb/76145b3bf3e6ad3a.png" />
</Frame>

This helps upsells feel more relevant and integrated, rather than simply supplementary.

<Frame caption="Cart 2.0 product recommendations">
  <img src="https://mintcdn.com/upmind/ObllJJl59DabnmMn/images/fb/ca9265958047a4c9.png?fit=max&auto=format&n=ObllJJl59DabnmMn&q=85&s=bf934531a73116d8f573d03504ab7df1" alt="Cart 2.0 product recommendations" className="mx-auto" style={{ width:"99%" }} width="1624" height="1538" data-path="images/fb/ca9265958047a4c9.png" />
</Frame>

## Basket

In Cart 2.0, the basket experience has been simplified with a cleaner layout and clearer grouping, so customers can review items, options, and totals more quickly and make changes with confidence before checkout.

<Frame caption="Cart 1.0 basket">
  <img src="https://mintcdn.com/upmind/ObllJJl59DabnmMn/images/fb/d04c4a3b0eee9055.png?fit=max&auto=format&n=ObllJJl59DabnmMn&q=85&s=cf7d9b3e3aa213b4e668982c1e89cfe1" alt="Cart 1.0 basket" className="mx-auto" style={{ width:"99%" }} width="2802" height="1332" data-path="images/fb/d04c4a3b0eee9055.png" />
</Frame>

You can also change the [currencies](/using-upmind/invoicing-and-taxes/about-multi-currency) here to update the real-time prices.

<Frame caption="Cart 2.0 basket">
  <img src="https://mintcdn.com/upmind/1xguIfYUrfespmVI/images/fb/867cd5e63fba0d49.png?fit=max&auto=format&n=1xguIfYUrfespmVI&q=85&s=3f68aa007cdd8dd2ddf3148be58e9821" alt="Cart 2.0 basket" className="mx-auto" style={{ width:"99%" }} width="2138" height="1532" data-path="images/fb/867cd5e63fba0d49.png" />
</Frame>

The new **Empty Basket** screen is also shown when there are no items in the basket.

<Frame caption="Cart 1.0 empty basket">
  <img src="https://mintcdn.com/upmind/z5ofg3t7by4uN44v/images/fb/ec625ca5dbc47266.png?fit=max&auto=format&n=z5ofg3t7by4uN44v&q=85&s=b9e584ecd2a3c1324671a0c83054173d" alt="Cart 1.0 empty basket" className="mx-auto" style={{ width:"99%" }} width="2794" height="658" data-path="images/fb/ec625ca5dbc47266.png" />
</Frame>

<Frame caption="Cart 2.0 empty basket">
  <img src="https://mintcdn.com/upmind/pcUdSuxUJ6LgBXnd/images/fb/9ed5c04515463bc8.png?fit=max&auto=format&n=pcUdSuxUJ6LgBXnd&q=85&s=c6ba92190860c3d95f0ceca891bfb44d" alt="Cart 2.0 empty basket" className="mx-auto" style={{ width:"99%" }} width="2004" height="1538" data-path="images/fb/9ed5c04515463bc8.png" />
</Frame>

## Checkout

The Cart 2.0 checkout builds on the foundation of the previous checkout with a simplified, modern layout that feels lighter and more fluid.

<Frame caption="Cart 1.0 checkout">
  <img src="https://mintcdn.com/upmind/kXD0Ya8PpcxxNm6Q/images/fb/3ce1bf88bb4e8d56.png?fit=max&auto=format&n=kXD0Ya8PpcxxNm6Q&q=85&s=89c1608a9fc9c5626c57b5c2e10c4418" alt="Cart 1.0 checkout" className="mx-auto" style={{ width:"99%" }} width="2262" height="1534" data-path="images/fb/3ce1bf88bb4e8d56.png" />
</Frame>

A clear order summary sits alongside well-structured personal and business detail sections, while improved typography and spacing create a faster, more reassuring checkout experience that stays fully aligned with your brand and helps reduce drop-off.

<Frame caption="Cart 2.0 checkout">
  <img src="https://mintcdn.com/upmind/c5sDUwEs8YpzGbjA/images/fb/9db704c508c6716e.png?fit=max&auto=format&n=c5sDUwEs8YpzGbjA&q=85&s=a6b81a8d6dd5775afc23d478c154fd6e" alt="Cart 2.0 checkout" className="mx-auto" style={{ width:"99%" }} width="1738" height="1528" data-path="images/fb/9db704c508c6716e.png" />
</Frame>

All the familiar checkout features from Cart 1.0 remain available in Cart 2.0, including address autocomplete for faster data entry. When autocomplete is not used, customers can always enter their address details manually.

<Frame caption="Cart 2.0 personal billing details">
  <img src="https://mintcdn.com/upmind/Lh8hC132BWHpvRbz/images/fb/4c66f700d619e5d6.png?fit=max&auto=format&n=Lh8hC132BWHpvRbz&q=85&s=5ba4487854b1e13d118eec6bc93ffd25" alt="Cart 2.0 personal billing details" className="mx-auto" style={{ width:"99%" }} width="2214" height="1526" data-path="images/fb/4c66f700d619e5d6.png" />
</Frame>

<Frame caption="Cart 2.0 business billing details">
  <img src="https://mintcdn.com/upmind/Lh8hC132BWHpvRbz/images/fb/461f928a7610ac7b.png?fit=max&auto=format&n=Lh8hC132BWHpvRbz&q=85&s=16d2b316b91be5a63255670040a65d6d" alt="Cart 2.0 business billing details" className="mx-auto" style={{ width:"99%" }} width="1662" height="1538" data-path="images/fb/461f928a7610ac7b.png" />
</Frame>

## Confirmation

The order confirmation page shows your order details, payment choices, and basket items clearly. Clean spacing and simple icons make it easy to read and confirm your purchase.

<Frame caption="Order confirmation">
  <img src="https://mintcdn.com/upmind/2ooSxDpt6PiIGMr-/images/fb/09d197f81fb45d94.png?fit=max&auto=format&n=2ooSxDpt6PiIGMr-&q=85&s=bf183a00032c0f572131bd916efffc98" alt="Order confirmation" className="mx-auto" style={{ width:"99%" }} width="2700" height="1540" data-path="images/fb/09d197f81fb45d94.png" />
</Frame>

## Templates

Cart 2.0 provides custom layouts for store pages through templates that define structural arrangements of content, sidebars, headers, and footers. You can set different templates for different pages to create a fully customised storefront appearance:

* Product catalogue
* Product configuration
* Recommendations
* Basket
* Auth (Registration, login, password recovery)
* Billing details
* Checkout
* Confirmation

## New and improved loading screens

The **Order Complete** screen is now split into three different screens:

* Order conversion
* Payment processing
* Order confirmation

<Frame caption="Cart 1.0 order complete">
  <img src="https://mintcdn.com/upmind/wRuKrNY12tQZY8Rr/images/fb/308be8cefe991c24.png?fit=max&auto=format&n=wRuKrNY12tQZY8Rr&q=85&s=486503dad88462f9f3c9afbc4992753f" alt="Cart 1.0 order complete" className="mx-auto" style={{ width:"99%" }} width="2744" height="1532" data-path="images/fb/308be8cefe991c24.png" />
</Frame>

<Frame caption="Cart 2.0 order conversion">
  <img src="https://mintcdn.com/upmind/6knUVC8F1nK4E5CY/images/fb/c3780a8862be016c.png?fit=max&auto=format&n=6knUVC8F1nK4E5CY&q=85&s=00fd7e9b124c4bc39ce966835c0aa7d5" alt="Cart 2.0 order conversion" className="mx-auto" style={{ width:"87%" }} width="2378" height="1544" data-path="images/fb/c3780a8862be016c.png" />
</Frame>

<Frame caption="Cart 2.0 payment processing">
  <img src="https://mintcdn.com/upmind/ObllJJl59DabnmMn/images/fb/c8beb2fd1cdab6ef.png?fit=max&auto=format&n=ObllJJl59DabnmMn&q=85&s=23d30fd389a26c5a43cff9c71f6e3fae" alt="Cart 2.0 payment processing" className="mx-auto" style={{ width:"88%" }} width="2092" height="1542" data-path="images/fb/c8beb2fd1cdab6ef.png" />
</Frame>

<Frame caption="Cart 2.0 order confirmation">
  <img src="https://mintcdn.com/upmind/h8h5zREaX7k8Y-3x/images/fb/1560fc42ff50b3c6.png?fit=max&auto=format&n=h8h5zREaX7k8Y-3x&q=85&s=cbcb81ccb2264c81f7e6075a0147670e" alt="Cart 2.0 order confirmation" className="mx-auto" style={{ width:"91%" }} width="1902" height="1538" data-path="images/fb/1560fc42ff50b3c6.png" />
</Frame>

The screen below appears when an item is added to the basket or when moving to checkout, indicating the basket is updating.

<Frame caption="Getting things ready">
  <img src="https://mintcdn.com/upmind/wRuKrNY12tQZY8Rr/images/fb/2f433249fbca844e.png?fit=max&auto=format&n=wRuKrNY12tQZY8Rr&q=85&s=a2fd9d57dc95a4b8f41fe37b0f87ad8c" alt="Getting things ready" className="mx-auto" style={{ width:"96%" }} width="2800" height="1088" data-path="images/fb/2f433249fbca844e.png" />
</Frame>
