Customizing the Rewards Page Banner Section

The Banner Section is a key part of 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.

2. Click Create Rewards Page or open the page you want to edit.

3. On the Edit Sections tab, click Banner Section.

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.

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.

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.

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.

General appearance > Logged in non-member state

Important

This setting is only for brands using Shopify’s 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.

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.