Pricing Display

Displaying a RRP (MSRP)
Within the SparkLayer Frontend﻿, it's possible to show RRP prices (or "MSRP prices") alongside your specific B2B pricing. For example, you may want logged in users to see what non-B2B customers pay for a specific item, allowing them to easily see their pricing savings.
﻿
To enable this, SparkLayer uses special settings (sometimes referred to as metafields or attributes) that allow additional data to be stored against products. 
﻿
🛍️ Using Shopify
🌐 Other platforms
Setting up metafields on Shopify
To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here﻿﻿
Item
Details
Custom data type
﻿Variants﻿
Metafield type
This must be set as an JSON string
Namespace
This must be set as sparklayer
Key
This must be set as rrp
Value
This must be set up in the following format
[{"value":15.99,"currency_code":"usd"}]
Where value is the retail price and currency_code is the currency code (e.g. usd, gbp, eur).

You can define prices for additional currencies by using this example format
[{"value":15.99,"currency_code":"usd"},{"value":10.99,"currency_code":"gbp"}]
﻿
Item
Details
Custom data type
Variant-level (products)
Metafield type
This must be set as an JSON string
Namespace
This must be set as sparklayer
Key
This must be set as rrp
Value
This must be set up in the following format
[{"value":15.99,"currency_code":"usd"}]
Where value is the retail price and currency_code is the currency code (e.g. usd, gbp, eur).

You can define prices for additional currencies by using this example format
[{"value":15.99,"currency_code":"usd"},{"value":10.99,"currency_code":"gbp"}]
For more information, please refer to the SparkLayer Technical Docs﻿
Updating language and text
You can update the default text by adding code to your Core Script﻿.
Learn more﻿ about how to update text on SparkLayer.
﻿
JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.price.rrp": "MSRP: ",
    "product-card.price.rrp": "MSRP: ",
  }
},  
/* End of code */
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.price.rrp": "MSRP: ",
    "product-card.price.rrp": "MSRP: ",
  }
},  
/* End of code */
﻿
If you'd like to display the RRP price elsewhere on your website, you can do this using the Product Price Interface﻿﻿
﻿
﻿
﻿
Quantity pricing
Please also see Quantity Rules﻿ for other configurations available.
Quantity pricing table
﻿
It's also possible to display the tiered pricing breaks table anywhere on your product detail page by adding a special code snippet to your website.
HTML
|
<spark-variant-price-breaks
  variant-sku="{{ product.selected_or_first_available_variant.sku }}"
  parent-id="{{ product.id }}"
>
</spark-variant-price-breaks>
<spark-variant-price-breaks
  variant-sku="{{ product.selected_or_first_available_variant.sku }}"
  parent-id="{{ product.id }}"
>
</spark-variant-price-breaks>
﻿
Quantity pricing discount percentage based off RRP 
If you're using Quantity Pricing & Rules﻿ in your price lists, this will display additional information to make it clear to the customer how much they are saving based on how many units they purchase.
By default, the 'Savings' will be calculated based on the single unit price of the particular product (or variant). For example, if the single unit price is $2.00 and if you purchase 5 or more the price reduces to $1.00, the savings will display as -50%
﻿
If you'd prefer for the savings to instead be calculated off the RRP (i.e. retail price) of a product, you can enable this by adding a special setting. 
Updating the display
You can update the default display by adding code to your Core Script﻿.
Learn more﻿ about how to update display settings on SparkLayer
﻿
JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
savingsUseRrp: true,
/* End of code */
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
savingsUseRrp: true,
/* End of code */
﻿
﻿
﻿
﻿
Customising the pricing text
It's possible to prefix the pricing display on a product detail page with custom language such as 'Your price'.
﻿
Updating language and text
You can update the default text by adding code to your Core Script﻿.
Learn more﻿ about how to update text on SparkLayer.
﻿
JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.price.from-prefix": "Your Price:"
  }
},
/* End of code */
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.price.from-prefix": "Your Price:"
  }
},
/* End of code */
﻿
﻿
﻿
﻿
Display a 'unit cost' price
If you sell products that comprise 'multiple units', it's possible to display an automatically calculated "Unit Price" on your product pages. For example, you may sell a product that comes in packs of 10, but you want to make it clear to your customers how much a "single unit" costs. Or you may sell products that come in specific weights (e.g. kg) and you want to show a "price per kg".
﻿
To enable this, SparkLayer uses special settings (sometimes referred to as metafields or attributes) that allow additional data to be stored against products. 
﻿
🛍️ Using Shopify
🌐 Other platforms
Setting up metafields on Shopify
To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here﻿﻿
Item
Details
Custom data type
﻿Variants﻿
Metafield type
This must be set as an integer string
Namespace
This must be set as sparklayer
Key
This must be set as case_size
Value
This must be set up in the following format
1, 2, 3, etc
Once the setting has been set up, you can then use and modify the below code sample to display on your product pages.
JS
|

