My Cart Interface
The SparkLayer My Cart Interface provides your B2B customers with a rapid way to build and place orders on your website. Like the other Frontend Interfacesο»Ώ, the My Cart Interface replaces certain elements of your existing website, providing customers a seamless way to order from you.
You can try our interactive demo by clicking the video below!
The My Cart Interface replaces your existing website's shopping cart with a specially-optimised layout. It works as an "overlay" and can be accessed on any page by any of the following ways:
- By clicking the shopping bag link, typically in the website's header providing this points to the URL /cart
- By adding products to an order and clicking the link within the notification (see below)
- By adding #spark-cart to the end of a URL, e.g. https://www.yourstore.com/#spark-cart
When a customer adds an item to their order, this will trigger a notification to show on the top right of the screen. We refer to this as a "toast notification" and gives the customer instant feedback on their action.
Customising the notifications To see how to customise the styling and animations, please see our guide hereο»Ώο»Ώ
The My Cart Interface has a built-in Quick Search that lets customers rapidly add products to their order, simply by typing in the SKU or Barcode (if you're store is set up to use barcodes, you can read our guide hereο»Ώ)
The Quick search automatically adds products to the order using the rules you've set. For example, if the product has been configured to use pack sizingο»Ώ or minimum or maximum quantities, this will automatically be applied at the point of adding to the order.
It's also possible to adjust the text that shows by default in the search box by adding a special text overwrite as shown below. For example, if you're using barcodes, you may want to inform customers that they can use both a SKU and a barcode to search.
Please note In the future, SparkLayer will support the ability to search by name and keyword.
It's possible to quickly bulk upload products by using the "Import CSV file" feature within the 'Options' menu.
SparkLayer supports two ways to upload the contents of a CSV file:
Type | Details |
|---|---|
File upload | Customers can manually upload a CSV file by specifying two columns:
|
Pasting | Customers can paste the contents of a CSV file into the text entry box |
By default, SparkLayer will accept a CSV file that has two columns, sku (or barcode) and qty
It's possible to configure customised titles for these columns, if you have a requirement for them to be more personalised for your customers. In the example below, the columns have been changed to Item No. and Quantity.
To get started, within your language string overwritesο»Ώ, simply add the below code and update accordingly.
Please note Providing the contents of the CSV file includes valid SKUs (or barcodes), all products will be added to the customer's order and replace the existing contents. If a product requires specific pack sizes to be specified, the CSV Import will round up to the nearest valid pack size.
The 'Save as shopping list' feature allows customers to easily save an entire contents of an order for future use. Once products have been added to the My Cart Interface, within the "Options" menu, simply click "Save shopping list' and this will prompt for a "Shopping List Name" to be specified.
Once a shopping list has been saved, they can be accessed from within the 'Options' menu and any additional shopping lists can be accessed, edited, and deleted from within the My Account Interfaceο»Ώ.
Customers are able to create as many shopping lists as they like and easily remove them directly from within the My Account Interfaceο»Ώ.
When a customer is ready to place their order, they can then begin the checkout process. This is split into 4 steps:
My Cart This contains the summary of the products they want to order
Shipping This allows the customer to set their shipping address and complete additional fields (such as PO number)
Review & Pay The customer can confirm their preferred shipping cost, select payment method and confirm their order
Complete This is the final step of the checkout and completes the customer's order
The My Cart step is essentially a summary of the customer's order and lets them:
- View item level costs for products
- Change quantities and remove products
- Clear and empty the contents of an order
- Perform actions such as saving shopping lists or importing CSV files (see above)
- See their order sub-total (typically excluding tax and shipping costs)
Order limit rules It's possible to set minimum and maximum order rules (by order total and order quantity) that a customer has to meet before being able to place an order. Please refer to our full guide hereο»Ώ.
The Shipping step allows the customer to select their shipping address and complete any data entry fields you may have enabled.
Data entry fields
The data entry fields include the following configurations:
- Additional Information: this is useful if you want to capture additional details from a customer whilst they are placing an order. Typical use-cases include capturing a Purchase Order number (sometimes referred to as PO number), delivery instructions, or instructions. Learn moreο»Ώο»Ώ
- Custom checkout fields: Custom checkout fields allow you to capture additional information from customers during the checkout process. It's a great way to allow customers to add data such as preferred shipping date, shipping instructions, and more! Learn moreο»Ώο»Ώ
- File uploads: SparkLayer supports the ability for B2B customers to upload files during the checkout process. This is a great way to capture additional details from the customer such as a "Purchase Order", details specific to their order (e.g. customisations they require), or any other file that is relevant to their account. Learn moreο»Ώο»Ώ
Addresses
By default, any addresses for the customer are automatically taken from their address book information within your website admin.
Customers can also manually add addresses by clicking the '"Add new address" button or via the My Account Interfaceο»Ώ.
If they're adding an address via the My Cart interface, they can also select from the following:
Item | Details |
|---|---|
Set as default shipping address | This will become the default shipping address for future orders |
Set as default billing address | This will become the default billing address for future orders |
Save address to address book | This will save the address to their address book and this can be edited from the My Account Interfaceο»Ώο»Ώ |
If a customer has more than 4 addresses saved, the interface will also adapt to show all saved addresses within a drop down menu.
Please note It's possible to disable the ability to edit addresses, learn more in our guide hereο»Ώο»Ώ
The Review & Pay step is the final step of the checkout process and lets customers:
- Select and confirm their preferred shipping method
- Select and confirm their preferred payment method
- See a full breakdown of the cost of their order, including tax and shipping
- Confirm to your terms and conditions
Shipping method
The shipping methods work in one of two ways:
- Shipping is automatically calculated from the rules set up within your website admin
- Shipping is calculated by the rules set up in the SparkLayer Dashboard
You can learn more about how shipping works in our guide hereο»Ώ.
Payment methods
Please see payment methodsο»Ώ below
Once the customer has completed their order, this is then sent through to your eCommerce platform just like any regular order. Depending on the payment method selected, this will either arrive into your website admin as a Draft order or a Completed order.
If you've additionally configured orders to connect to the SparkLayer APIο»Ώ this will then be sent directly to your backend system or via a middleware solution.
Customising the order complete screen You can modify the text that shows to a customer, learn more in our guide hereο»Ώ. In addition, you can also add custom content using "Slots". Learn moreο»Ώο»Ώ
SparkLayer supports a range of B2B-specific payment methods that can be tailored on a per-customer basis.
When customers reach the payment step, they'll see available methods and can select their preference.
Payment method | Description |
|---|---|
Payment on Account | πͺ For the B2B customer: This will allow the customer to checkout without needing to enter any payment details. π¦ For merchants: It's essentially an 'offline' payment method and you can even set credit limit rules and net payment terms such as Net 30, Net 60, etcLearn moreο»Ώο»Ώ |
Payment by invoice | πͺ For the B2B customer: This will allow the customer to checkout without having to enter in payment details. π¦ For merchants: Like "Payment on Account", this is essentially an 'offline' payment method. You can then process the order and take payment via offline channels (e.g. by bank transfer) |
Pay Online by Card | πͺ For the B2B customer: The customer will be directed to your standard checkout process and will be required to make payment right away (e.g. by card or via another payment processor). This is sometimes referred to as "Pro-forma payment". π¦ For merchants: This will come through as a paid (or "completed") order and no further action should be required to collect payment. Note: this is termed "Upfront Payment" within the Customer Groupsο»Ώ area of the SparkLayer Dashboard |
Request for quote | πͺ For the B2B customer: The customer can submit their order without choosing a payment method. π¦ For merchants: The order will be marked as a 'Draft' order and can subsequently be edited (e.g. changing the shipping cost, adding additional discounts, adding or removing products from an order). |
The diagram below helps to illustrate how payments working with SparkLayer and Shopify, based on the payment method the B2B customer selects.
Draft orders
If you're using Shopify, by default all payment methods other than Upfront Payment will be generated as Draft orders. If you'd prefer to automatically convert Draft orders into Completed orders, you can enable this via the SparkLayer Dashboard.
Shopify checkout payment methods
If a customer selects "Pay Online by Card" (i.e. "Upfront payment"), they'll be directed to the Shopify checkout. By default, they will see all Shopify payment methods you have set up (e.g. card payment, Paypal, etc). It's possible to set rules on which payment methods show for your B2B customers and we recommend exploring available apps here.
Please note that if a customer uses "Pay Online by Card" and doesn't complete their order, this will still show in your Shopify Draft Orders admin for review.
Customising the B2B payment methods You can edit the names and priority of payment methods easily. Learn more in our guide hereο»Ώο»Ώ
SparkLayer supports the ability for customers to "Request for Quote" that allows you to review their orders before processing them. Once enabled for a customer groupο»Ώ, this will show as a payment method within the checkout flow.
When a customer selects "Request for Quote", the flow works as follows:
A Draft Order is created
When a customer places an order as a quote, the order will by default enter Shopify in the Draft order status. Just as with any order in Shopify, you'll see the customer's details on the top right and you can review and edit their order contents.
Sending an invoice
To send an invoice, simply click the Send invoice button beneath the order totals.
This will then trigger an email to the customer where they can they review the order and make payment online.
You can edit this email template by going to Settings > Notifications within Shopify and search for the Draft order invoice template
Once the customer completes their purchase by making payment, the order is then marked as paid and will then display within your Shopify Orders area.
If you are looking for other ways to manage invoicing, please see our guide hereο»Ώ.
SparkLayer supports the ability for B2B customers to upload files during the checkout process. This is a great way to capture additional details from the customer such as a "Purchase Order", details specific to their order (e.g. customisations they require), or any other file that is relevant to their account. Learn moreο»Ώ.
Custom Slots (or "Targets") allow you to enhance the SparkLayer My Cart interface by adding your own custom code in predefined areas.
You can learn more in our custom slots guide hereο»Ώ.
A great feature of the SparkLayer My Cart Interface is the "persistent saved order". When a customer adds items to their order, the contents are automatically saved to their browsing session for up to 90 days. If the customer then signs out and logs back in, all previous items in their order will be saved.
This feature also works across different devices, e.g. a customer could build an order on a desktop computer and then complete it the next day on a mobile device.
Understanding tax Please refer to our guide hereο»Ώ for details on how tax works with SparkLayer.
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfacesο»Ώ. Please see our full guide hereο»Ώ on what's possible!
Did you know SparkLayer can also support hardware such as barcode scanners? SparkLayer automatically synchronises barcode dataο»Ώ from your store, meaning you could technically use the My Cart Interface to accept barcode-scanned orders!
The Quick Search tool (see above) allows you to insert both SKUs and Barcodes, meaning you can quickly add items to an order simply by entering codes into this input field. You'll need to configure your hardware to "target" this input field, but it's a great way to bring powerful B2B ordering to your warehouse or in-store experience.