---
title: "Loyalty Customization Playbook"
slug: "loyalty-customization-playbook"
tags: ["Customization", "Yotpo Widgets", "Widgets"]
updated: 2026-07-24T06:50:07Z
published: 2026-07-24T06:50:07Z
canonical: "support.yotpo.com/loyalty-customization-playbook"
stale: true
---

> ## 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.

# Loyalty Customization Playbook

Products

  

Loyalty & Referrals

###### Supported plans

All plans

###### eCommerce Platform

Shopify, Shopify Plus, BigCommerce, Custom

## Getting Started

Explore our [Loyalty Lookbook](https://drive.google.com/file/d/1XoAPIHeSjNmpBjl_kNm0Msz9sWyRJ9qs/view) with designs built using out-of-the-box settings, no CSS required.

This shows how much flexibility is possible without code, ensuring faster updates and easier maintenance.

Documentation for out-of-the-box customizations for the:

- [Banner module](https://support.yotpo.com/docs/rewards-page-banner-section)
- [My activity module](https://support.yotpo.com/docs/my-activity-on-site-module)
- [Earning points module](https://support.yotpo.com/docs/earning-points-on-site-module)
- [Redeem points module (read-only)](https://support.yotpo.com/docs/redeem-points-on-site-module-read-only)
- [Redeem points module (interactive)](https://support.yotpo.com/docs/redeem-points-on-site-module-interactive)
- [Redeem points module (free product)](https://support.yotpo.com/docs/adding-the-free-products-widget-to-your-store)
- [VIP tiers module](https://support.yotpo.com/docs/vip-tiers-on-site-module)
- [Referral module](https://support.yotpo.com/docs/refer-friends-module)
- [Referral Welcome Popup](https://support.yotpo.com/docs/referral-welcome-popup)
- [Product Points Widget](https://support.yotpo.com/docs/adding-the-product-points-widget-to-your-store)

If you require more advanced design changes, each loyalty module includes a **CSS editor**.

## CSS Edits Cheatsheet

Here are some quick CSS snippets you can use to fine-tune your widgets and bring them even closer to your brand.

### Banner Module

#### Align text center

```css
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-text-container .yotpo-title,
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-description {
    text-align: center;
}

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-action-buttons-wrapper {
    justify-content: center;
    display: flex;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image28.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

#### Hide one of the CTAs

```css
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-customer-logged-out-buttons  .yotpo-login-link,
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-customer-logged-out-buttons-mobile .yotpo-login-link {
   display: none;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image24.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### My Activity Module

#### Rewards History Modal - change text color

```css
.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-grid-row .yotpo-inner-text {
   /* replace #0b5394 with relevant hex code */
    color: #0b5394 !important;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image33.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### VIP Tiers Module

#### Remove border radius from Tiers

```css
.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-container,
.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-current-status,
.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-header {  
     border-radius:0;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image29.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### Earning Points Module

#### Change the background color of the completed tile

```css
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile.yotpo-tile-completed,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-message-already-completed {  
   /* replace #f2f2f2 with relevant hex code */
   background-color:#f2f2f2 !important;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image21.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

#### Switching the order of Points and Action

```css
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile div:not(.yotpo-widget-campaign-widget-icon-container) {
  display:flex;
  flex-direction:column-reverse;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image17.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

#### Remove border radius from tiles

```css
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile-wrapper,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-outer-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-message-tile:not(.yotpo-is-mobile),
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-container-action-tile:not(.yotpo-is-mobile),
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-logged-out-tile {
    border-radius: 0px !important;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image32.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### Points Redemption Module (Interactive)

#### Remove border radius

```css
.yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-container.yotpo-redemption-no-background {
    border-radius: 0;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image5.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### Points Redemption Module (Read-only)

#### Remove border radius

```css
.yotpo-widget-visual-redemption-widget.yotpo-widget-override-css .yotpo-redemption-item {
    border-radius: 0;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image25.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

### Product Redemption Module

#### Add border radius

```css
.yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option {
    border-radius: 10px;
}

.yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
```

#### Result

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image3.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

## Referral

### Dark mode

Use the code below to change the colors of all the borders in case the background of your module is dark.

```css
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-copy-text-button.yotpo-main-copy-link,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-main-share-body-textarea{
   /* replace #fff with relevant hex code */
    border-color: #fff !important;
    color: #fff !important;
}
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-copy-text-button .yotpo-copy-text,
.yotpo-widget-referral-share.yotpo-widget-override-css span.yotpo-share-button-txt,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input::placeholder,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-share-options-headline-text,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input-example {
/* replace #fff with relevant hex code */
    color: #fff !important;
}
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-share-button-icon path {
/* replace #fff with relevant hex code */
    fill: #fff;
}
```

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image16.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A31%3A49Z&se=2026-11-08T12%3A31%3A49Z&sr=c&sp=r&sig=xonBrkLcrRKkruIfkrJZR9g9uRyWEuo%2BaOm4mfAQN4k%3D)

## FAQs

**Q: Can I test changes before publishing them live?**

A: Yes, you can preview edits in the customization interface before pushing them to your site.