- DarkLight
Customizing the Rewards Page Banner Section
- DarkLight
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:
In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Rewards Page.
Click Create Rewards Page or open the page you want to edit.
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.
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.
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.