---
title: "Redeem Points On-site Module (Interactive)"
slug: "redeem-points-on-site-module-interactive"
tags: ["Loyalty and Referrals", "Shopify Plus", "Shopify", "Salesforce Commerce Cloud", "Adobe Commerce (Magento)", "BigCommerce", "Custom"]
updated: 2025-02-05T10:43:08Z
published: 2025-02-05T10:43:08Z
canonical: "support.yotpo.com/redeem-points-on-site-module-interactive"
---

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

# Redeem Points On-site Module (Interactive)

Products

  

Loyalty & Referrals

###### Supported plans

Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento), Custom

The Interactive Redeem Points Module is a highly-customizable way to let customers redeem their points for rewards. You can deploy a new module in minutes, with no development required.

In this article, you'll find out how to access, customize, and deploy the Interactive Redeem Points Module on your site.

Tip

Read more about [which Redeem Points Module & Checkout Modules you need for your program.](/v1/docs/guide-to-the-redeem-points-modules)

## Before you start

Before setting up your Interactive module, you'll want to:

- [Set up rewards](/v1/docs/direct-and-redeemable-coupons-overview)
- **Configure your Loyalty emails** - You will want to notify your customers when they get a coupon code. Read more about configuring [Yotpo Triggered Emails](/v1/docs/customizing-yotpo-loyalty-referrals-triggered-emails) or emails via [ESP integrations](/v1/docs/communications)

## Accessing the editor

**Accessing via the Rewards Page Builder**

To access and edit the section via the [Rewards Page Builder](/v1/docs/getting-started-with-the-rewards-page-builder), do the following:

