The Shopify Storefront User Flow
To best explain how SparkLayer works with Shopify, this guide walks through all key elements an end-user (i.e. a B2B customer) would experience during their journey of placing an order. Technical details have also been included where relevant as an additional reference.
As a non-logged in wholesale customer, the storefront experience is just like any standard Shopify storefront. Browsing a product detail page displays product images, product information, regular pricing, and the ability to add to basket and then proceed to checkout.
The wholesale customer then navigates to the Login page (
/account url) and enters their credentials. Providing their account exists as an active account within the Shopify Customers admin (i.e. tagged with b2b), they will be able to successfully log in.Technical details
Once logged in within Shopify, SparkLayer is then made aware of this by providing a token from the customer
metafield data. This token is added during the initial customer synchronisation of data from Shopify to SparkLayer.
The wholesale customer has now successfully logged in. If they now go back to the same product on the storefront, there a number of key differences in the product purchasing interface:
- 1.The standard DTC pricing area is hidden from view and instead a streamlined wholesale pricing interface is displayed
- 2.The interface allows for pack sizing as well as support for multi-dimensional products (e.g. colour and size)
- 3.An Add to Order button that adds selected products to their order
As the customer browses the store and adds products, these are then added to a Quick Order Interface that can be accessed by clicking the Cart icon in the top navigation. When clicked, this activates a modal overlay that includes a summary of their order.
Technical details
The technicals of how this works is largely the same as a standard ‘Cart Drawer’ on Shopify and is rendered via JavaScript and HTML.
As well as showing a list of products, it includes additional functionality such as being able to edit quantities, quick add products via a search box, and handling to ensure the customer reaches their ‘minimum order value’ before they checkout. If the total doesn’t reach this ‘minimum order value’, the ‘Proceed to Checkout’ button is disabled and a message is shown.
When the customer is ready to place their order, they click the ‘Proceed to Checkout’ button. Before being taken through to the Shopify Checkout process, there is an additional order summary screen that allows them to:
- Add Order Notes (using standard Shopify Order Notes functionality)
- Select from their available shipping addresses
- Agree to terms and conditions (optional if the Shopify checkout already has this shown)
Depending on which payment method the customer selects, the user flow will vary:
- For Payment Online by Card, the user will be taken to the Shopify checkout
- For other payment methods, the user will complete the ordering process within SparkLayer (behind the scenes, this creates a Draft order within Shopify or can be automatically converted into a completed order)
If the user has selected to Pay Online, the checkout experience is just the same as with any other Shopify storefront. The customer can select addresses, choose their payment method (e.g. Shop Pay) and then complete the Shopify checkout process.
Once the customer has chosen their payment method and completed their order via the Shopify checkout, the order is now complete and they are taken to the standard Shopify order complete page.
Within the Shopify admin, the customer’s order will show up in either:
- the Draft orders admin if the customer has chosen manual payment methods such as Pay by Invoice or Request for Quote, or
- the Orders admin if the customer has chosen to pay online by card (just like any other order placed on the storefront.)
The order is also sent to the backend system (e.g. ERP) in the same manner as standard B2C orders. SparkLayer uses
order metafields to include additional information about the products ordered such as price data and pack sizes (if applicable).Last modified 8mo ago