Website logo
SupportDashboardAbout SparkLayerSchedule Demo
📘Help Docs
⚙️Tech Docs
🎆Ignite Docs
Navigate through spaces
⌘K
👋Introduction
How SparkLayer Works
Getting Started
📣Useful Links
Try our Demo
What's New!
Roadmap
Support
FAQs
Troubleshooting
Policies & Data
Status
🖥️Frontend
⭐Features
⚒️Backend
📊Dashboard
🌐Integrations
Docs powered by Archbee
Features
Frontend Interfaces

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.

Document image



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.

Document image


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.

Document image


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>


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

<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/pdp-all-variants.mp4" type="video/mp4">
</video>


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 30 Oct 2023
Did this page help you?
PREVIOUS
My Account Interface
NEXT
Product Card Interface
Docs powered by Archbee
TABLE OF CONTENTS
Introduction
How it works
Integrating the code
Configurations
Docs powered by Archbee