Product Matrix Interface
The Product Matrix Interface lets your B2B customers rapidly add products to an order in bulk via a special "matrix table" display. If your products come in multiple variant types (e.g. colour and size), it's a great way to allow customers to quickly see all variants available and quickly purchase them.
SparkLayer Interactive Demo You can explore how the Product Matrix Interface works on our example product here.
Please note We only recommend using the Product Matrix Interface if you have products that have multiple variant option types (e.g. colour and size) with a large number of options.
The Product Matrix Interface replaces elements on your website's product detail page with a specially optimised layout that shows all the product options (variants) in one single view.
Once set up, the interface will be presented in a table and show the following information to the customer:
Item | Details |
|---|---|
Product pricing | Their specific B2B pricing and, optionally, RRP pricing |
Variants | A matrix table of all available variants |
Quantity | The ability to select the quantity of a product using Quantity Rules |
Add to order | The ability to add items to an order |
Quantity pricing | Visibility of quantity pricing available (this is shown in an information popup) |
Stock level | The stock status of a product (e.g. pre-order) |
SKU | The product code (this is shown in an information popup) |
The Product Matrix Interface also has handling for more than two variant groups. For each additional variant group, these will be presented within the table matrix for the customer to view. In the example below, the product is set up with Colour, Size, and an option to add a logo.
To add the Product Matrix Interface to your website, you just need to add a single line of code to your product detail page.
Once this is added, the interface will display for all logged in B2B customers and they can begin placing orders.
Please note Based on the platform you're using, the variable product.id will need to be adjusted to the appropriate setting. If you're installing on your Shopify website, please see our guide here.
Important! When using the Product Matrix Interface, we recommend implementing it on your website in a location that gives plenty of space for the B2B customer to see. For example, you may want to position it below the product image and description on your product detail page and configure it to span the full-width of the page.
If you're looking to apply the Product Matrix Interface to a select range of products on your store, one way to achieve this is to use product tags.
For products that you want to apply this to, you could set up a tag b2b-product-matrix and apply this to relevant products. Within your Shopify theme code, locate your product detail page (e.g. sections/main-product.liquid) and then apply some conditional Shopify Liquid code login.
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces. Please see our full guide on what's possible!