My Order Interface
The SparkLayer My Order Interface provides your B2B customers with a rapid way to build and place orders on your website. Like the other Frontend Interfaces, the My Order Interface replaces certain elements of your existing website, providing customers a seamless way to order from you.
The My Order 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 Order Interface has a built-in Quick Search that lets customers rapidly add products to their order, simply by typing in the SKU.
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.
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:
- By manually uploading a CSV file with two columns: sku and qty
- By directly pasting in the contents of a CSV file
Please note Providing the contents of the CSV file includes valid SKUs, 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 Order 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.
When a customer is ready to place their order, they can then begin the checkout process. This is split into 4 steps:
My Order 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 Order 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)
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 their 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
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 Order 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.
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 | This will allow the customer can checkout without needing to enter any payment details and you can even set credit limit rules. Learn more |
Payment by invoice | This will allow the customer to checkout without having to enter in payment details and apply a Zero-value order. This is ideal if you're looking to do payment terms such as Net 30, Net 60, etc |
Pay Online by Card | 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". Note: this is termed "Upfront Payment" within the Customer Groups area of the SparkLayer Dashboard |
Request for quote | The customer can submit their order without choosing a payment method. 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). |
Buy Now Pay Later | Customers will be taken through the Shopify checkout using one of our approved payment solutions. Learn more |
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.
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.
A great feature of the SparkLayer My Order 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!