---
title: "Loyalty layouts"
description: "You can customize the Loyalty reward panel and button to fit your store layout."
url: https://docs.ryviu.com/en/articles/194-loyalty-layouts
collection: "Loyalty & Reward Add-on"
updated: 2026-11-10
language: en
---

# Loyalty layouts

You can customize the Loyalty reward panel and button to fit your store layout.

Loyalty Layout allows you to customize how your loyalty program appears across your store—from the launcher button to on-page labels and popups.

You can adjust styles, colors, and placement to match your brand and improve customer experience.

> **Info:** This feature requires the Loyalty Program add-on. All actions are disabled until you upgrade your subscription.

## How to access Loyalty Layout

1.  Go to **Widgets** in your Ryviu dashboard
    
2.  Select **Loyalty Layout**
    
3.  Click **Customize** on the layout you want to edit
    

![](https://staticfiles.gleap.io/ghelparticle/ktkYuHYXP9EteGqbzFyQuXCkK73oveBPFftn3ZfSaeQreDHMyFVefmi5BrJswjyxILMn3Mfb7To.gif)

### Available layouts

You can customize the following components:

-   **Launcher button**
    
-   **Launcher panel**
    
-   **Product points label**
    
-   **Cart points label**
    
-   **Reminder popup**
    

Each layout includes a live preview on the right side. If a layout is not yet added, click **Add now** to enable it.

## Launcher button

> **Info:** Make sure the [**Reward Points** embed](https://docs.ryviu.com/en/articles/197-about-loyalty-add-on.md#heading-4-1-enable-the-reward-point-embed) is enabled to display the Loyalty Launcher Button on your storefront.

Customize the launcher button to match your brand and control how it appears on your store.

![](https://staticfiles.gleap.io/ghelparticle/orjJK0QrQqiNkYtipgSEAMyXqQhsxgRdPEi17TmxBEMtrhJ6UW0q48sQdAFO7HyOr81kwZcfR97.png)

### Settings

-   **Display type:** Choose between _Icon only_, _Text only_, or _Icon & text_
    
-   **Button text:** Set the label and text color
    
-   **Button icon:** Select a default icon or upload a custom one
    
-   **Background:** Choose a solid color or gradient
    
-   **Placement:** Set the position and spacing on your site
    
-   **Style:** Adjust size and shape
    
-   **Visibility:** Control where the button appears
    

Use the **Change status** toggle to enable or disable the launcher button.

## Launcher panel

Customize the loyalty panel that opens when customers click the launcher button.

![](https://staticfiles.gleap.io/ghelparticle/sD4PH3x6yKJJu2vIrqP6GpPBO4ETujz2oowrfimfznPc0CUE0O75953G53BYZaLlwVwPjpKNLYv.png)

### Settings

-   **Primary color:** Main color for the panel and buttons
    
-   **Secondary color:** Text and supporting content color
    
-   **Banner:** Image displayed at the top of the panel
    
-   **Signup CTA banner:** Image shown below the “Become a member” section
    
-   **Typography:** Choose the font family
    
-   **Language:** Select a language or customize text content
    

## **Product Points Label**

Display how many points customers can earn directly on product pages.

> **Info:** This feature works only when **Place order (based on amount spent)** is enabled in Earn Programs

![](https://staticfiles.gleap.io/ghelparticle/XTZd0MLTONIGagmnAuQwBxcD0pZ8fljBFYHCQEpGc5pQgfzH9OFSkuvmZKwSQKchRo3UqzYKqM4.png)

### Customization

-   **Text & colors:** Set label content and styling
    
-   **Icon:** Choose or upload an icon
    
-   **Status:** Activate or deactivate the label
    

### How to enable on product pages

1.  In Shopify admin, go to **Online Store → Themes**
    
2.  Click **Customize**
    
3.  Select a product template
    
4.  Click **Add block / Add section → Apps**
    
5.  Choose **Ryviu Product Points Label**
    
6.  Drag and drop to your desired position
    
7.  Click **Save**
    

![](https://staticfiles.gleap.io/ghelparticle/s4PK5lhxnoapIUKYJtxsUW19e9RLquxG3RQPCDYRv0q5l5FzfymiCHJOL9BR8kNUdQVMdHj3hXo.png)

## **Cart Points Label**

Show how many points customers will earn in the cart.

> **Info:** This label works only when **Place order (based on order)** is enabled.

![](https://staticfiles.gleap.io/ghelparticle/GXN2m60Gt0bJNO2BHnXJrSEWIKN5mOeD0onj2yh7NVLJFB3e7IF40JjfEGvlzsxDvpsJlCxM4d9.png)

### **Customization**

-   **Text & colors**
    
-   **Icon**
    
-   **Status (Activate/Deactivate)**
    

### How to enable on the cart page

1.  In Shopify admin, go to **Online Store → Themes**
    
2.  Click **Customize**
    
3.  Select the **Cart** page
    
4.  Click **Add block / Add section → Apps**
    
5.  Choose **Ryviu Cart Points Label**
    
6.  Drag and drop to your desired position
    
7.  Click **Save**
    

![](https://staticfiles.gleap.io/ghelparticle/qCtOEJSnMJor6lWJmBdCGxvoM6urofktpxG3c5KE4rBKCmpekfclEYtTQeSWHXxuAQQMWvLaj1p.png)

## **Reminder Popup**

Remind customers to use their points before checkout.

![](https://staticfiles.gleap.io/ghelparticle/sDmyHazWAUUPduoCcfaXx4vtCrbrRXlDqLj3pLLCn0EQU3skMmR2evWEZOSQtxjQiqVkA3pgXdb.png)

### Customization

-   Edit the pop-up message
    
-   Preview changes in real time on the right panel
    

* * *

**Need help?**

Get in touch with our support team through [live chat](https://docs.ryviu.com/en/articles/101-support.md) or email at [info@ryviu.com](mailto:info@ryviu.com)**.** We're here to help!