# Product matrix

URL: https://docs.sparklayer.io/help/storefront/interfaces/product-matrix

Use the SparkLayer product matrix to show every colour and size of a product in one table so B2B customers can order in bulk, and apply it with tags.

> **Quick summary**
>
> - The product matrix interface shows every variant of a product in one table (a matrix), for example colours down the side and sizes across the top, so B2B customers can order many combinations at once.
> - Use it for products with 2 or more variant option types and many options. For other products, the [product detail interface](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md) works better.
> - You (or your developer) add it to your product page template with one line of code. On Shopify, you can use a product tag to show it only on some products.
> - It's included on every plan.

## How it works

The product matrix interface is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). 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](https://demo.sparklayer.io/collections/b2b-grid-mode/products/example-running-shoes).

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:

| Part | What it shows |
| --- | --- |
| **Product pricing** | The customer's B2B price and, if you show it, the RRP. |
| **Variants** | A matrix of every available variant. The first option (for example **Colour**) runs down the side with an image of each, and the second (for example sizes) runs across the top. |
| **Stock level** | A coloured dot in each cell showing the variant's stock status, for example in stock, low stock, out of stock or pre-order. Out-of-stock cells can't be ordered. |
| **Quantity** | A quantity box in each cell that applies your [quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md). |
| **Quantity pricing** | Any quantity pricing, shown in an information pop-up on each cell. |
| **SKU** | The product code, shown in the same information pop-up. |
| **Add to Cart** | Adds every variant with a quantity to the order, and shows the total. |

### 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:

```html
<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](https://docs.sparklayer.io/help/platforms.md). 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)

**Shopify only:**

To use the matrix only for certain products, tag those products. Your developer then chooses the interface in your theme code:

1. In your Shopify admin, add a tag such as `b2b-product-matrix` to each product that should use the matrix.
2. Go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)) and edit the code of your theme.
3. Open your product page section, for example `sections/main-product.liquid`, and add this Liquid code where the interface should appear. Tagged products then show the matrix, and all other products show the [product detail interface](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md).

```html
<!-- 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](https://docs.sparklayer.io/help/storefront/product-display.md#show-variants-as-a-matrix-matrix-mode).

## FAQs

**Should I use the product matrix or the product detail interface?**

Use the product matrix for products with 2 or more variant option types (such as colour and size) and a large number of options. For simpler products, use the [product detail interface](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md).

**Where can customers see quantity pricing and the SKU in the matrix?**

Both are in the information pop-up on each cell of the table.