Product Card Interface
Introduction
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.
How it works
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) |
Integrating the code
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.
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>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.
SparkLayer's Product Card Interface can be installed in three ways on Shopify:
- Automatic install - on supported themes, the interface is added automatically as a Shopify app block, no code changes required.
- Manual install via app block - on any Online Store 2.0 theme, you can add the SparkLayer Product Card app block directly through your Shopify theme customiser. Go to Online Store → Themes → Customize, navigate to a collection or product page, and add the SparkLayer - Product Card app block where you'd like it to appear.
- Manual install via code - if your theme doesn't support app blocks, or you'd prefer a code-based install, add the code snippet above to the file that renders product cards on your collection pages.
Our team is also happy to install this for you - see the Theme setup page in the SparkLayer dashboard to request a free install.
Configurations
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces. Please see our full guide on what's possible!