Product card
Applies toShopifyBigCommerceWooCommerceMagento
How it works
The product card interface is one of SparkLayer's frontend interfaces. It takes the place of the price and "add to cart" button on each product card. B2B customers can then see their pricing and start building an order while they browse.
With the product card, customers can:
- See their B2B price and, if you show it, the RRP.
- See the best volume price and open the product's quantity pricing.
- Choose a variant from a drop-down list (one list per option, such as colour and size).
- Choose a quantity that follows your quantity rules, and add the product to their order.
Your theme's card still shows the product photo, title and any tags above it. The interface adds these parts, top to bottom:
| Part | What it shows or does |
|---|---|
| Price | The customer's B2B price, with From: when the price depends on the variant or quantity, and, optionally, the RRP (for example "From: $4.99 MSRP: $9.99"). |
| Volume break | The best quantity price, for example "From $8.30 at 8+ packs" or "From $3.99 per unit", underlined with dots. Clicking it opens the quantity pricing table (Qty, Price and Savings) as wide as the card. Clicking a row sets the quantity to that break. Breaks are rounded up to whole packs and counted in packs. |
| Stock and pack size | One line with the stock status (for example In stock · 100+, or Pre-order with a due date) and the pack rule, such as Packs of 6. |
| Variants | A drop-down list for each option, such as colour and size. |
| Quantity | A stepper that applies your quantity rules, opening at the pack size. Each click moves one pack. |
| Add | Adds the product to the order and opens My Cart. The button shows the total for the chosen quantity, for example Add $71.40. |
| Heart | Saves the product to favourites. |
| SKU | The product code, and the barcode, if you've turned them on. See How products are shown. |
Cards line up in a grid
On a collection page, the cards in a row line up. Each card's price, volume break, stock, variants, quantity and Add button sit at the same height as its neighbours'. This holds even when one product has 2 variant lists and another has none. A card on its own, outside a grid, is laid out as a simple column.
To see what customers see, explore the product interfaces in our interactive demo (opens in a new tab).
Add the interface to your store
This section is for you, the merchant. To have our team install the product card 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 card interface on Shopify:
-
Theme setup: go to Home,Setup,Theme setup. Under Optional blocks, click Add next to Product card 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 Card. You can also add it yourself: go to Online Store,Themes (opens in your Shopify admin in a new tab), click Customize, open a collection or 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 the file that renders product cards on your collection pages:
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
Your developer adds this line to the template that renders product cards on your collection pages:
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>Replace product.id with the variable your platform uses for the product's ID. See the install guide for your platform under Platforms.
Once it's added, every signed-in B2B customer sees the interface on your product cards and can start ordering.
Change what it shows
You can change what the product card shows. It can show stock, the SKU or the barcode, hide variant drop-downs, or show products as table rows (quick buy mode). See Customise product cards in Product display.
FAQs
Wix only
No. Wix doesn't support the product card interface, so prices on gallery and other product listing pages are hidden for B2B customers. Customers see their prices and order on product pages instead. See Wix limitations.
Last updated