Pricing Display

Displaying a RRP price (MSRP price)
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.
﻿
﻿
﻿
🛍️ 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"}]
You can also watch our video tutorial on how to set this up.
﻿
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﻿
﻿
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: ",
    "cart.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: ",
    "cart.price.rrp": "MSRP: ",
  }
},  
/* End of code */
﻿
If you'd like to adjust the appearance of the RRP pricing, you can do so via adding special CSS overwrites to apply formatting.
﻿
Simply add the below CSS to your CSS overwrites﻿ and adjust accordingly.
CSS
<style>
:root {
   --spark-pricing-rrp-decoration: line-through;
   --spark-pricing-rrp-color: red;
}
</style>
<style>
:root {
   --spark-pricing-rrp-decoration: line-through;
   --spark-pricing-rrp-color: red;
}
</style>
﻿
﻿
Quantity pricing
Learn more
For our full guide on quantity pricing and available configurations, please see our Quantity Rules﻿ guide.
Quantity pricing table
If you've set up Quantity Pricing & Settings﻿ for your products, SparkLayer will by default show this to your customers within the Product Detail Interface﻿. 
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/quantity-pricing.mp4" type="video/mp4">
</video>
<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/quantity-pricing.mp4" type="video/mp4">
</video>
﻿
This will also show to customers when they add items to the My Cart Interface﻿.
﻿
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.
﻿
Simply add the below in the source code of your product pages to display an additional quantity breaks table.
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 savings
You can also customise how the "savings" column displays to customers. 
Area
Details
Decimal places
If you'd prefer to show two decimal places in the savings percentage (e.g. 9.45% off instead of 9% off), you can add the following setting to your SparkLayer Core Script﻿ (within the display settings).
roundPriceBreakPercentages: true,
Hiding savings
You can optionally hide the savings percentage from showing by adding the following setting to your SparkLayer Core Script﻿ (within the display settings).
showPriceBreakSavings: false,
﻿
Quantity pricing discount percentage based off RRP 
If you're using Quantity Pricing & Settings﻿ 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. 
﻿
JS
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
  display: {
    savingsUseRrp: true,
    /* Other settings should show below */
  }
/* End of code */
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
  display: {
    savingsUseRrp: true,
    /* Other settings should show below */
  }
/* End of code */
﻿
﻿
Unit of measure pricing
Are you looking to set up pricing based on "units of measure" such as boxes, cartons, or pallets? Please refer to our Quantity Pricing & Settings﻿ guide to learn more.
﻿
Customising the pricing text
It's possible to prefix the pricing display on a product detail page with custom language such as 'Your price'.
﻿
﻿
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 */
﻿
In addition to this, you can also adjust any of the default language used for pricing using the below language strings.
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": "From:",
    "pdp.price.rrp": "RRP:",
    "pdp.price.pack-size": "Pack ({packSize}): {price}",
    "product-card.price.from": "From:",
    "product-card.price.rrp": "RRP:"
  }
},
/* 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": "From:",
    "pdp.price.rrp": "RRP:",
    "pdp.price.pack-size": "Pack ({packSize}): {price}",
    "product-card.price.from": "From:",
    "product-card.price.rrp": "RRP:"
  }
},
/* 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".
﻿
﻿
🛍️ 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.
Click here to view code sample
JS
{%- if customer.metafields.sparklayer.authentication -%}
  
  {% 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 %}

{% endif %}
{%- if customer.metafields.sparklayer.authentication -%}
  
  {% 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 %}

{% 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))}`;
﻿
Important to note
If you are looking to customise the behaviour of how this works, we recommend engaging a Shopify expert to assist.
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﻿
﻿
Adjusting the "Unavailable" message
When a product has no B2B pricing set against it, the  Product Card Interface﻿ and Product Detail Interface﻿ will display a message that shows "Unavailable". This indicates to the B2B customer that the product cannot be purchased.
﻿
If you'd prefer, you can adjust this to display a different message by updating the language settings on your store.
﻿
JS
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.messaging.un-sellable": "Unavailable",
    "product-card.messaging.un-sellable": "Unavailable",
    "product-card.messaging.select-option": "Unavailable, please select another option"
  }
},
/* 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.messaging.un-sellable": "Unavailable",
    "product-card.messaging.un-sellable": "Unavailable",
    "product-card.messaging.select-option": "Unavailable, please select another option"
  }
},
/* End of code */
﻿
﻿
﻿
﻿

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"}]

Area	Details
Decimal places	If you'd prefer to show two decimal places in the savings percentage (e.g. 9.45% off instead of 9% off), you can add the following setting to your SparkLayer Core Script (within the display settings). roundPriceBreakPercentages: true,
Hiding savings	You can optionally hide the savings percentage from showing by adding the following setting to your SparkLayer Core Script (within the display settings). showPriceBreakSavings: false,

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

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

Updated 16 Aug 2024

Did this page help you?

Quantity Rules

Stock Display