Product Detail Interface

Introduction
The Product Detail Interface lets your B2B customers quickly and easily add products to their order and automatically loads when a logged in B2B customer visits a product detail page on your website.
﻿
﻿
﻿
﻿
How it works
The Product Detail Interface replaces your existing website's pricing and "add to cart" area with a specially-optimised layout. It supports a variety of product types, from single variant products, to multi-dimensional products (e.g. colour and size). When a B2B customer visits a product detail page, they'll see this specially-optimised layout and can begin ordering.
Single Variant Product
Multiple Variant Dimensions
This is the most simple product type with just a single option to purchase.
﻿
What SparkLayer displays
Product price specific to the customer (including quantity pricing)
RRP Price (if set)
Product SKU (or code)
Stock availability (including pre-ordering)
Quantity, including quantity rules (e.g. pack-sizes)
Add to Order button
This interface will render for products that have variants (e.g. colour, size, etc). To make purchasing easy, the variants are displayed in a table format.
﻿
What SparkLayer displays
Product price specific to the customer (including quantity pricing)
RRP Price (if set)
Variant list: primary variant (e.g. colour) and secondary variants that relate to them (e.g. size)
Pack sizes (if available
Variant specific price and RRP price
Stock availability: if a variant isn't available, it will display accordingly. Note: unless the set up allows purchase of out of stock products, the product will display as unavailable if there is no stock
Quantity, including quantity rules (e.g. pack-sizes)
Add to Order button

﻿
﻿
﻿
Integrating the code
To add the Product Detail Interface to your website, you just need to add a single line of code to your product detail page template.
JS
|
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
<spark-pdp parent-id="{{ product.id }}"></spark-pdp>
﻿
One 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!
If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. Please see our full guide here﻿.
﻿
﻿
﻿
Configurations
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces﻿. Please see our full guide here﻿ on what's possible!

Updated 04 Sep 2023

Did this page help you?

My Account Interface

Product Card Interface

Docs powered by

Archbee

TABLE OF CONTENTS