# My Cart

URL: https://docs.sparklayer.io/help/storefront/interfaces/my-cart

What B2B customers see and do in the SparkLayer My Cart interface: search, file uploads, shopping lists and discount codes, then a four-step checkout.

> **Quick summary**
>
> - My Cart is SparkLayer's B2B cart and checkout. Signed-in B2B customers see it instead of your store's cart, as a panel over any page.
> - Customers build an order by searching, entering SKUs or barcodes, importing a CSV file or loading a [shopping list](https://docs.sparklayer.io/help/ordering/shopping-lists.md). With [Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md), they can also upload a PDF or photo, forward an email or scan with their camera. They then check out in four steps: **Cart**, **Details**, **Review & Pay** and **Complete**.
> - You choose the search type at **Settings > Configurations > Pricing and cart** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations > Pricing and cart** in the Shopify app, and the payment methods each customer sees in their [customer group](https://docs.sparklayer.io/help/customers/customer-groups.md).
> - Some features depend on your plan: Intelligent Cart starts on Starter, file uploads at checkout and B2B discounts on Growth, and the [Quoting Engine](https://docs.sparklayer.io/help/ordering/quoting.md) is on Pro and Enterprise (or an add-on on Starter and Growth). See [Plans and features](https://docs.sparklayer.io/help/plans-and-features.md).

[Try the interactive demo](https://www.figma.com/proto/5FPCY5hSGl7mlwjsjMZI2t/SparkLayer-Interfaces?page-id=0%3A1\&type=design\&node-id=86-36708\&viewport=554%2C-398%2C0.33\&t=34VlPwbCqpvQOTsh-8\&scaling=min-zoom\&starting-point-node-id=35%3A7920\&hide-ui=1) to click through My Cart yourself.

This page is about what your customers see and do in My Cart. The one setting here is [Choose how customers search](#choose-how-customers-search); checkout settings are in [Cart and checkout](https://docs.sparklayer.io/help/ordering/cart-and-checkout.md).

## How it works

My Cart is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). When a B2B customer is signed in, it replaces your store's shopping cart with a layout built for B2B ordering. It opens as a panel over the page the customer is on. Tabs at the top let customers switch to the [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) without leaving the page.

From product page to placed order:

1. **Add products**: From product pages, search, a file, an email or a shopping list
2. **Cart**: Review lines, quantities, discounts and the sub-total
3. **Details**: Shipping address and checkout fields, such as a PO number
4. **Review & Pay**: Shipping method, payment method and totals
5. **Complete**: The order is created in your eCommerce platform

In My Cart, customers can:

- Add products by name, SKU or barcode, or from a file or email with Intelligent Cart.
- Change quantities in steps that follow your pack sizes, remove products and clear the cart.
- See how close each line is to its next volume price.
- Save the cart as a shopping list, or load a saved one.
- Enter discount codes, then check out with the payment methods you've allowed for them, such as Pay on Account or Pay by Invoice.
- Pick up a saved cart later, on the same or another device.

### What customers see in My Cart

| Part | What it shows or does |
| --- | --- |
| Tabs | **My Cart** and **My Account**. |
| Avatar menu | The customer's name and company, then **Expand** and **Log out**. **Expand** widens the panel to give more room to work on the order, and **Minimise** shrinks it again. |
| Step strip | **Cart**, **Details**, **Review & Pay** and **Complete**, with the current step highlighted. |
| Search box | Adds products by name, SKU or barcode, depending on the [search type](#choose-how-customers-search) you choose. The placeholder reads "Add products by name, SKU, or barcode". A handheld barcode scanner can type into it. |
| **Actions** menu | Shortcuts for building and managing the order. See [The Actions menu](#the-actions-menu). |
| Product lines | One row per product. See [Product lines](#product-lines). |
| **Discounts & codes** | Opens a box to enter a coupon code. Applied discounts show as a green label, such as **1 Discount Applied**. See [Discounts and promotions](#discounts-and-promotions). |
| **Sub-total** | The total before tax and shipping, with the number of lines and items. If discounts apply, the price before discounts is shown crossed out. |
| **Checkout** | Starts the checkout. With the [Quoting Engine](https://docs.sparklayer.io/help/ordering/quoting.md), **Request Quote** sits beside it for customers who can request quotes (sales agents see **Submit Quote**). See [Quotes](#quotes). |

### The Actions menu

| Item | What it does |
| --- | --- |
| **Upload a file** | Builds a cart from a CSV file (every plan) or, with Intelligent Cart, a spreadsheet, PDF or photo of an order sheet. See [Add products from a file, email or barcode](#add-products-from-a-file-or-email-intelligent-cart). |
| **Forward an email** (Intelligent Cart) | Builds a cart from an order email the customer forwards to their own address. |
| **Scan barcode** (Intelligent Cart) | Adds products by scanning their barcodes with the device's camera. |
| **Clear cart** | Removes every item from the cart, after the customer confirms in a **Clear cart?** box. This can't be undone. |
| **Save shopping list** | Saves the cart as a [shopping list](#save-and-load-shopping-lists). |
| **Shopping lists** | The customer's saved lists: click one to load it. **View all** opens the lists in My Account. |

### Product lines

| Part | What it shows or does |
| --- | --- |
| Image and name | The product photo and name, linking to the product page. |
| SKU and options | The SKU and the variant, for example `SHOE-RED-02 · Red · US 2`. |
| Stock | A coloured dot and the stock status, for example **In stock** with **100+**, or **Pre-order** with its due date (for example **14 Jun 2025**). See [Stock display](https://docs.sparklayer.io/help/storefront/stock-display.md). |
| Pack rule | The product's [quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md) in words, for example **Packs of 6** or **Min 12 · Packs of 24**. Hover for the full rule, such as "This product comes in pack sizes of 24, minimum 12". |
| **Customizations active** | Shown when the line has [product customisations](https://docs.sparklayer.io/help/storefront/product-display.md#product-customisations), such as custom text. Hover or tap to see them, for example **Custom Text: ABC 123**. |
| Quantity stepper | **−** and **+** buttons around the quantity. Each click moves one pack, and a typed quantity follows your pack and minimum rules. |
| Line price | The line total, the price per unit, and the RRP crossed out if you show it. |
| **Discounts** | For products with quantity pricing. It says how far the line is from its next volume price, such as **3 more → $9.00/unit** or **2 more packs → $4.75/unit**. Once the line reaches the best price, it reads **Discounts**. Hover to see every quantity break. |
| Delete | The bin icon removes the line. |

## How customers open My Cart

Customers can open My Cart from any page in 3 ways:

| Way in | How it works |
| --- | --- |
| Cart link | Your store's cart (shopping bag) link opens My Cart, as long as it points to `/cart`. |
| Notification | **View order & checkout** in the notification that appears after they add a product. |
| `#spark-cart` link | Any URL ending in `#spark-cart`, for example `https://www.yourstore.com/#spark-cart`. You can use this in your own links and buttons. |

When a customer adds a product, a notification (sometimes called a toast) appears in the top right of the screen. It says **Added to order**, with a **View order & checkout** link. To change its style and animation, see [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md). 

## Choose how customers search

The search box at the top of My Cart lets customers add products without browsing your store. You choose one of 2 types:

| Type | What it does | Best for |
| --- | --- | --- |
| **Search** | Searches by product name, product description, SKU, variant name, variant option name and barcode, and shows matching products with a quantity box for each. It handles misspellings and partial matches (a search for `coffe`, `cofee` or `cofe` still finds coffee) and lists the most relevant results first. It also adds exact SKU or barcode matches, like SKU / Barcode Lookup. | Most stores. It gives customers the most features. |
| **SKU / Barcode Lookup** | Adds a product straight to the cart when the customer types an exact SKU or barcode. If there's no exact match, nothing is added. Customers can then edit the quantity. | Customers who only ever order by exact SKU or barcode. |

Search results show the same information as the cart: quantity pricing, pack size rules and stock status. Both types apply your rules as they add a product. For example, [pack sizes](https://docs.sparklayer.io/help/storefront/quantity-rules.md) and minimum or maximum quantities are applied straight away. Barcodes are synced from your store; see [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md).

The search box needs version `3.8` or later of the Core Script, the SparkLayer code in your theme. See [upgrading the Core Script](https://docs.sparklayer.io/developers/frontend.md).

To choose the search type:

1. Go to **Settings > Configurations > Pricing and cart** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations > Pricing and cart** in the Shopify app.
2. Under **Cart search type**, choose the type you want, or choose **Hide search** to remove the search box.
3. Click **Save**.

### Change the search box text

You can change the placeholder text in the search box. For example, if your products have barcodes, you might tell customers they can search by SKU or barcode.

To do it without code, add a translation override for `cart.quick-order.search-placeholder` at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app.

**For developers: set it in the Core Script**

Add this to your [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting):

```javascript title="Core Script"
translations: {
  en: {
    "cart.quick-order.search-placeholder": "Add products by SKU or barcode",
  }
},  
```

For more on changing text, see [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md).

## Add products from a file, email or barcode

The **Actions** menu (or the shortcuts in an empty cart) gives customers quicker ways to fill the cart than searching:

| Customer does | What happens | Plan |
| --- | --- | --- |
| **Upload a file** | Drops in a spreadsheet, PDF or photo of an order sheet. SparkLayer reads the SKUs, barcodes and quantities and adds the matching products to the cart. | Starter and above ([Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#build-a-cart-from-a-file)) |
| **Upload a file** with a CSV file, or **Paste rows** | Adds the products from a file with `sku` (or `barcode`) and `qty` columns. | Every plan ([CSV import](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#import-products-from-a-csv-file)) |
| **Forward an email** | Copies their own forwarding address, then forwards an order email to it. | Starter and above ([Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#build-a-cart-from-an-email)) |
| **Scan barcode** | Scans product barcodes with the device's camera. | Starter and above ([Intelligent Cart](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#scan-a-barcode)) |
| Scans with a handheld barcode scanner | The scanner types into the search box, and each product is added. | Every plan ([Use a barcode scanner](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#use-a-barcode-scanner)) |

The customer can then edit the cart before they check out. Uploaded files and emails are deleted after 24 hours and never used for training. For file types, column headings and how to rename them, see [Intelligent Cart (AI)](https://docs.sparklayer.io/help/ordering/intelligent-cart.md).

## Save and load shopping lists

Shopping lists let customers save the contents of a cart, so they can reorder the products they buy regularly. See [Shopping lists](https://docs.sparklayer.io/help/ordering/shopping-lists.md).

1. To save the cart, the customer opens **Actions** and chooses **Save shopping list**.
2. They enter a name for the list and click **Save**.
3. To load a list later, they open **Actions** and click the list under **Shopping lists**.

**More detail**

Customers can also save products to a list from any product page. They manage their lists (preview, add to and edit them) in the [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md), which **View all** in the menu opens. Customers and sales agents can export any list as a CSV file to share it across a team.

## Discounts and promotions

Customers enter a coupon code with **Discounts & codes**, under the cart lines or in the **Order Summary** on **Review & Pay**:

1. Click **Discounts & codes**.
2. Enter the code in **Enter a discount code** and click **Apply**.

An order can have up to 3 coupon codes. Discounts can also apply automatically. Applied discounts show as a green label, such as **1 Discount Applied**, with a line naming the discounts the order qualifies for, and the sub-total shows the price before discounts crossed out.

B2B discounts need the Growth plan or above. To set them up, see [Discounts](https://docs.sparklayer.io/help/pricing/discounts.md).

## Check out

When the cart is ready, the customer clicks **Checkout** and works through the 4 steps in the strip at the top of My Cart: **Cart**, **Details** (address and [checkout fields](https://docs.sparklayer.io/help/ordering/checkout-fields.md), such as a PO number or **Upload Files**), **Review & Pay** (shipping method, payment method and totals) and **Complete**. From **Details** onwards, a bar at the bottom of the panel shows the sub-total, a **Back** button and the button for the next step. Customers can also click a finished step in the strip to go back to it.

Each step, and what you can change on it, is in [The checkout, step by step](https://docs.sparklayer.io/help/ordering/cart-and-checkout.md#the-checkout-step-by-step). If the order breaks your [order limits](https://docs.sparklayer.io/help/storefront/quantity-rules.md#order-limit-rules), My Cart shows a message and the customer can't check out until they change it.

### Complete step

The customer sees **Thank you for your order!**, and **View order** opens the order in My Account. The order is sent to your eCommerce platform, and to your backend system if you've connected the [SparkLayer API](https://docs.sparklayer.io/developers/api.md). To change the text, see [Change the order complete message](https://docs.sparklayer.io/help/ordering/cart-and-checkout.md#change-the-order-complete-message); to add your own content, use [custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).

## Payment methods

On **Review & Pay**, customers choose from the payment methods their [customer group](https://docs.sparklayer.io/help/customers/customer-groups.md) allows. **Pay Online by Card** takes the customer to your store's checkout to pay straight away. **Pay on Account** and **Pay by Invoice** need no payment details at checkout, and you collect payment later.

For what each method does, their names and order, and how each order arrives in your store, see [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md) and [How orders arrive in your store](https://docs.sparklayer.io/help/ordering/payment-methods.md#how-orders-arrive).

## Quotes

With the [Quoting Engine](https://docs.sparklayer.io/help/ordering/quoting.md), customers whose group can request quotes see **Request Quote** next to **Checkout**. They send the cart to your team as a quote instead of placing an order, and can then message your sales team about it until they're ready to complete it. See [Submit a quote instead](https://docs.sparklayer.io/help/ordering/cart-and-checkout.md#submit-a-quote-instead) and [Work on a quote](https://docs.sparklayer.io/help/ordering/work-on-a-quote.md).

## Saved carts

The cart is saved automatically for up to 90 days. If the customer signs out and back in, their products are still there. This also works across devices: a customer can start an order on a desktop computer and finish it the next day on a phone.

## Cart locking

Cart locking stops 2 people changing the same cart at once. This matters most with [sales agent ordering](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md), where a sales agent may be building an order for a customer.

If someone opens a cart that another person is working on, My Cart shows a message at the top, for example **This cart is being edited by a sales agent**. The message includes the time the other person last accessed the cart. They can wait, or click **Take control** to make their own changes and complete the order.

When another sales agent has the same customer open, the cart is locked to that agent, and changes show the warning "You cannot update the cart because it is being processed by a sales agent". Shared sales agent logins make this more likely, so give each person their own. See [Cart locking for sales agents](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md#cart-locking).

## Tax

Prices in My Cart are shown excluding tax, unless you show [tax-inclusive prices](https://docs.sparklayer.io/help/pricing/pricing-display.md#show-tax-inclusive-prices), and tax is added on **Review & Pay**. See [Tax and shipping](https://docs.sparklayer.io/help/ordering/tax-and-shipping.md).

## Add your own content

With [custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md), you can add your own content, such as a message or banner, in set places in My Cart. These include above the products, on each product line, on the **Details** and **Review & Pay** steps, and on the order complete screen.

For other options, see [Storefront](https://docs.sparklayer.io/help/storefront.md).

## FAQs

**How long does SparkLayer keep a customer's cart?**

Up to 90 days. The cart is saved automatically, so it's still there after the customer signs out, and on any device they sign in from.

**Does uploading a file replace what's already in the cart?**

No. The products in the file are added to the cart. See [Intelligent Cart (AI)](https://docs.sparklayer.io/help/ordering/intelligent-cart.md#build-a-cart-from-a-file).

**Why does the quantity jump when a customer clicks + or −?**

The product is sold in packs. Each click moves one pack, and the line's pack rule (for example **Packs of 6**) says so. See [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md).

**Why are my B2B orders arriving as draft orders in Shopify?**

**Shopify only:**

By default, every payment method except **Pay Online by Card** creates a draft order in Shopify. See [How orders arrive in your store](https://docs.sparklayer.io/help/ordering/payment-methods.md#how-orders-arrive).

**Can I link straight to the cart?**

Yes. Add `#spark-cart` to the end of any URL on your store, for example `https://www.yourstore.com/#spark-cart`, and My Cart opens for signed-in B2B customers.