> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Points for product

<Note>Available on the **Advanced plan** and above.</Note>

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.

<Note>
  Please note that the points shown here only include points awarded for the
  purchase rule. It does not factor in [collection
  exclusions](https://help.loyaltylion.com/en/articles/1965585-activity-make-a-purchase#h_531103629b),
  [point
  modifiers](https://help.loyaltylion.com/en/articles/6777829-points-modifier)
  or [bonus
  points](https://help.loyaltylion.com/en/articles/3459309-promotion-bonus-points-on-a-product-collection).
</Note>

***

## Code

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

```html theme={null}
data-lion-price-for-product-id
```

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

```html theme={null}
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.

```html theme={null}
<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.

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