{% if product.metafields.sparklayer.case_size %}
<span data-custom-spark-case-size="{{ product.metafields.sparklayer.case_size }}" data-product-id="{{ product.id }}"></span>

<script>
    document.addEventListener('DOMContentLoaded', function(event) {
      setTimeout(() => {
      document.querySelectorAll('[data-custom-spark-case-size]').forEach(async (el) => {
        var caseSize = Number(el.dataset.customSparkCaseSize);
        if (!caseSize) {
           return;
        }
        var productId = el.dataset.productId;
        try {
          priceData = await window.spark.getPriceForProduct (productId);
        } catch (e) {
          console.error(e);
          return;
        }
        const formatter =	new Intl.NumberFormat([], {
          style: 'currency',
          currency: priceData.currencyCode ?? 'usd',
        });
        el.textContent = `This product comes in packs of ${caseSize}. Unit price ${formatter.format(priceData.fromPrice / Number(caseSize))}`;
      });
      }, 500);
    });
</script>

{% endif %}


{% if product.metafields.sparklayer.case_size %}
<span data-custom-spark-case-size="{{ product.metafields.sparklayer.case_size }}" data-product-id="{{ product.id }}"></span>

<script>
    document.addEventListener('DOMContentLoaded', function(event) {
      setTimeout(() => {
      document.querySelectorAll('[data-custom-spark-case-size]').forEach(async (el) => {
        var caseSize = Number(el.dataset.customSparkCaseSize);
        if (!caseSize) {
           return;
        }
        var productId = el.dataset.productId;
        try {
          priceData = await window.spark.getPriceForProduct (productId);
        } catch (e) {
          console.error(e);
          return;
        }
        const formatter =	new Intl.NumberFormat([], {
          style: 'currency',
          currency: priceData.currencyCode ?? 'usd',
        });
        el.textContent = `This product comes in packs of ${caseSize}. Unit price ${formatter.format(priceData.fromPrice / Number(caseSize))}`;
      });
      }, 500);
    });
</script>

{% endif %}
﻿
Combining with Shopify's unit price feature
If you're using Shopify's built-in unit price feature, you can also dynamically display the 'reference unit' e.g. kg, lb, ml.
﻿
Within the code sample above, simple change el.textContent to the below:
JS
|

el.textContent = `Unit price per {{ item.unit_price_measurement.reference_unit }}:  ${formatter.format(priceData.fromPrice / Number(caseSize))}`;

el.textContent = `Unit price per {{ item.unit_price_measurement.reference_unit }}:  ${formatter.format(priceData.fromPrice / Number(caseSize))}`;
﻿
﻿
Item
Details
Custom data type
Variant-level (products)
Metafield type
This must be set as an integer string
Namespace
This must be set as sparklayer
Key
This must be set as case_size
Value
This must be set up in the following format
1, 2, 3, etc
For more information, please refer to the SparkLayer Technical Doc﻿
﻿
Updated 12 Sep 2023
Did this page help you?
TABLE OF CONTENTS
Displaying a RRP (MSRP)
Quantity pricing
Quantity pricing table
Quantity pricing discount percentage based off RRP
Customising the pricing text
Display a 'unit cost' price
Item	Details
Custom data type	Variants
Metafield type	This must be set as an JSON string
Namespace	This must be set as sparklayer
Key	This must be set as rrp
Value	This must be set up in the following format [{"value":15.99,"currency_code":"usd"}] Where value is the retail price and currency_code is the currency code (e.g. usd, gbp, eur). You can define prices for additional currencies by using this example format [{"value":15.99,"currency_code":"usd"},{"value":10.99,"currency_code":"gbp"}]