# Product card

URL: https://docs.sparklayer.io/help/storefront/interfaces/product-card
Applies to: Shopify, BigCommerce, WooCommerce, Magento

Add the SparkLayer product card interface to collection pages so B2B customers see their price, variants and stock and order without opening a product.

> **Quick summary**
>
> - With the product card interface, signed-in B2B customers see their own price, choose a variant and quantity, and add products to their order without opening the product page.
> - It replaces the price and "add to cart" area on your product cards: the product tiles on collection (category) pages, product recommendations and anywhere else your store lists products.
> - On Shopify it's added automatically on supported themes, or as the **SparkLayer - Product Card** app block. On other platforms, you add one line of code to your product card template.
> - It's included on every plan. It isn't available on Wix, where product prices on gallery pages are hidden instead (see [Wix limitations](https://docs.sparklayer.io/help/platforms/wix/limitations.md)).

## How it works

The product card interface is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). 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](https://docs.sparklayer.io/help/storefront/quantity-rules.md), 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](https://docs.sparklayer.io/help/ordering/favourites.md). |
| **SKU** | The product code, and the barcode, if you've turned them on. See [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md#customise-product-cards). |

### 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](https://www.figma.com/proto/5FPCY5hSGl7mlwjsjMZI2t/SparkLayer-Interfaces?page-id=0%3A1\&type=design\&node-id=86-36708\&viewport=554%2C-398%2C0.33\&t=34VlPwbCqpvQOTsh-8\&scaling=min-zoom\&starting-point-node-id=35%3A7920\&hide-ui=1).

## 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app. Or add it yourself:

**Shopify:**

There are 2 ways to add the product card interface on Shopify:

1. **Theme setup:** go to **Home > Setup > Theme setup** in the SparkLayer Dashboard, or **SparkLayer Wholesale > Setup > Theme setup** in the Shopify app. 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](https://docs.sparklayer.io/help/platforms/shopify/theme-setup.md).

   **More detail**

   In the theme editor, the block is called **SparkLayer - Product Card**. You can also add it yourself: go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)), click **Customize**, open a collection or product page and add the block.

2. **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:

   ```html
   <spark-product-card parent-id="{{ product.id }}"></spark-product-card>
   ```

**Other platforms:**

Your developer adds this line to the template that renders product cards on your collection pages:

```html
<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](https://docs.sparklayer.io/help/platforms.md).

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](https://docs.sparklayer.io/help/storefront/product-display.md#customise-product-cards) in Product display.

## FAQs

**Can I use the product card interface on Wix?**

**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](https://docs.sparklayer.io/help/platforms/wix/limitations.md).