My Cart Interface

introduction 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 docid\ ccz1vnh0o6d 722w35xpa , 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! how it works 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 notifications 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 customising the design docid\ qct2zk8wjhyiv2zbvbjyy search & lookup please note to benefit from the search tool below, you'll need to ensure your sparklayer version is set to 3 8 or above frontend integration guide docid\ qwxsym9x5 pviogutekcp the my cart interface has a built in tool that lets customers rapidly add products to their order there are a variety of types that you can select from type details search this allows you to search by product name, variants, and other related criteria and quickly add products to your order it will also handle mis spellings of keywords it also enables you to add products to your cart in the same way as the sku/barcode lookup option this type gives your customers the more feature rich user experience sku / barcode lookup this allows you to search by sku / barcode and will add items to an order only if an exact match is found this type is useful if your customers use the tool purely for adding exact skus or barcodes how to enable depending on your preference, you can enable these via the configuration area of the sparklayer dashboard hiding the search / lookup it's also possible to fully hide the search / lookup feature, you can manage this in the sparklayer dashboard by selecting hide search from the cart search type understanding the types the search tool offers an easy way for your customers to quickly add items, allowing them to search by a range of criteria including product name, product description, product sku, product variant name, product variant option name and barcode the tool also handles mis spellings and "partial matching", ensuring results are delivered where possible and allowing for a more user friendly search for example, when searching coffee, results will be returned for entries such as coffe , cofee , cofe in the example below, searching example coffee returns results of any products that match this term, prioritising those most relevant similar to the main cart, the customer will see the ability to add items to an order using the quantity entry box as well as full visibilty of any quantity discounts, pack size rules, and inventory status the sku / barcode lookup adds products to your order simply by typing in the sku or barcode (if you're store is set up to use barcodes, you can product display docid\ m3df4f0eyc2rm vuarg9h ) if it finds a match, it will immediately add the item and you can subsequently make edits please note each type noted above automatically add products to the order using the rules you've set for example, if the product has been configured to use quantity rules docid\ cmxfrpgjqxfz9vjztvv0d or minimum or maximum quantities, this will automatically be applied at the point of adding to the order customising the text 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 updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "cart quick order search placeholder" "add products by sku or barcode", } }, / end of code / intelligent cart (ai) sparklayer intelligent cart introduces a revolutionary new way for your b2b customers and sales teams to build orders quickly and effortlessly using the power of ai the magic lies in its simplicity files and emails containing order details (such as skus, barcodes, and quantities) can be uploaded or emailed directly to sparklayer, instantly populating a cart learn more about how this works in intelligent cart (ai) docid\ riacywzomfwsomd5kb5p8 csv file importing 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 if using skus sku and qty (you can also customise these names, please see below) if using barcodes barcode and sku 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 languages & international docid\ klrs7wtxn3wncdy8z5zvu , simply add the below code and update accordingly / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "cart import csv headers sku" "item no ", "cart import csv headers barcode" "barcode no ", "cart import csv headers qty" "quantity", } }, / end of code / 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 shopping lists 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 docid\ lqxani7ivdqna09d9soap customers are able to create as many shopping lists as they like and easily remove them directly from within the my account interface docid\ lqxani7ivdqna09d9soap checkout process 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 my cart 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 customer groups docid 5 lwmnohhjbjjppg9e6vh shipping 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 cart & checkout docid\ o3ndhzbcxiswh6m6satdt 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! cart & checkout docid\ o3ndhzbcxiswh6m6satdt 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 cart & checkout docid\ o3ndhzbcxiswh6m6satdt 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 docid\ lqxani7ivdqna09d9soap 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 docid\ lqxani7ivdqna09d9soap 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 address book docid o7cpoltlcja2chychdoa review & pay 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 shipping docid\ cfz zpgw2umovao73lc5m payment methods please see my cart interface docid\ efevur a3ycjxuhvrr7t below complete 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 docid\ lhkqo8t7 a0hargvyfgtt 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 cart & checkout docid\ o3ndhzbcxiswh6m6satdt in addition, you can also add custom content using "slots" custom slots ("targets") docid\ l 2oohjiy rax2chbmgp2 payment methods 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, etc credit, net terms, & invoicing docid\ ywm70oquosykooiqb4z4g 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 docid 5 lwmnohhjbjjppg9e6vh 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) please note as of june 2025, this has been replaced with the quoting engine docid 8a4opninduyfs3pup tuo and can no longer be selected within a customer group 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 please refer to the sparklayer technical docs customising the b2b payment methods you can edit the names and priority of payment methods easily learn more in payment methods docid\ ibikczvhm085bkejiffyv managing quotes the sparklayer quoting engine docid 8a4opninduyfs3pup tuo introduces a unified solution that streamlines the entire "quote to order" process directly from your existing online store it allows you to handle quotes more effectively, converting them into completed orders faster than ever! the sparklayer quoting engine works by allowing your b2b customers to easily submit quotes for review, and for your sales team to then communicate with the customer until they're ready to complete their order learn more in quoting engine docid 8a4opninduyfs3pup tuo discounts & promotions sparklayer supports the ability to have discounts and promotions applied during the checkout and these can either be redeemed via discount codes, or applied "automatically" to the customer's order the sparklayer discount engine unlocks a range of discount rules including order level discounts eg, spend $1,000 and get 10% off, spend $2,000 and get 15% off percentage and fixed discounts eg, 20% off an order total, $100 off an order total coupon codes eg, enter code newcustomer and get 5% off scheduled discounts eg, start discount today and end it on a specific date and time customer specific discounts eg, only allow customer group ‘b2b vip’ to qualify for the discount and more learn more about discounts you can see a full overview of what’s possible with discounts in discounts docid\ wrejpw9uryjqwiqeks cg file uploads (file attachments) 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 cart & checkout docid\ o3ndhzbcxiswh6m6satdt showing custom content (using "slots") 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 ("targets") docid\ l 2oohjiy rax2chbmgp2 persistent saved order 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 cart "locking" sparklayer has built in handling for concurrent users making changes to an order, termed cart "locking" this is specifically relevant to our sales agent ordering docid\ uw8mdbmefwwkqzrvb5cqx tool where sales agents may be building an order on behalf of a customer if there is an active cart and a customer subsequently accesses it, they'll see a message shown at the to of the page by clicking "take control", this will then allow the customer (or sales agent) to make further edits before completing the order tax understanding tax please refer to our tax & shipping docid\ zssxg6fjrlcod gxolutn for details on how tax works with sparklayer configurations sparklayer supports a wide range of configurations you can apply to the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa please see our configurations docid\ sbeaoacq a7ffbtatx8bd on what's possible! using hardware (e g barcode scanners) did you know sparklayer can also support hardware such as barcode scanners? sparklayer automatically synchronises product display docid\ m3df4f0eyc2rm vuarg9h 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