---
title: "Customizing the Rewards Page Banner Section"
slug: "rewards-page-banner-section"
tags: ["Shopify", "Salesforce Commerce Cloud", "Shopify Plus", "Adobe Commerce (Magento)", "Custom", "BigCommerce", "Loyalty and Referrals"]
updated: 2025-03-04T08:24:59Z
published: 2025-03-04T08:24:59Z
canonical: "support.yotpo.com/rewards-page-banner-section"
---

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

# Customizing the Rewards Page Banner Section

Products

  

Loyalty & Referrals

###### Supported plans

Pro, Premium, Enterprise

###### eCommerce Platform

N/A

The Banner Section is a key part of the [Rewards Page Builder](https://support.yotpo.com/v1/docs/getting-started-with-the-rewards-page-builder), allowing you to add an on-brand image and provide shoppers with an easy way to sign up or log in.

In this guide, you’ll learn how to customize fonts, default texts, logged-in/logged-out states, and more to align with your brand’s look and feel.

## Accessing the Banner Section

To access the banner section in the Rewards Page Builder, follow these steps:

1. In your Yotpo Loyalty & Referrals main menu, go to **Display On-site** > [**Rewards Page**](https://loyalty-app.yotpo.com/rewards-page-builder-widget).
2. Click **Create Rewards Page** or open the page you want to edit.
3. On the **Edit Sections** tab, click **Banner Section**.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/banner-section-path.png?sv=2026-02-06&spr=https&st=2026-10-31T09%3A24%3A00Z&se=2026-10-31T10%3A24%3A00Z&sr=c&sp=r&sig=fItyrz8nTDYR3T%2BL3aoacx5Wj5P7xGxiWmLqXYuB7fc%3D)

## Customizing the Banner

### Layout

Customize the placement of the text and buttons. Choose between 3 layout options: left, right, and centered.

### General Appearance

Here you can customize the fonts, image, and logged-in/logged-out content to match your brand’s voice and tone.

#### General appearance > Fonts & image

**Fonts**

The primary font and secondary font are two fonts that will apply in several places throughout your module. See a guide to [adding a custom font](/v1/docs/adding-a-custom-font-to-a-module).

**Image**

Images must be under 2MB. We support JPG, PNG, SVG, and GIF.

**Recommended size**:

- **Desktop**: 1920px x 600px
- **Mobile**: 400px x 400px

**Advanced CSS editor**

If you'd like to make further customizations to the module, use our embedded CSS editor.

Note

Make sure to use our embedded CSS editor instead of hardcoding directly onto your storefront. We will not update a specific module instance if we detect that it will impact your live module version. Our team can only detect these issues if the CSS is in our editor.

#### General appearance > Logged out state

This is what new or logged-out shoppers will see:

- **Title & Subtitle**: Customize the welcome message.
- **Register Button**: Default text: "Join now." It redirects to your store's signup page.
- **Login Button**: Default text: "Log in." It redirects to your store’s login page.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/banner-section-logged-out-state.png?sv=2026-02-06&spr=https&st=2026-10-31T09%3A24%3A00Z&se=2026-10-31T10%3A24%3A00Z&sr=c&sp=r&sig=fItyrz8nTDYR3T%2BL3aoacx5Wj5P7xGxiWmLqXYuB7fc%3D)

**Where are the redirect URLs taken from?**

- For platforms with **Yotpo’s pre-built integration**, URLs for the login/register pages are pulled automatically.
- For **generic or custom-built platforms**, you can define these redirect URLs in [**Settings > Account Login URL**](https://support.yotpo.com/v1/docs/settings-section-guide#platform-specific-settings).

#### General appearance > Logged in non-member state

> [!WARNING]
> Important
> 
> This setting is only for brands using [Shopify’s new customer accounts](https://support.yotpo.com/docs/using-yotpo-loyalty-referrals-with-shopifys-new-customer-accounts) and whose loyalty program eligibility is set to “**only members who signed up**.”

This is what signed-in shoppers who haven’t joined your loyalty program will see.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/logged-in-non-member-state.png?sv=2026-02-06&spr=https&st=2026-10-31T09%3A24%3A00Z&se=2026-10-31T10%3A24%3A00Z&sr=c&sp=r&sig=fItyrz8nTDYR3T%2BL3aoacx5Wj5P7xGxiWmLqXYuB7fc%3D)

If your program eligibility is set to “only members who signed up,” your customers will have to complete **one more step to join the program** after signing into their store profile. To add a disclaimer and button asking non-members to join your program, go to the **Page Settings tab > Member opt-in**.

#### General appearance > Logged in member state

This is what shoppers will see after they sign up or log in. Update the content to match your brand’s voice and tone.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/logged-in-member-state.png?sv=2026-02-06&spr=https&st=2026-10-31T09%3A24%3A00Z&se=2026-10-31T10%3A24%3A00Z&sr=c&sp=r&sig=fItyrz8nTDYR3T%2BL3aoacx5Wj5P7xGxiWmLqXYuB7fc%3D)