Customizing the Rewards Page Banner Section
    • Dark
      Light

    Customizing the Rewards Page Banner Section

    • Dark
      Light

    Article summary

    Products


    Loyalty & Referrals

    Supported plans

    Pro, Premium, Enterprise

    eCommerce Platform

    N/A

    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.

    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.

     


    Was this article helpful?