> 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/getting-started/customize-the-loyalty-widgets.md).

# Customize the loyalty widgets

Style loyalty widgets from one place, use Universal Styler, and add blocks to your theme.

Use **Edit Loyalty Widgets** to customize customer-facing loyalty surfaces. This includes ways-to-earn and ways-to-redeem blocks, Product Redeemer, the cart point redeemer, and Customer Rewards.

Open it from the top of the Loyalty Program dashboard.

#### The interactive customizer

Select a widget to open its live preview and settings.

* Click through widget states, such as selection, confirmation, and redemption.
* Switch between **Logged out** and **Logged in**.
* Switch between desktop and mobile.
* Customize content, messages, colors, typography, layout, badges, buttons, errors, and **Custom CSS**.

**Reset preview** restores the original preview state.

#### Universal Styler vs individual edits

**Universal Styler** sets shared colors and typography across loyalty widgets.

* **Styler** fields inherit their value from Universal Styler.
* A manually saved change is tagged **Edited** in green.
* Re-running Universal Styler does not overwrite **Edited** fields.

Set your brand base in Universal Styler first. Then fine-tune individual widgets.

#### Widget-specific settings worth knowing

* **Cart point redeemer** — redemption method, message placeholders, logged-out prompt, checkout messages, and abbreviated text. See [Configure the cart point redeemer](/loyalty-and-rewards/points-and-ways-to-earn/configure-the-cart-point-redeemer.md).
* **Product Redeemer** — grid or carousel layout, per-device card widths, card style, badges, buttons, prompts, errors, and discount-code display.
* **Ways to redeem block** — title, subtitle with HTML support, grid display, redemption method, and logged-out titles and CTA.
* **Customer Rewards**: per-state card text and badges for tier rewards, error messages, and grid or carousel layout, mirroring the Product Redeemer's controls. See [The Customer Rewards storefront redeeming block](/loyalty-and-rewards/membership-tiers-and-referrals/the-customer-rewards-storefront-redeeming-block.md).

#### Add the widgets to your theme

{% stepper %}
{% step %}
**Open your theme editor**

In Shopify admin, go to **Online Store → Themes**. Click **Customize** on your live theme.
{% endstep %}

{% step %}
**Choose the page**

Navigate to the target page. Click **Add block** or **Add section**.
{% endstep %}

{% step %}
**Add the loyalty block**

Under **Apps**, choose a Roadmap loyalty block, such as **Redeem Loyalty Points**. Position it on the page.
{% endstep %}

{% step %}
**Save**

Click **Save**. The block uses settings from **Edit Loyalty Widgets**.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Some blocks offer **Use Config From**. Choose **From Admin** for **Edit Loyalty Widgets** settings. Choose **From Blocks** for theme-editor settings.
{% endhint %}

#### Related guides

* [Configure the cart point redeemer](/loyalty-and-rewards/points-and-ways-to-earn/configure-the-cart-point-redeemer.md)
* [Set up product redemption](/loyalty-and-rewards/points-and-ways-to-earn/set-up-product-redemption.md)
* [The Customer Rewards storefront redeeming block](/loyalty-and-rewards/membership-tiers-and-referrals/the-customer-rewards-storefront-redeeming-block.md)
* [Overview of the Loyalty Program dashboard](/loyalty-and-rewards/getting-started/overview-of-the-loyalty-program-dashboard.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/getting-started/customize-the-loyalty-widgets.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.