---
title: "Redeem Points On-site Module (Read-only)"
slug: "redeem-points-on-site-module-read-only"
updated: 2024-04-02T09:43:05Z
published: 2024-04-02T09:43:05Z
canonical: "support.yotpo.com/redeem-points-on-site-module-read-only"
---
> ## 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 (Read-only)
Products
Loyalty & Referrals
###### Supported plans
Premium, Enterprise
###### eCommerce Platform
Shopify, Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento), Custom
The Redeem Points Read-only Module/Section is an easy way to display some reward options onsite. You can deploy a new module in minutes, with no development required. The Read-Only Module/Section is meant to be used alongside a [Checkout Module](/v1/docs/checkout-on-site-module#creating-a-new-module). The Read-Only module is a way to show new and existing customers what rewards await them at checkout.
In this article find out how to access, customize, and deploy the Read-only 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 setting up your Read-only 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)
- See the [Guide to Launching your Loyalty & Referrals Program On-site](/v1/docs/guide-to-launching-your-loyalty-referrals-program-on-site)
## Accessing the editor
**Accessing via the Rewards Page**
To access and edit the section via the [Rewards Page](https://support.yotpo.com/docs/creating-a-rewards-page), 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 (Read -only s**ection).
4. Proceed below to the next step, "Customize settings".
**Accessing as a module**
To access and edit as a module, 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 "**Read-Only**" section.
3. Click **Edit** on the instance you wish to edit or click **"+ Create new"**
## Customizing the module
There are three sections in the module editor:
### 1. Layout
**Configure layout** The dropdown menu will let you choose between 3 layout options.
**Reward tiles** Select or add tiles to display as many different reward options as you wish.
### 2. General appearance
These are the settings that are applied to **all tiles at once.** To edit individual tiles, go to [Customize tiles.](/v1/docs/earning-points-on-site-widget#3-customize-tiles)
#### General appearance > Fonts & general text
**Background color** Choose whether you want to add a background color or have the widget be transparent.
**Fonts** The primary and secondary fonts are two fonts that will apply in several places throughout your module.
- **Choose primary font**
The font you choose here will apply to and **Module title, Exchange rate,** and **Discount amount**
**Primary font**
- **Choose secondary font**
The secondary font applies to the **Module Subtitle** and **Points**
**Secondary font**
**Module title**
- Title text as you want it to appear
- Title text size
- Title text color
**Module subtitle**
- Subtitle text as you want it to appear
- Subtitle text size
- Subtitle text color
**Exchange rate**
- Exchange rate text
- Exchange rate text size
- Exchange rate text color
**Line color** Choose the color of the lines that appear on the top and bottom of your exchange rate
#### 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 Read-only Module CSS, use this class name before the class you want to override:
```css
.yotpo-visual-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)
Please note:
Please 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.
### 3. Customize tiles
#### Customize tiles > Settings
**Discount amount** Discount amount (usually in the form of currency, such as $10.00)
- Amount text size
- Amount text color
**Points**
This is the number of points needed to claim the discount amount you set above
- Points size
- Points color
#### Apply Design to All Tiles
This is a quick and easy way to apply changes to your tile design. Clicking **Apply Design to All Tile**s will take the following design settings and apply them across all the tiles:
- Amount text size and color
- Points size & color
## 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#4-publish-to-site).
#### 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
**Inactive**
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
Some additional customizations 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.**
For example, if your module's code snippet looks like this:
**Then add the attribute here:**
If you want to add multiple attributes, add them one after the other, separated by spaces.
**Advanced attributes**
- **visual-redemption-headline**
Default - "How to use your points", the text of the headline of the module.
- **visual-redemption-description**
Default - "Redeeming your points is easy! Click Redeem My Points and copy & paste your code at checkout.", the text of the description of what this module does.
- **visual-redemption-rule**
Default - "100 points equals $10.00", the text of the exchange rate of points to dollars.