1. In your Yotpo Loyalty & Referrals main menu, go to **Display On-site >** [**Rewards Page Builder**](https://loyalty-app.yotpo.com/rewards-page-builder-widget).
2. Click **Create Rewards Page** or click the existing page you want to edit.
3. Click **Redeem Points (Free Products** Section).
4. Proceed below to the next step, "Customize settings".

**Accessing as a module**

To access and edit as a [Module](/v1/docs/overview-of-modules-rewards-page-builder-sections), do the following:

1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > [**Redeem Points Modules**](https://loyalty-app.yotpo.com/redemption-widgets).
2. Scroll down to the "**Interactive**" section.
3. Click **Edit** on the instance you wish to edit or click **"+ Create new"**

Note

Your Module won't appear on your site until you publish it

## Customizing the module

There are three sections in the module editor:

1. Layout
2. General appearance
3. Customize reward appearance

## 1. Layout

In this section, you can choose which rewards to display, arrange the order in which they appear, and change the layout of your module.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/8d4f78a8-d023-4bf7-868f-8c23eb7e5005.gif?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

## 2. General appearance

These are the settings that are general to the module. To edit individual rewards, go to [Customize reward appearance](/v1/docs/redeem-points-on-site-module-interactive#3-customize-reward-appearance)

#### General appearance > Fonts & general text

**Background color** Choose whether you want to add a background color or have the widget be transparent.

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="br"><p><strong>Fonts<br></strong>The primary and secondary fonts are two fonts that will apply in several places throughout your module. Click below to see where the fonts appear.</p></editor360-custom-block><editor360-custom-block data-preprocessing="true" data-sanitizationtags="img"><details><summary>Primary &amp; Secondary Fonts&nbsp;</summary><p><img src="https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/78da2fd8-7032-4ed4-a611-226882a6febf.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D" class="fr-fic fr-dii"></p><p><img src="https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fddf5faf-eefc-4dab-8887-afc0406517ba.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D" class="fr-fic fr-dii"></p></details></editor360-custom-block>

**Exchange rate**

Display here how much your points are worth in store credit.

**Button**

Default text: "Redeem My Points." This button shows on the logged-out state, and it redirects the customer to your site's login page.

If you are using an e-commerce platform that has a pre-built integration with Yotpo Loyalty & Referrals, this is done automatically in the integration.

If you are working with a generic or custom-built platform, this login page URL that you defined in your settings page. You can change it here: [**Settings > Account Login URL**](/v1/docs/settings-section-guide#platform-specific-settings)**.**![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/dc9559b6-26f8-4cfc-bcfd-6ab545c1f596.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

### Advanced

**CSS editor**

If you'd like to make further customizations to the module, use our embedded CSS editor. If you need to make any overriding changes to the Interactive Redeem Points Module CSS, use this CSS class name before the class you want to override:

```css
.yotpo-coupons-redemption-widget.yotpo-widget-override-css
```

If you are using the CSS Editor, you may see a notification asking you to update your Module version from time to time. [Read more about Module Versions.](/v1/docs/updating-your-modules-version)

Note

Make sure to **use our embedded CSS editor instead of hardcoding directly onto your storefront**.

If our system detects CSS implementation outside the module, we will refrain from updating the module version as it might impact your site.

#### General appearance > Logged in view

**Point balance** This is the **number of points the customer currently has**. This field must include at least one variable, either {{current_point_balance}}, or {{points_as_credit}}.

- **{{current_point_balance}}** - This shows how many points the customer currently has. For example 500 points.
- **{{points_as_credit}}** - This shows how many points the customer has in terms of store credit. For example $5.00.

**Redeem button**

Clicking the button opens the following options: Yes/no![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/808e681d-2870-4c9a-8e95-6df32cafe02b.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

If the customer clicks yes, points are deducted from their account, and they are given the reward code. They need to copy it and apply it at checkout.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/4df3dace-72bf-4c28-b022-23432030c055.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

## 3. Customize reward appearance

First, select which reward appearance you want to customize. Then you can adjust the following options:

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="br"><p><strong>Discount amount<br></strong>Discount amount (usually in the form of currency, such as $10.00). Changing this will only change how it appears, but <strong>will not change the actual value of the reward.</strong> To change the value of the reward, do so in the loyalty admin.</p></editor360-custom-block><editor360-custom-block data-preprocessing="true" data-sanitizationtags="br"><p><strong>Points <br></strong>This is the number of points needed to claim the discount. The system will auto-populate the number of points you set up in your admin. This field must contain the variable:</p></editor360-custom-block>

{{points}}

#### Apply Design to All Tiles

This is a quick and easy way to apply changes to your tile design. Clicking Apply Design to All Tiles will take the following design settings and apply them across all the tiles:

- Reward amount color
- Points text & color
- Button style, color, and button font color

You may see that your button color stays gray on some of your rewards after you click apply design to all tiles. This is a preview of what it will look like if the customer doesn't have enough points to redeem this reward.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/075e0ac6-e593-43a2-b395-160688c0ce35.gif?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

## Publishing the module

For your Module to appear onsite, you need to embed some code onto your site. See a guide for [Embedding Modules on Shopify](/v1/docs/embedding-on-site-modules-on-your-store).

## **Publishing via the Rewards Page Builder**

If you are building your Redeem Points Section with the Rewards Page Builder, follow the [steps for publishing your Rewards page](/v1/docs/getting-started-with-the-rewards-page-builder).

### Active/Inactive

**Active**

If your module is **active** (green dot), this means that any changes you publish will be reflected on your store if the module snippet is embedded

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="br"><p><strong>Inactive<br></strong></p></editor360-custom-block>

If your module is **inactive** (yellow dot), this means that any changes you publish/save will not be reflected on your store. This also means if you had the module snippet embedded and active on your store before, it will not be visible when inactive.

## Advanced customizations

There are some additional customizations that can be made to the module if you are savvy with code. See below the advanced options.

The following attributes can be added to your module's code snippet, just **after your instance ID.**![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/00d6815f-706c-4742-98be-ba1e93e5f25e.png?sv=2026-02-06&spr=https&st=2026-11-08T12%3A05%3A52Z&se=2026-11-08T13%3A05%3A52Z&sr=c&sp=r&sig=CS5m%2F5NX8ZjSCo49MhGJN42qu2Qn%2FffSrnkH5Oz4xDU%3D)

For example, if your module's code snippet looks like this: <div class="yotpo-widget-instance" data-yotpo-instance-id="0000"></div>

**Then add the attribute here:** <div class="yotpo-widget-instance" data-yotpo-instance-id="0000" ***add-attribute-name=value***> </div>

If you want to add multiple attributes, add them one after the other, separated by spaces.

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="strong,code"><details><summary>Advanced Attributes</summary><ul><li><strong>coupons-redemption-headline</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "How to use your points", the text of the headline of the module.</li><li><strong>coupons-redemption-description</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "Redeeming your points is easy! Click Redeem My Points and copy &amp; paste your code at checkout.", the text of the description of what the module does.</li><li><strong>coupons-redemption-rule</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "100 points equals $10.00", the text of the exchange rate of points to dollars.</li><li><strong>redeem-button-text</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "REDEEM", the text of the button to make the redemption coupon</li><li><strong>login-button-text</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "REDEEM MY POINTS", the text of the button that takes you to the login page in case the customer is logged out</li><li><strong>point-balance-text</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "You have {{current_point_balance}} points", the text that presents the point balance of the customer</li><li><strong>coupon-code-copied-message-title</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "COPIED", the text of the message that appears after the coupon code was copied</li><li><strong>coupon-code-copied-message-body</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "Thank you for redeeming your points. Please paste the code at checkout.", the text of the message that appears after a redeemed coupon</li><li><strong>confirmation-step-title</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "ARE YOU SURE?", the text of the message to confirm the redeem action</li><li><strong>confirmation-step-confirm-option</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "YES", the text of the button to confirm the redeem action</li><li><strong>confirmation-step-cancel-option</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "NO", the text of the button to reject &nbsp;the redeem action</li><li><strong>donate-button-text</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "DONATE", the text of the button to make the donation</li><li><strong>donation-success-message-body</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "Thank you for donating {{donation_amount}}$ to {{company_name}}", the text of the message after donation was success</li><li><strong>donation-success-message-title</strong><code>="</code><code><strong>insert your own text here</strong></code><code>!"</code><br>Default - "SUCCESS", the text of the title after a donation was successful</li></ul><details><br></details></details></editor360-custom-block>

---

> [!WARNING]
> Note
> 
> If a customer redeems a coupon or referral code through the Redeem Points On-site module, but does not complete the order, the points used will not be restored, as the code has already been generated.