Product price
How it works
The product price interface is one of SparkLayer's frontend interfaces. It only shows a price: unlike the product card and product detail 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. |
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 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.
<!-- Use this to show the B2B pricing -->
<spark-product-price parent-id="{{ product.id }}"></spark-product-price><!-- 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.
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.
Change what it shows
To show RRP, quantity pricing or unit prices, see How prices are shown. For other options, see Storefront.
Last updated