# Storefront widgets

URL: https://docs.sparklayer.io/help/storefront/interfaces

See every SparkLayer frontend interface your B2B customers use, from product pricing and the matrix to My Cart and My Account, and where each appears.

> **Quick summary**
>
> - Frontend interfaces (sometimes called widgets) are the B2B parts of your store that SparkLayer adds: product pricing and ordering, the B2B cart and checkout, and the customer's account area.
> - They only appear to customers who are signed in as B2B customers. Retail visitors see your store as normal.
> - You add them to your theme at **Storefront > Widgets** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets** in the Shopify app, with the app embed, a free installation by our team, or by hand. They're loaded by the SparkLayer [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting): keep it up to date to get the latest features.
> - Every plan includes them. On Wix, the product card interface isn't available (see [Wix limitations](https://docs.sparklayer.io/help/platforms/wix/limitations.md)).

## How it works

When a B2B customer signs in, SparkLayer replaces your store's own pricing, "add to cart" buttons, cart and account pages with its interfaces. Each interface uses the customer's [customer group](https://docs.sparklayer.io/help/customers/customer-groups.md) to show their prices, quantity rules, stock and payment methods.

A B2B customer's path through the interfaces:

1. **Browse**: Product card or product price on collection pages
2. **Choose products**: Product detail or product matrix on product pages
3. **Build the order**: My Cart: search, import, edit
4. **Check out**: Shipping, Review & Pay, Complete
5. **Track and reorder**: My Account: orders, lists, addresses

## The interfaces

Each interface page starts with what customers see and do, then shows you how to add and set it up.

| Interface | Where it appears | What customers can do |
| --- | --- | --- |
| [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) | An overlay that opens from your store's cart link, on any page | Build an order, import products, check out and choose a payment method |
| [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) | An overlay that opens from your store's account link, on any page | See order history, reorder, manage shopping lists, addresses and account details |
| [Product detail](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md) | Product pages, in place of the price and "add to cart" area | See their price, stock and pack sizes, and order one or many variants |
| [Product matrix](https://docs.sparklayer.io/help/storefront/interfaces/product-matrix.md) | Product pages, usually for products with two or more variant options | Order every colour and size combination from one table |
| [Product card](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md) | Collection (category) pages and anywhere else a product card shows | See their price and add products without opening the product page |
| [Product price](https://docs.sparklayer.io/help/storefront/interfaces/product-price.md) | Anywhere you add it on product or collection pages | See their B2B price or the RRP |

You can also add your own content inside My Cart, My Account and the checkout with [custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md).

To change how the interfaces look and behave, see [Customising the design](https://docs.sparklayer.io/help/storefront/customising-design.md) and [How products are shown](https://docs.sparklayer.io/help/storefront/product-display.md).

- [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md): The B2B cart and four-step checkout.
- [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md): Order history, reordering, shopping lists and addresses.
- [Product detail](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md): B2B pricing and ordering on product pages.
- [Product matrix](https://docs.sparklayer.io/help/storefront/interfaces/product-matrix.md): Every variant of a product in one table.
- [Product card](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md): B2B pricing and ordering on collection pages.
- [Product price](https://docs.sparklayer.io/help/storefront/interfaces/product-price.md): A B2B price or RRP anywhere on your store.
- [Custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md): Add your own messages and banners inside My Cart and My Account.