# Product detail

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

Add the SparkLayer product detail interface to product pages so B2B customers see their price, stock and pack sizes and order one or many variants.

> **Quick summary**
>
> - The product detail interface replaces the price and "add to cart" area on your product pages for signed-in B2B customers. Retail visitors see your page as normal.
> - It shows the customer's own price (including quantity pricing), the RRP, SKU, stock and quantity rules, and lists every variant in a table so customers can order several at once.
> - On Shopify it's added automatically on supported themes, or as the **SparkLayer - Product Page** app block. On other platforms, you add one line of code to your product page template. On Wix, it's added to product pages automatically.
> - It's included on every plan. Our team can install it for you free of charge.

## How it works

The product detail interface is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). When a signed-in B2B customer opens a product page, it takes the place of your theme's price and "add to cart" area.

It adapts to the product. A simple product gets a single quantity box, and a product with variants (for example colour and size) gets a table of variants.

With the product detail interface, customers can:

- See their own price, any quantity pricing, and the RRP if you show it.
- See the SKU (product code), barcode and stock availability, including pre-orders.
- Choose a quantity that follows your [quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md), such as pack sizes.
- Order several variants at once and add them to their cart with one click.

To see what customers see, explore the product interfaces in [our interactive demo](https://www.figma.com/proto/5FPCY5hSGl7mlwjsjMZI2t/SparkLayer-Interfaces?page-id=0%3A1\&type=design\&node-id=86-36708\&viewport=554%2C-398%2C0.33\&t=34VlPwbCqpvQOTsh-8\&scaling=min-zoom\&starting-point-node-id=35%3A7920\&hide-ui=1).

Ordering from a product page:

1. **Check the price**: "From" shows the best price; each row shows the price at its quantity
2. **Set quantities**: Steppers move a pack at a time; **Qty rules apply** lists the rules
3. **Add to Cart**: Adds every line with a quantity and opens My Cart

### Products with variants

For a product with variants, such as styles or colours, customers see the variants in a table, so they can order several at once:

| Part | What it shows or does |
| --- | --- |
| Price | **From:** the lowest price any quantity break reaches, then the RRP (for example "From: $4.75 MSRP: $9.99"). **Qty discount pricing available** appears under it when the product has quantity pricing. |
| Variant options | A table row for each variant, under a column named for the option (for example **Style**). For products with a second option, a list to choose it (for example **Size**). |
| Variant details | Each variant's thumbnail (a larger copy appears on hover), name, SKU and barcode (**Code**). |
| **Price** column | The variant's price at the row's quantity, its RRP, its pack price (for example "Pack (6): $40.50") and its volume deal: see [Volume pricing](#volume-pricing). |
| **Stock** column | A coloured dot and the stock count, such as **100+**. Hover over the dot for the status, such as **In stock**. |
| **Qty** column | A stepper for each variant (**−**, the quantity, **+**) that moves one pack at a time, with **Qty rules apply** under it when rules are set. See [Quantity rules](#quantity-rules). |
| Stock key | Under the table: **In stock**, **Low stock**, **Last stock**, **Out of stock** and **Pre-order**, each in its own colour. |
| **Add to Cart** | Adds every variant with a quantity to the order, and shows the total. See [Add to Cart](#add-to-cart). |
| Shopping list and heart | Save the product to a [shopping list](https://docs.sparklayer.io/help/ordering/shopping-lists.md) or to [favourites](https://docs.sparklayer.io/help/ordering/favourites.md). |

A variant with no stock shows as **Out of stock** and can't be ordered, unless you've allowed customers to buy out-of-stock products.

For products with two or more option types and many options, the [product matrix interface](https://docs.sparklayer.io/help/storefront/interfaces/product-matrix.md) shows every combination in one grid.

### Products without variants

For a product with a single option to buy, customers see these parts:

| Part | What it shows or does |
| --- | --- |
| Price | **From:** the lowest price any quantity break reaches, then the RRP if set (for example "From: $6.99 MSRP: $14.99"). |
| Product code | **Product Code** with the SKU, and **Code** with the barcode if the product has one. |
| Stock | Stock availability, for example **In stock** with how many are available, or **Pre-order** with its due date or a note such as "Awaiting date from supplier". |
| Quantity pricing table | If the product has quantity pricing, each break with its **Qty**, **Price** and **Savings**. For a product sold by unit of measure, each row names the unit, for example "1 (single)", "5 (case)" and "10 (pallet)". |
| Quantity | A stepper beside **Add to Cart**, opening at one unit, that applies your quantity rules. **Qty rules apply** appears under it when rules are set. |
| **Add to Cart** | Adds the product to the order. The button shows the total for the chosen quantity, for example **Add to Cart ($10.00)**. |

### Volume pricing

Each variant row says, in words, what its quantity pricing is worth. The text is underlined with dots because customers can click it. It opens the variant's **Qty discount pricing** table, with each break's **Qty**, **Price** and **Savings**. Clicking a row of that table sets the quantity to that break, in whole packs.

| The row says | When |
| --- | --- |
| "From $4.75 at 2+ packs" | The best price needs more than one pack. Breaks are rounded up to whole packs and counted in packs. |
| "$4.75 each by the pack" | One pack already reaches the best price. |
| "From $4.75 for 10+" | The product has no pack size. |
| "Saving 15%" | The row's quantity has reached a break. Savings are whole percentages, rounded. |

On a product sold by unit of measure, the break is stated per unit, for example "From $3.99 per unit".

### Quantity rules

The interface applies your quantity rules as customers choose quantities. A pack size is set per variant. A minimum or maximum is set per product and counted across all its variants: for example, a minimum of 36 can be met with 12 of each of 3 styles. See [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md).

- **Qty rules apply** under each stepper opens a **Quantity rules** box: the **Pack size** ("Orders go in multiples of 6"), the **Minimum** and **Maximum** across all variants, and where the customer stands, for example "6 chosen · add 30 more".
- The label turns amber while the minimum isn't met.
- A typed quantity is rounded up to whole packs: 7 of a pack of 6 becomes 12.
- At the maximum, **+** stops and a typed quantity is capped.

### Add to Cart

**Add to Cart** is greyed out until the customer chooses a quantity, and while the quantity rules aren't met. Hovering over it tells the customer why, for example "Please select a quantity" or "Add 30 more to reach the minimum of 36".

Once the rules are met, the button shows the total, for example **Add to Cart ($34.50)**. Clicking it adds every chosen line to the cart and opens [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md). To change the button text, see [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md#change-the-add-to-cart-button-text).

## Add the interface to your store

This section is for you, the merchant. To have our team install the product detail interface for you, free of charge, click **Request installation** at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app. Or add it yourself:

**Shopify:**

There are 2 ways to add the product detail interface on Shopify:

1. **Theme setup:** go to **Home > Setup > Theme setup** in the SparkLayer Dashboard, or **SparkLayer Wholesale > Setup > Theme setup** in the Shopify app. Under **Optional blocks**, click **Add** next to **Product block**. Shopify's theme editor opens at that block: put it where you want the interface to appear, and save. See [Theme setup](https://docs.sparklayer.io/help/platforms/shopify/theme-setup.md).

   **More detail**

   In the theme editor, the block is called **SparkLayer - Product Page**. You can also add it yourself: go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)), click **Customize**, open a product page and add the block.

2. **Code (for your developer):** if your theme doesn't support app blocks, or you'd rather use code, add this line to your product page template:

   ```html
   <spark-pdp parent-id="{{ product.id }}"></spark-pdp>
   ```

**Other platforms:**

Your developer adds this line to your product page template:

```html
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
```

Replace `product.id` with the variable your platform uses for the product's ID. See the install guide for your platform under [Platforms](https://docs.sparklayer.io/help/platforms.md).

On Wix, the interface is added to your product pages automatically when you install SparkLayer.

Once it's added, every signed-in B2B customer sees the interface on your product pages and can start ordering.

## Change what it shows

You can change many parts of the interface, such as showing all variants at once, and showing the RRP, stock and barcodes. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md).

## FAQs

**Why does a variant show as unavailable?**

A variant with no stock shows as unavailable, unless your setup allows customers to buy out-of-stock products. See [Stock display](https://docs.sparklayer.io/help/storefront/stock-display.md).

**Do retail customers see the product detail interface?**

No. It only appears for customers signed in as B2B customers. Everyone else sees your theme's normal product page.