Product Card Interface
The Product Card Interface lets you display B2B pricing and the ability to add products to an order anywhere a "product card" is shown on your website. Typically this includes product collection (or "category") pages, and product upsells.
SparkLayer Interactive Demo You can explore how the SparkLayer Product Page Interfaces work in our interactive demo.
The Product Card Interface replaces your existing website's product card pricing and "add to cart" area with a specially-optimised layout. Once set up, it provides B2B customers an easy way to see their pricing and begin adding products to their order. The interface can show the following information:
Item | Details |
|---|---|
Product pricing | Their specific B2B pricing and, optionally, RRP pricing |
Variants | A drop down list of available variants |
Quantity | The ability to select the quantity of a product using Quantity Rules |
Add to order | The ability to add items to an order |
Quantity pricing | Visibility of quantity pricing available |
Stock level | The stock status of a product (e.g. pre-order) |
SKU | The product code (SKU) |
To add the Product Card Interface to your website, you just need to add a single line of code to the product cards that display on your collection pages.
Once 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.
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces. Please see our full guide on what's possible!