Available on the Advanced plan and above.

Use this component to display how many points a customer earns for purchasing a particular product.

​
Explanation

To show the points that are gained for purchasing a particular product, two attributes are needed.

The first, data-lion-price-for-product-id, must be added to an element whose text content is the price of the product. The value of this attribute should be equal to the ID of the product.

The second attribute, data-lion-points-for-product-id, sets the innerHTML of its element to the computed points value of the matching data-lion-price-for-product-id attribute on the page.

Please note that the points shown here only include points awarded for the purchase rule. It does not factor in collection exclusions, point modifiers or bonus points.

​
Code

Add the below snippet to an element whose text content is the price of the product:

data-lion-price-for-product-id

Add this snippet on the product page to compute the points value of the product price:

data-lion-points-for-product-id

​
Example for Shopify

Add data-lion-price-for-product-id to an element containing the price of the product.

<span id="ProductPrice" data-lion-price-for-product-id="{{ product.id }}">
  £12.99
</span>

Then, insert data-lion-points-for-product-id where you want to show how many points a customer earns for buying this product.

<div>
  Earn <span data-lion-points-for-product-id="{{ product.id }}"></span> points
</div>