How prices are shown

How it works

Once your price lists are set up, SparkLayer's frontend interfaces show B2B prices on your store. You change what they show in 4 ways:

Show an RRP (MSRP) price

Show the RRP (recommended retail price, also called MSRP) next to a customer's B2B price, so signed-in customers see what retail customers pay and how much they save. For example, a product page might show "£6.75" with "RRP: £29.99" beside it. Each variant row shows its own RRP under its price.

Each variant's RRP is stored in a field called rrp (a metafield). SparkLayer adds the field for you, then you fill it in.

To set an RRP on one product:

1. Set up the RRP field once. On Shopify, go to Integrations,Platform,Metafields (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform › Metafields to do this now, whichever platform you're on. Opens in a new tab. and click Configure next to SparkLayer metafields. On other platforms, see the field details below.
2. In the form, enter the RRP and its currency, for example 15.99 and usd. Add a row for each currency you sell in. It writes the value for you.
3. Click Copy, open the variant in your store admin, paste the value into the rrp field and save.

The RRP is set on each variant, as a decimal amount such as 9.00 (not in pence or cents), with one entry per currency: [{"value":9.00,"currency_code":"gbp"}].

On a product with several variants, the RRP in the product summary is the RRP of the first variant, in your platform's variant order. It doesn't change when the customer picks another variant, and it can't show a range yet. Each variant's own RRP shows in the variant table.

Show the quantity pricing table

If you've set up quantity pricing, SparkLayer shows the price breaks in the Product Detail Interface by default, as a table with Qty, Price and Savings columns.

Customers also see a Qty discount pricing table, and the price per unit, when they add items to the My Cart Interface.

To show an extra price breaks table anywhere on your product page, make a small change to your theme's product page code:

<spark-variant-price-breaks
  variant-sku="{{ product.selected_or_first_available_variant.sku }}"
  parent-id="{{ product.id }}"
>
</spark-variant-price-breaks>

For minimum quantities, pack sizes and other quantity settings, see Quantity rules.

Show tax-inclusive prices

Tax-inclusive price display shows your B2B prices with tax included, labelled "inc. tax" so buyers know what they're seeing. It's designed for markets where buyers expect gross prices, which is common in Australia and in trade sectors that sell to smaller businesses.

If your store's own prices include tax and you use automatic price lists, that's a different setting: see If your store's prices include tax.

How it works:

• It shows gross prices to buyers who think in tax-inclusive terms, without changing how you upload or charge for your pricing.
• It works per price list. Turn it on for the price lists that need it and leave the rest showing net prices, so you can serve different markets from one store.
• It uses your own rate per product. You supply a display tax rate per SKU, so reduced-rate and zero-rated products show correctly next to standard-rate ones.
• It labels prices. Key pricing areas add an "inc. tax" label, so it's clear which basis a buyer is seeing.

Turn on tax-inclusive display

Buyers only see gross prices once all 3 parts are in place.

1. Turn it on for your store. Go to Settings,Configurations,Pricing and cart (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations › Pricing and cart to do this now, whichever platform you're on. Opens in a new tab., turn on Tax-inclusive prices and click Save.
2. Turn it on for each price list. Each price list has its own Tax Inclusive Display setting. Turn it on for the price lists whose customers should see gross prices. Customers on other price lists keep seeing net prices.
3. Add a display tax rate to your products. Add a display_tax_rate column to your price CSV: the percentage used to work out the gross price from your net price, from 0 to 100. Use the same rate on every row for a SKU. For the columns and an example file, see CSV columns.

sku,price,display_tax_rate
ABC-123,10.00,20

A product on a tax-inclusive price list with no rate, or a rate of 0, still shows the "inc. tax" label, at 0%. This is deliberate, so a zero-rated product can't be confused with one whose rate hasn't been uploaded yet.

Where buyers see tax-inclusive prices

Once it's on, gross prices and the "inc. tax" label appear at every step of buying.

Limitations of tax-inclusive display

Tax-inclusive display only suits stores with simple tax setups, where you can always provide a tax rate for each SKU on a tax-inclusive price list. Read these limits before you turn it on.

Show B2B prices in other apps

Wishlist, quick view, search and upsell apps show your platform's own price: the retail price, with tax included if your store shows it that way. They don't know about SparkLayer, so they can't show B2B prices on their own.

To show a B2B customer their price inside one of these apps, your developer embeds a SparkLayer interface in the app's template, if the app lets you edit it:

The app's own quantity selectors and add-to-cart buttons don't add to the SparkLayer cart, so hide them for B2B customers. If you'd like us to set this up for you, contact our support team.

Discounts and promotions

To show discounts and promotions in the cart, set them up in Discounts (Growth plan). They apply automatically, or with a coupon code during checkout.

Customise how prices look

Change what the price labels say, how the RRP and savings look, and what shows when a product has no price. Several of these are switches at Storefront,Options,Pricing and display (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Pricing and display to do this now, whichever platform you're on. Opens in a new tab., which need no code. The rest are made in your SparkLayer Core Script, your CSS overrides or your theme's code, usually by your developer or agency. For how language strings (translations) work, see Languages and international.

Change the RRP label

To change the "RRP" label, for example to "MSRP", add this to your Core Script:

translations: {
  en: {
    "pdp.price.rrp": "MSRP: ",
    "product-card.price.rrp": "MSRP: ",
    "cart.price.rrp": "MSRP: ",
  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.price.rrp": "MSRP: ",
        "product-card.price.rrp": "MSRP: ",
        "cart.price.rrp": "MSRP: ",
      }
    },  
  };
</script>

Style the RRP

To change how the RRP looks, for example to strike it through in red, add this CSS to your CSS overrides and adjust it as needed:

<style>
:root {
   --spark-pricing-rrp-decoration: line-through;
   --spark-pricing-rrp-color: red;
}
</style>

Change how savings are shown

You can change the Savings column in quantity pricing tables at Storefront,Options,Pricing and display (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Pricing and display to do this now, whichever platform you're on. Opens in a new tab., then click Save and publish:

display: {
  roundPriceBreakPercentages: true,
  showPriceBreakSavings: false,
}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      roundPriceBreakPercentages: true,
      showPriceBreakSavings: false,
    }
  };
</script>

Base savings on the RRP

By default, the savings in a quantity pricing table are calculated from the single unit price of the product or variant. For example, if the single unit price is $2.00 and the price drops to $1.00 for 5 or more, the savings show as -50%.

To calculate savings from the product's RRP (retail price) instead, turn on Base savings on RRP at Storefront,Options,Pricing and display (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Pricing and display to do this now, whichever platform you're on. Opens in a new tab. and click Save and publish. For example, with an RRP of $21.95 and a price of $16.66, the savings show as -24% from the first price break.

display: {
  savingsUseRrp: true,
}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      savingsUseRrp: true,
    }
  };
