# Product price

URL: https://docs.sparklayer.io/help/storefront/interfaces/product-price

Show signed-in B2B customers their own price or the RRP anywhere on your product or collection pages with the SparkLayer product price snippet.

> **Quick summary**
>
> - The product price interface shows a signed-in B2B customer their own price, or the RRP, for a product anywhere on your store, such as collection (category) pages or product pages.
> - Use it alongside the other product interfaces, or instead of them when you want full control over where prices appear.
> - Your developer or agency adds it with one line of code per price in your theme: `spark-product-price` for the B2B price and `spark-product-rrp` for the RRP.
> - It's included on every plan. On an existing theme, you also need to hide the prices your theme shows to B2B customers.

## How it works

The product price interface is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). It only shows a price: unlike the [product card](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md) and [product detail](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md) interfaces, there's no quantity box or "add to cart" button. For example, a collection page can show customers "$9.99 RRP: $19.99" under each product name, using your theme's own layout.

There are 2 prices you can show:

| Price | What it shows |
| --- | --- |
| **B2B pricing** | The signed-in customer's own B2B price. |
| **RRP pricing** | The RRP you've set for the product. See [How prices are shown](https://docs.sparklayer.io/help/pricing/pricing-display.md). |

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 your developer or agency. They add the line for each price you want to your theme's template, for example your product page or product card template. You can use both together, and place them anywhere on your store.

```html
<!-- Use this to show the B2B pricing -->
<spark-product-price parent-id="{{ product.id }}"></spark-product-price>
```

```html
<!-- Use this to show the RRP pricing -->
<spark-product-rrp parent-id="{{ product.id }}"></spark-product-rrp>
```

If your platform uses a different variable for the product's ID, replace `product.id` with it. 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 their prices.

On an existing theme, also hide the theme's own prices and anything else you don't want B2B customers to see. See the [Frontend integration guide](https://docs.sparklayer.io/developers/frontend.md).

## Change what it shows

To show RRP, quantity pricing or unit prices, see [How prices are shown](https://docs.sparklayer.io/help/pricing/pricing-display.md). For other options, see [Storefront](https://docs.sparklayer.io/help/storefront.md).