Skip to main content
All CollectionsOnsiteLoyalty Landing Page
Create & Customize a Loyalty Landing Page
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

Rivo's new Landing Page Builder leverages the latest Shopify theme extension best practices, offering complete customization directly within your theme customizer. This user-friendly approach means there's no need to delve into code files. This is our fastest, best-performing, and easiest-to-use page builder yet. Let's dive in!

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


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

Did this answer your question?