Quick Order Interface
The SparkLayer Quick Order Interface provides wholesale customers with a rapid way to build and place orders on your website. Like the Product Purchasing Interface, the Quick Order Interface replaces certain elements of your existing website; in this case the 'Shopping Cart' and then allows customers to checkout in a matter of clicks.
The Quick Order Interface works as an 'Overlay' and can be accessed on any page by clicking a link (typically in the website's header) or by adding products to an order.
Useful tip: if you would like to show the Quick Order Interface on page load, you can do so by adding
#spark-cart to the end of the URL,
e.g. https://www.yourstore.com/#spark-cartWhen a customer adds an item to their order, you can configure the Quick Order Interface to use a 'Toast Notification' rather than loading the entire order each time.
The Quick Order Interface has a built-in Quick Search that lets customers rapidly add products to their order, simply by typing in theSKU. The search results will automatically default to specific pack sizes if enabled and allow easy updating of the quantities required.
It's possible to quickly bulk upload products to appear in the Quick Order Interface by using the 'Import CSV file' feature in the 'Options' menu.
For SparkLayer to recognise the contents of an order, the CSV file has to be formatted in the following way:
sku | qty |
code-123 | 20 |
code-abc | 30 |
The CSV file must match the column headers exactly (i.e. sku and
qty)Providing the contents of the CSV file includes valid SKUs, all products will be added to the Quick Order Interface 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 Quick Order Interface, under the 'Options' menu, click 'Save as shopping list' and this will prompt for a 'Shopping List Name' to be specified.
The most recent saved shopping lists can be accessed from within the 'Options' menu and any additional shopping lists can be accessed from the My Account Interface.
Any updates to products within the Quick Order Interface are done without the need to reload the page, ensuring a fast experience for the customer. The customer can update quantities (increase and decrease), remove products, or add products via the Quick Search.
Once the customer has added products to their order, they can see a review of the costs as well as select from a range of options before completing their order via the checkout.
By default, SparkLayer shows pricing to the customer excluding tax charges (i.e. the net prices) and then displays the total tax charges as a separate item.
Because wholesale orders are more restrictive than standard retail orders, the process of completing an order requires very little information to be supplied by the customer. For example, it's common that wholesale customers aren't allowed to add or edit their addresses, or they must use a certain payment method which limits the amount of choices they need to make.
When clicking 'Proceed to Checkout' a simple interface then shows the following:
Item | Details |
Order Totals | Order totals summary, including tax applicable |
Addresses | Address book to choose a destination shipping address |
Payment | Payment method from those available to the customer, e.g. pay on account (see below for more details) |
Notes | Order notes that allow them to leave information such as Purchase Order Numbers (see below) |
The Additional Information field 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.
Maximum characters: please note, the Additional Information field is limited to 512 characters in total
When completed by a customer, the data will then show within the Shopify order under the Notes section (this can also be sent to a backend system using the SparkLayer API)
It's also possible to customise the text that displays to a customer. If you want to adjust this, you can do so by adding the below code snippet to your
layout/theme.liquid file within the SparkLayer Core Script. layout/theme.liquid
<script>
window.sparkOptions = {
siteId: 'your-site-id',
/* Add the below to your SparkLayer Core Script, after the siteID */
translations: {
en: {
cart: {
checkout: {
notes: {
label: "Additional Information",
placeholder: "Order notes e.g. PO Number",
"helper-text": "Please note, this is required before placing your order",
}
}
},
}
},
/* End translations. The rest of the SparkLayer Core Script should be included below */
};
</script>
You can also force customers to complete the 'Additional information' field before proceeding to place their order.
To enable this feature, add the following code to the SparkLayer Core Script.
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
display: {
customerReferenceRequired: true,
},
};
</script>
Alternatively, if you'd prefer to hide the additional information field from showing, you can add this to the SparkLayer Core Script
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
display: {
customerReferenceHidden: true,
},
};
</script>
SparkLayer supports a range of B2B-specific payment methods that can be tailored on a per-customer basis (learn more here). When customers reach the payment step, they'll see available methods and can easily select their preference.
Available payment methods include:
Payment method | Description |
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
- By default the order will be submitted as a Draft Orders. You can automatically convert this into a Completed order if required (learn more) |
Payment on Account | Sometimes referred to as 'net payments'.
Similar to above, the customer can checkout without needing to enter any payment details
- By default the order will be submitted as a Draft Orders. You can automatically convert this into a Completed order if required (learn more)
Learn how to set Credit Limits in our guide here |
Upfront Payment | The customer will be required to enter credit/debit card details and pay as normal during the checkout process. This is sometimes referred to as Proforma payment within wholesale operations.
- Customers will be taken through the Shopify checkout |
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.
- By default the order will be submitted as a Draft Orders |
Buy Now Pay Later |
Using Shopify? If you're using Shopify, by default all payment methods other than Upfront Payment will be generated as Draft orders. If you'd prefer all customers to go through the Shopify checkout, you can enable a special setting.
It's also possible to automatically convert Draft orders into completed orders using automation tools. Learn more here
You can easily re-order the payment methods and even set the default shown to customers. Learn more
By default, SparkLayer will show the payment methods to customers with the names shown below:
Payment method | Name shown to customers |
|---|---|
Payment by invoice | Pay by Invoice |
Payment on Account | Pay on Account |
Upfront Payment | Pay Online by Card |
Request for quote | Request for Quote |
If you want to adjust these, you can do so by adding the below code snippet to your
layout/theme.liquid file within the SparkLayer Core Script. If you're using a language other than the default English (
en), simply update en to the corresponding country codelayout/theme.liquid
<script>
window.sparkOptions = {
siteId: 'your-site-id',
/* Add the below to your SparkLayer Core Script */
translations: {
en: {
"cart.checkout.payment-method.full.paymentByInvoice": "Pay by Invoice",
"cart.checkout.payment-method.full.paymentOnAccount": "Pay on Account",
"cart.checkout.payment-method.full.upfrontPayment": "Pay Online by Card",
"cart.checkout.payment-method.full.quote": "Request for Quote",
"cart.checkout.payment-providers.quote.message": "Please note: when requesting a quote for your order, our team will review and notify you within 2 working days before processing.",
}
},
/* End translations */
};
</script>
The Request for Quote feature lets your B2B customers place an order which can then have edits made against it. For example, you may need to adjust their shipping price or apply an additional discount to their total order cost.
For the customer, when they select 'Request for Quote', they'll be able to place orders without needing to enter the checkout process, making the process extremely rapid.
When the order is placed, it'll be marked as a Draft order that can subsequently be edited and finalised with the customer. For Shopify merchants, this uses the built-in Draft orders functionality within Shopify and you can learn more here.
Clicking 'Complete Order' takes the customer to the checkout process. The checkout process on SparkLayer works in one of two ways:
Action | Details |
Checkout redirect | For customers opting to Pay Online by card the customer will be redirected to their hosted solution to complete the process (e.g. Shopify) |
Checkout via SparkLayer | For manual payment methods (e.g. Pay on Account), the customer can complete the process from within the Quick Order Interface without being redirected to a hosted checkout. This loads a thank-you screen with a short summary of their order (see below) |
Using the Shopify Checkout - you can learn more about how SparkLayer works with Shopify in our Shopify Integration guide
Completing the checkout from within the SparkLayer Quick Order Interface
You can modify the 'thank you' text that shows to the customer by adding the below to the language overwrites within the SparkLayer core script.
layout/theme.liquid
<script>
window.sparkOptions = {
siteId: 'your-site-id',
/* Add the below to your SparkLayer Core Script */
translations: {
en: {
cart: {
thanks: {
payment: {
main: "Thank you for your order!",
blurb: "Your order has now been placed and you will shortly receive email confirmation to {email}. You can check the status of your order at any time by going to 'My Account'.",
},
quote: {
main: "Thank you for requesting a quote!",
blurb: "We can confirm that your request for a quote has been received and we'll be in touch once our team has reviewed it.",
},
}
},
}
},
/* End translations */
};
</script>
Once the customer has completed their order, this is then sent through to your eCommerce platform just like any standard order (i.e. for a B2C customer). Depending on the payment method selected (see here), this will either arrive into your eCommerce platform backend 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.
A great feature of the SparkLayer Quick Order Interface is the 'persistent saved cart'. When a customer adds items to their order, the contents are automatically saved to their browsing session. 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.
The Quick Order Interface has a handy way to quickly remove the contents of an order. Within the 'Options' menu, clicking 'Clear Cart' will remove all the products currently added and allow a brand new order to be created.
Last modified 5d ago