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
From the Rivo dashboard, go to Loyalty > Onsite
Select Landing Page and click Create Page
There is now a new Page on your store called Loyalty Program that uses our template
rivo-loyalty-landing-pageTo 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:
From your Shopify admin, go to Online Store > Themes and click Customize on the theme
In the top-center dropdown, go to Pages > rivo-loyalty-landing-page
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