website logo
SupportDashboardAbout SparkLayerSchedule Demo
📘Help Docs
⚙️Tech Docs
Navigate through spaces
⌘K
👋Introduction
How SparkLayer Works
Getting Started
📣Useful Links
What's New!
Roadmap
Support
Try our Demo
Troubleshooting
Policies & Data
🖥️Frontend
⭐Features
⚒️Backend
📊Dashboard
🌐Integrations
Docs powered by
Archbee
Features
Frontend Interfaces

Product Price Interface

Introduction

The Product Price Interface lets you display B2B pricing for a product anywhere on your website. It can be used alongside (or instead of) the other product interfaces and gives you flexibility to customise how you want your pricing to be shown to your customers.

Document image







How it works

The Product Price Interface lets you show B2B pricing anywhere on the product pages on your website. This could include product collection (or "category") pages or product detail pages. There are two configurations available:

Item

Details

B2B pricing

This shows logged in customers their specific B2B pricing

RRP pricing

This shows logged in customers the RRP pricing you've set for the product. Learn more






Integrating the code

To add the Product Price Interface to your website, you just need to add a single line of code to your product detail page template based on which pricing type you'd like to show. You can also combine the pricing types anywhere on your website.

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

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


Once this is added, the interface will display for all logged in B2B customers.

Please note Based on the platform you're using, the variable product.id will need to be adjusted to the appropriate setting. If you're installing on your Shopify website, please see our guide here.

Important! If you're using SparkLayer on your existing website, you will need to hide elements that you don't want your B2B customers to see. Please see our full guide here.






Configurations

SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces. Please see our full guide here on what's possible!

Updated 04 Sep 2023
Did this page help you?
PREVIOUS
Product Card Interface
NEXT
Configurations
Docs powered by
Archbee
TABLE OF CONTENTS
Introduction
How it works
Integrating the code
Configurations
Docs powered by
Archbee