> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/loyalty-and-rewards/points-and-ways-to-earn/show-points-earned-on-product-pages.md).

# Show points earned on product pages

Add the Points Earned Badge to your product pages so customers see the points a purchase earns — with live promotion rates and a logged-out login prompt.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FsfHKxDw7OpNRlmfb7US5%2FScreenshot%202026-09-01%20at%208.59.59%E2%80%AFPM.png?alt=media&#x26;token=5cb1af5b-67c1-45f8-9cbf-dfa1bb69c7d6" alt="" width="375"><figcaption></figcaption></figure>

The **Points Earned Badge** puts your loyalty program at the moment of decision: a strip on the product page telling the customer exactly how many points this purchase earns — *Earn 50 points with this purchase*.

The number is calculated live from your earning rules, so it does the right thing without upkeep:

* **Promotions are reflected automatically.** During a [double-points promotion](/loyalty-and-rewards/points-and-ways-to-earn/run-a-double-points-promotion.md), the badge shows the promotional number.
* **Non-earning products show nothing.** If a product is excluded by your [earning rules](/loyalty-and-rewards/points-and-ways-to-earn/award-points-for-placing-an-order.md), the badge hides itself rather than promising points the order won't earn.

### Add the badge to your product pages

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FPfiTjsIBXHs74ZwQOjKT%2FScreenshot%202026-09-01%20at%208.58.52%E2%80%AFPM.png?alt=media&#x26;token=5d5635d8-431a-4abb-af2c-c5c400e0b830" alt=""><figcaption></figcaption></figure>

The badge is a standard Shopify app block:

1. In Shopify admin, go to **Online Store → Themes → Customize** and open a **product page** template.
2. In the **Product information → Details** section, click **Add block** and choose **Points Earned Badge** under Apps.
3. Drag it where you want it — directly under the **Buy buttons** is the natural home.
4. **Save**.

### Configure the content

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FcdatbDyBQusovtfQDpX7%2FScreenshot%202026-09-01%20at%208.51.46%E2%80%AFPM.png?alt=media&#x26;token=e0c9870e-3214-4cec-bd13-37d844b32e89" alt=""><figcaption></figcaption></figure>

Style and word the badge from **Edit Loyalty Widgets → Product Page → Points Earned** (not the theme editor):

* **Label Text** — supports the `{points}` placeholder: *Earn {points} points with this purchase*.
* **Show info tooltip** + **Tooltip Text** — an ⓘ explainer, e.g. *Points are added to your account when your order is placed.*
* **Logged-out Label Text** — what visitors see before logging in, e.g. *Log in to redeem your points for rewards.* Leave blank to reuse the Label Text (also supports `{points}`).
* **Logged-out Tooltip Text** — the tooltip for that state.

### Styling

* **Typography & Colors** — font size, text color, tooltip background, and tooltip text color. Fields tagged **Styler** inherit from the [Universal Styler](/getting-started/how-the-universal-styler-works.md) until you edit them.
* **Container** — background color, border radius, text alignment, and top & bottom padding.

Use the preview's **Logged out / Logged in** toggle and desktop/mobile switch to check both states as you style.

### Related guides

* [Customize the loyalty widgets](/loyalty-and-rewards/getting-started/customize-the-loyalty-widgets.md)
* [Award points for placing an order](/loyalty-and-rewards/points-and-ways-to-earn/award-points-for-placing-an-order.md)
* [Run a double-points promotion](/loyalty-and-rewards/points-and-ways-to-earn/run-a-double-points-promotion.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roadmap.so/loyalty-and-rewards/points-and-ways-to-earn/show-points-earned-on-product-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.