Pricing Display

displaying a rrp price (msrp price) within the sparklayer frontend docid\ ogkfvqx13dhw2582d57kj , 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 setting up metafields on shopify to learn more about how to configure metafields on shopify for sparklayer, please refer to shopify metafields & data mapping docid\ bxwngb6b1n7qffhtnu7pk setting up metafields on shopify 🤖 automatically add this to your shopify store by going to configure metafields 📖 learn more about how metafields work in shopify metafields & data mapping docid\ bxwngb6b1n7qffhtnu7pk 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 updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / 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 customising the design docid\ qct2zk8wjhyiv2zbvbjyy and adjust accordingly \<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 docid\ cmxfrpgjqxfz9vjztvv0d guide quantity pricing table if you've set up quantity pricing & settings docid\ t2ceaosmeohmgzstjcnhe for your products, sparklayer will by default show this to your customers within the product detail interface docid\ jkcjbyuanjzp75i8ul7mt this will also show to customers when they add items to the my cart interface docid\ efevur a3ycjxuhvrr7t 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 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 frontend integration guide docid\ qwxsym9x5 pviogutekcp (within the display settings) roundpricebreakpercentages true, hiding savings you can optionally hide the savings percentage from showing by adding the following setting to your frontend integration guide docid\ qwxsym9x5 pviogutekcp (within the display settings) showpricebreaksavings false, quantity pricing discount percentage based off rrp if you're using quantity pricing & settings docid\ t2ceaosmeohmgzstjcnhe 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 frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / 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 docid\ t2ceaosmeohmgzstjcnhe 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' updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / 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 / 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" to enable this, sparklayer uses special settings (sometimes referred to as metafields or attributes ) that allow additional data to be stored against products setting up metafields on shopify to learn more about how to configure metafields on shopify for sparklayer, please refer to shopify metafields & data mapping docid\ bxwngb6b1n7qffhtnu7pk 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 {% 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 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 docid\ mrp z0qizq2qksseujylv and product detail interface docid\ jkcjbyuanjzp75i8ul7mt 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 updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / 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 / discounts & promotions sparklayer supports the ability to have discounts and promotions applied during the checkout and these can either be redeemed via discount codes, or applied "automatically" to the customer's order the sparklayer discount engine unlocks a range of discount rules including order level discounts eg, spend $1,000 and get 10% off, spend $2,000 and get 15% off percentage and fixed discounts eg, 20% off an order total, $100 off an order total coupon codes eg, enter code newcustomer and get 5% off scheduled discounts eg, start discount today and end it on a specific date and time customer specific discounts eg, only allow customer group ‘b2b vip’ to qualify for the discount and more learn more about discounts you can see a full overview of what’s possible with discounts in discounts docid\ wrejpw9uryjqwiqeks cg show rrp prices only (for in store shopping) if you manage orders in physical locations with customers (e g in store), it's possible to enable a setting that sets the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa to only show the rrp (or "msrp) prices when browsing and adding items to an order this is especially useful if you need to "obscure" your b2b prices from view and you only want to show the full retail prices use cases could include in store customer visits where an order needs to be placed and the customer must only be able to see the retail (rrp) prices sales teams who are placing orders on behalf of customers (e g on the road) and only the retail (rrp) prices must be seen please note behind the scenes, the b2b prices associated with the logged in b2b customer will still be used to create the order this feature is solely for display purposes to enable this feature, you'll just need to update the sparklayer core script this will then apply to all b2b customers that log in updating the display you can update the default display by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp frontend integration guide docid\ qwxsym9x5 pviogutekcp about how to update display settings on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / display { showrrptoggle true, / other settings should show below / } / end of code / if you'd prefer to make this display for specific customers, you can configure the code as shown below / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / display { {% for tag in customer tags %} {% if tag == "b2b group 1" %} showrrptoggle true, {% elsif tag == "b2b group 2" %} showrrptoggle true, {% endif %} {% endfor %} / other settings should show below / } / end of code /