My Cart

Try the interactive demo (opens in a new tab) 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; checkout settings are in Cart and checkout.

How it works

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

The Actions menu

Product lines

How customers open My Cart

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

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.

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:

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 and minimum or maximum quantities are applied straight away. Barcodes are synced from your store; see How products are shown.

The search box needs version 3.8 or later of the Core Script, the SparkLayer code in your theme. See upgrading the Core Script.

To choose the search type:

1. Go to Settings,Configurations,Pricing and cart (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations › Pricing and cart to do this now, whichever platform you're on. Opens in a new tab..
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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab..

translations: {
  en: {
    "cart.quick-order.search-placeholder": "Add products by SKU or barcode",
  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "cart.quick-order.search-placeholder": "Add products by SKU or barcode",
      }
    },  
  };
</script>

For more on changing text, see Languages and international.

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:

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).

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.

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.

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.

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, 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. If the order breaks your order limits, 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. To change the text, see Change the order complete message; to add your own content, use custom slots.

Payment methods

On Review & Pay, customers choose from the payment methods their customer group 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 and How orders arrive in your store.

Quotes

With the Quoting Engine, 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 and Work on a quote.

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, 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.

Tax

Prices in My Cart are shown excluding tax, unless you show tax-inclusive prices, and tax is added on Review & Pay. See Tax and shipping.

Add your own content

With custom slots, 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.

FAQs