Product detail
How it works
The product detail interface is one of SparkLayer's frontend interfaces. 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, 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 (opens in a new tab).
Check the price
Set quantities
Add to 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. |
| 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. |
| 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. |
| Shopping list and heart | Save the product to a shopping list or to favourites. |
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 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.
- 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. To change the button text, see How products are shown.
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 (opens in your SparkLayer Dashboard in a new tab). Or add it yourself:
There are 2 ways to add the product detail interface on Shopify:
-
Theme setup: go to Home,Setup,Theme setup. 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.
More detail
In the theme editor, the block is called SparkLayer - Product Page. You can also add it yourself: go to Online Store,Themes (opens in your Shopify admin in a new tab), click Customize, open a product page and add the block.
-
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:
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
Your developer adds this line to your product page template:
<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.
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.
FAQs
A variant with no stock shows as unavailable, unless your setup allows customers to buy out-of-stock products. See Stock display.
No. It only appears for customers signed in as B2B customers. Everyone else sees your theme's normal product page.
Last updated