Skip to main content

Create & Customize a Loyalty Landing Page

Build a page for your program using Shopify theme extensions

Laurence Leech avatar
Written by Laurence Leech
Updated over a week ago

Introduction

Welcome to Rivo's Landing Page Builder! This powerful tool allows you to create a beautiful, customized loyalty program page that seamlessly integrates with your Shopify theme. With our intuitive builder, you can design an engaging loyalty page that matches your brand's look and feel - all without touching any code. Let's explore how to create and customize your loyalty landing page!

✨ The Loyalty Landing Page is available on the Scale & Plus plans. See pricing β†’
If you are not on either of these plans and would like access, please get in touch with support


Creating the Landing Page

  1. From the Rivo dashboard, go to Loyalty > Onsite

  2. Select Landing Page and click Create Page

  3. There is now a new Page on your store called Loyalty Program that uses our template rivo-loyalty-landing-page

  4. To change the visibility of the page or edit the SEO content, from your Shopify admin go to Online Store > Pages > Loyalty Program.


Understanding Your Landing Page Components

Your loyalty landing page is made up of several key sections, each designed to engage your customers:

  • Hero Banner: Welcome your customers and showcase your loyalty program's value proposition

  • How it Works: Guide customers through your program with easy-to-follow steps

  • Ways to Earn: Display all the exciting ways customers can earn points

  • Ways to Redeem: Showcase your rewards and motivate customers to engage

  • VIP Tiers: Highlight your VIP program tiers and their exclusive benefits

  • Referral Campaign: Promote your referral program and encourage sharing

Customizing the Page

πŸ’‘ Before customization, ensure the Rivo app embed is activated.

To access customization options for the landing page:

  1. From your Shopify admin, go to Online Store > Themes and click Customize on the theme

  2. In the top-center dropdown, go to Pages > rivo-loyalty-landing-page

  3. Initially, the file is empty. Add Rivo app sections to populate the template:

    • In the left-side menu, underneath Template > Rivo Landing Page, click Add section > Apps.

Available Rivo app sections

  • Rivo: Hero Banner

  • Rivo: How it Works

  • Rivo: VIP Tiers

  • Rivo: Ways to Earn

  • Rivo: Ways to Redeem

  • Rivo: Referral Campaign


Customizing the page template

Inside the theme customizer, under Template, click Rivo Landing Page. You'll be presented with the general customization options for the page. These are:

  • General: general styling for the page, including fonts and primary/secondary colors

  • Section Style: Text color and other font customizations for the Rivo sections

  • Card Style: Color, font, and other customization options for the 'Ways to Redeem' and 'Ways to Earn' cards

  • Modal Popup Style: Customization options for the popup modal

  • Advanced: A field for custom CSS.

πŸ—“οΈ Note: All customizations, including custom CSS, added here will affect only the rivo-loyalty-landing-page template.

Hero Banner section

Once the Rivo: Hero banner app section has been added, click on it to see the customization options:

  • Header section: Add an image or color block for the banner

  • Desktop Text Container: Customizations for the text container and banner on the desktop

  • Mobile Text Container: Customizations for the text container and banner on mobile.

How It Works/Activity section

Add the Rivo: How it Works section and click on it to view the customization options:

  • Section Style: Background and text color for this section. Leave blank to use the default page styles

  • Steps: Customizations for the explainer steps. You can upload images for the steps from here.

Ways to Earn section

Add the Rivo: Ways to Earn section and click on it to see the customization options:

  • Section Style: Background and text color for this section. Leave blank to use the default page styles.

Ways to Redeem section

Add the Rivo: Ways to Redeem section and click on it to see the customization options:

  • Section Style: Background and text color for this section. Leave blank to use the default page styles.

VIP Tiers section

Add the Rivo: VIP Tiers section and click it to view customization options:

  • Section Style: Background and text color for this section. Leave blank to use the default page styles

  • VIP Tiers Table: If enabled, customize the styling for the VIP Tiers Table. Check out this guide on adding a VIP Tiers Table.

Referral Campaign section

Add the Rivo: Referral Campaign within your loyalty landing page, and click on it to see the following customization options:

  • Section Style: This setting allows you to define the background color specifically for the Referral Campaign section. If you prefer the landing page's default styles, leave this option blank.

  • Referral Campaign ID:

    • Finding the ID: The unique ID for your referral campaign can be found under the general settings of the referral campaign, specifically within the "Embedded campaign div" section.

    • Default Campaign: If you do not specify an ID, the default, active campaign will be shown.


Common questions

How can I migrate from the Dedicated Page to the Landing Page?

Our Dedicated Page was the first version of the page and it uses an iframe for its functionality. In contrast, our Landing Page represents the latest iteration, leveraging theme extensions and offering direct editing capabilities within the Shopify theme editor.

The migration process to our theme extensions involves a manual transition that typically takes around an hour of work, contingent upon the complexity of the design. However, we highly recommend transitioning to the Landing Page for the following reasons:

  • Compatibility with Shopify's infrastructure

  • Performance optimization

  • Superior user experience

Best Practices

Make the most of your loyalty landing page with these tips:

  • Keep your messaging clear and focused on customer benefits

  • Use consistent branding throughout all sections

  • Highlight your most valuable rewards prominently

  • Ensure your VIP tiers are clearly differentiated

  • Regularly update your content to keep it fresh and relevant

Did this answer your question?