</script>

Change the price labels

You can add text before the price on a product page, such as "Your price", so it reads "Your Price, from: £2.91". Add this to your Core Script:

translations: {
  en: {
    "pdp.price.from-prefix": "Your Price:"
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.price.from-prefix": "Your Price:"
      }
    },
  };
</script>

You can also change any of the default pricing text with these language strings:

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:"
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    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:"
      }
    },
  };
</script>

Show a unit cost price

If you sell products made up of several units, you can show a unit price on your product pages, worked out automatically. For example, a product sold in packs of 10 could show "This product comes in packs of 10. Unit cost $0.31". Or, for products sold by weight, you could show a price per kg.

To set it up, add a case_size metafield to each product variant.

{%- 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 %}

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

Change the "Unavailable" message

When a product has no B2B price, the Product Card Interface and Product Detail Interface show "Unavailable", so B2B customers know they can't buy it. To show a different message, such as "Price on application", add a translation override for each key below at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab.. No code is needed. For the full recipe, see Show "price on application".

A developer can set the same text in your Core Script instead:

translations: {
  en: {
    "pdp.messaging.un-sellable": "Unavailable",
    "product-card.messaging.un-sellable": "Unavailable",
    "product-card.messaging.select-option": "Unavailable, please select another option"
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.messaging.un-sellable": "Unavailable",
        "product-card.messaging.un-sellable": "Unavailable",
        "product-card.messaging.select-option": "Unavailable, please select another option"
      }
    },
  };
</script>

Show RRP prices only

If you take orders with customers in person, for example in a shop, you can make the SparkLayer frontend interfaces show only the RRP (MSRP) while browsing and adding items to an order. This hides your B2B prices from view.

Use cases include:

• In-store customer visits, where an order needs to be placed and the customer must only see retail (RRP) prices.
• Sales teams placing orders on behalf of customers (for example on the road), where only retail (RRP) prices must be seen.

This is for display only. The order is still created with the B2B prices of the signed-in customer.

To turn it on for every B2B customer who signs in, turn on RRP toggle ("Buyers can switch between the RRP and their own prices.") at Storefront,Options,Pricing and display (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Pricing and display to do this now, whichever platform you're on. Opens in a new tab. and click Save and publish. Or add this to the display section of your Core Script:

display: {
  showRrpToggle: true,
}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      showRrpToggle: true,
    }
  };
</script>

display: {
{% for tag in customer.tags %}
 {% if tag == "b2b-group-1" %}
  showRrpToggle: true,
 {% elsif tag == "b2b-group-2" %}
  showRrpToggle: true,
 {% endif %}  
{% endfor %}

}

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
    {% for tag in customer.tags %}
     {% if tag == "b2b-group-1" %}
      showRrpToggle: true,
     {% elsif tag == "b2b-group-2" %}
      showRrpToggle: true,
     {% endif %}  
    {% endfor %}

    }
  };
</script>

FAQs