Product matrix

How it works

The product matrix interface is one of SparkLayer's frontend interfaces. It replaces parts of your product page with a table that shows every variant of the product in a single view.

Each cell is one combination, for example a cream sweatshirt in small, with its price, stock and a quantity box. Customers fill in the quantities they want and click Add to Cart once.

You can see it working on our example product page (opens in a new tab).

With the product matrix, customers can:

• See every combination of a product's options at once.
• Enter quantities for many variants and add them all to the order in one go.
• See which variants are in stock, low on stock or out of stock before they order.

Each part of the matrix shows customers something different:

Products with more than two option types

If a product has more than 2 option types, the extra options appear inside the table as an extra row of column headings. For example, a T-shirt with Colour, Size and a logo option shows each size (Small, Medium, Large) split into With Logo and No Logo columns, with a row for each colour.

Add the interface to your store

This section is for you and your developer. Adding the product matrix means a small change to your theme's code, so your developer or agency usually does it. They add this line to your product page template:

<spark-product-matrix parent-id="{{ product.id }}"></spark-product-matrix>

If your platform uses a different variable for the product's ID, replace product.id with it. See the install guide for your platform under Platforms. Once it's added, every signed-in B2B customer sees the matrix on that page and can start ordering.

The matrix needs room. Place it where customers can see the whole table, for example below the product image and description, set to the full width of the page.

Show the matrix on some products only (Shopify)

<!-- Show Product Matrix Interface for tagged products -->

{% if product.tags contains 'b2b-product-matrix' %}
     <spark-product-matrix parent-id="{{ product.id }}"></spark-product-matrix>
{% else %}
    <!-- Don't show anything -->
{% endif %}

 <!-- Show regular Product Detail Interface for other products-->

{% if product.tags contains 'b2b-product-matrix' %}
    <!-- Don't show anything -->
{% else %}
    <spark-pdp parent-id="{{ product.id }}"></spark-pdp>
{% endif %}

On other platforms, use your platform's own way of adding custom code to product templates.

Change what it shows

To show restock dates in the matrix, or for the display options that apply to all the product interfaces, see How products are shown.

FAQs