> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/exp98-shopify-theme/exp98/sections-and-features/cart.md).

# Cart

The cart window, the goal bar, and the You may also like shelf.

The cart is a window. Adding a product opens it in place, on top of whatever the shopper was looking at; changing a quantity or removing something updates it straight away. The status bar counts the items and shows the total.

It's the **Cart** section on the cart template.

## The goal bar

A Windows 98 file-copy progress bar across the top of the cart, filling toward rewards you set — free shipping, a free gift, anything.

> You're $23.00 away from free shipping.

Add a **Goal** block for each, up to three. With several, one bar covers them all, with a notch and a caption at each, and the message is always about the next one to reach.

| Goal setting             | Default                                  |                                                                                |
| ------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------ |
| **Cart total to reach**  | 100                                      | In your store's currency. Shoppers paying in another currency see it converted |
| **Reward**               | free shipping                            | Used in the messages and as the caption under the bar                          |
| **Message on the way**   | You're \[remaining] away from \[reward]. | `[remaining]` is filled in with the amount left to spend                       |
| **Message when reached** | You've unlocked \[reward]!               |                                                                                |

The cart ships with one goal: free shipping at 100.

{% hint style="warning" %}
The bar only shows progress. It doesn't change what anyone pays. Set up the reward where it really happens — free shipping over the amount under **Settings → Shipping and delivery**, a gift or discount under **Discounts** — or the bar is making a promise checkout won't keep.
{% endhint %}

**Show the goal bar** turns it off.

## You may also like

A shelf of suggested products under the items — cards in a row that scrolls sideways, so it takes one card's height however many there are — each with its own **Add** button (and a variant picker where there's a choice). Adding one drops it straight into the cart. The heading folds the shelf away for a shopper who'd rather not see it; their choice is remembered on their browser. With a mouse, rolling the wheel over the shelf moves it sideways, and arrow buttons at its ends step through it; on a phone or trackpad it simply swipes.

1. The products you pick come first, in your order.
2. If you've picked fewer than there's room for, Shopify fills the gaps: for each item in the cart, products set as **complementary** to it in the **Search & Discovery app**, or related products when there are none.
3. If the shelf is still short, it's topped up from the collection you choose under **When there's still room, fill it from** — your best sellers, say — or from the whole catalogue if you leave that empty.
4. Anything already in the cart, or sold out, is skipped.

| Setting                                      | Default                    |
| -------------------------------------------- | -------------------------- |
| **Suggest products in the cart**             | on                         |
| **Heading**                                  | You may also like          |
| **Products to suggest**                      | none — up to 10            |
| **Fill any gaps with Shopify's suggestions** | on                         |
| **When there's still room, fill it from**    | none — the whole catalogue |
| **Suggestions to show**                      | 6 (1 to 10)                |

## Checkout

**Check out** runs the full width of the window under the subtotal. Your express checkout buttons — Shop Pay, Apple Pay, PayPal, whichever you have turned on — sit in a row under it.

## On phones

Windows stack in a column on a phone, and the cart always takes the last place in it — under any product windows and folders, whatever order they were opened in, and above the player and the media dock. Opening it scrolls it into view, so after **Add to cart** the shopper lands on the cart with the products stacked above it: browse, pick, check out, top to bottom.