Product Purchasing Interface
To best explain how SparkLayer interacts with the product purchasing experience, we can illustrate this by comparing a standard B2C (i.e. for retail customer) product page interface versus the interface SparkLayer Frontend enables (i.e. for wholesale customers).
Typically, a standard product page will look something like the below for a customer. For a multi-dimension product, it will include the ability to choose options, change quantities, and then add to cart.
Standard B2C View
When the SparkLayer Frontend is enabled and the end customer (i.e. wholesale customer) logs in, they will instead see a more optimised interface that displays wholesale-specific information tailored to them. This includes their pricing, available pack sizes (if available) and a rapid way to add multiple options to their order.
The SparkLayer Product Page View
The SparkLayer Frontend supports a variety of product types and it will render the most appropriate purchasing interface based on the data it retrieves for the product. The interface varies between a simple product and a more complex one (e.g. with multiple variants) and these are detailed below.
Standard Product
Single Variant Dimension
Multiple Variant Dimensions
This is the most simple product type with just a single option to purchase.
What SparkLayer displays
- Product price specific to the customer along
- RRP Price (the price retail customers will typically pay)
- Product SKU (or code)
- Stock availability. Note: unless the set up allows purchase of out of stock products, the product will display as unavailable if there is no stock
- Quantity, with pack-sizes if supported
- Add to Order button
This interface will render for products that have one variant dimension (e.g. colour, product type, size). To make purchasing easy, the variants are displayed in a table format.
What SparkLayer displays
- Product 'From Price' that will take the lowest priced item from the available variants
- RRP Price (the price retail customers will typically pay)
- Variant list
- Pack sizes (if available
- Variant specific price and RRP price
- Stock availability: if a variant isn't available, it will display accordingly. Note: unless the set up allows purchase of out of stock products, the product will display as unavailable if there is no stock
- Quantity, with pack-sizes if supported
- Add to Order button
This interface will render for products that have multiple variant dimension (e.g. colour and size). To make purchasing easy, the variants are displayed in a table format.
What SparkLayer displays
- Product 'From Price' that will take the lowest priced item from the available variants
- RRP Price (the price retail customers will typically pay)
- Variant list: primary variant (e.g. colour) and secondary variants that relate to them (e.g. size)
- Pack sizes (if available
- Variant specific price and RRP price
- Stock availability: if a variant isn't available, it will display accordingly. Note: unless the set up allows purchase of out of stock products, the product will display as unavailable if there is no stock
- Quantity, with pack-sizes if supported
- Add to Order button
The ability to display wholesale pricing specific to a customer is one of the core features of SparkLayer. When the customer logs into your store, SparkLayer will automatically retrieve their unique pricing as defined in the price lists set up in your backend systems (e.g. ERP or CRM) and render this via the product purchasing interface. There are two concepts to be familiar with:
Item | Details |
Price Lists | Price Lists can vary in complexity; a merchant may have just one wholesale price list that is shared across their customers, or price lists individual to every single customer. |
Tiered Pricing | This is also known as 'Volume Pricing' and rewards your customers with lower prices if they purchase more of an item. If these are defined in the Price Lists, this will display to the customer in the product purchasing interface. The 'From' price will also take the lowest available price.
By default, the tiered pricing will show a 'Savings' amount based on the single unit price of the product being viewed. It's possible to adjust this to calculate savings based on a RRP (retail price) and you can learn more here. |
An example of a single variant product with Quantity Pricing
How tiered pricing works with variants
SparkLayer supports pack size functionality meaning you can ensure your customers purchase individual products in the right quantities. For example, your product range may come in packs of 12 and the product purchasing interface will ensure the customer doesn't deviate from this. Forcing pack size quantities also applies in the Quick Order Interface.
The product's availability is shown for all available product types, whether a very simple product, or one with multiple variant dimensions.
For out of stock products or variants, the behaviour can be tailored based on your preference. For example, you may want to hide out of stock products, or conversely still allow them to be purchased. You can even show the exact stock levels with our special configurations. Learn more here
The Product Purchasing Interface can also be added to anywhere where 'product cards' are displayed, allowing customers to add products to their order from any location on your website.
Typically, product cards will display:
- A product image
- A product name
- Product pricing
- Ability to add to basket
SparkLayer simply replaces the standard B2C interface with the customer's unique wholesale pricing, pack size rules, and tiered pricing if applicable.
SparkLayer enables a wide range of design customisations simply by using CSS variables. Learn how this works as well as our advanced JavaScript SDK for more bespoke experiences.
Last modified 2mo ago