Introduction
Rivo offers two ways to display your loyalty program on your Shopify store pages. Choose the method that works best for your store setup and technical comfort level.
💡 We recommend using the Theme App Extension method for the easiest setup and best customization options
Method 1: Theme App Extension (Recommended)
The easiest and most flexible way to add your loyalty page is through Shopify's theme app extensions. This method provides native integration with your theme and doesn't require code editing.
Requirements
A Rivo plan that includes the Landing Page feature
Shopify Online Store 2.0 compatible theme
Theme app extensions enabled in your store
Setup Steps
Enable the Landing Page feature in your Rivo dashboard under "Loyalty Landing Page Settings"
Go to your Shopify admin and navigate to Online Store > Themes
Click "Customize" on your current theme
Navigate to the page where you want to add your loyalty program (or create a new page)
Click "Add section" and look for "Rivo Landing Page" in the Apps section
Add the section and customize the appearance using the theme editor
Save your changes and preview your page
Customization Options
With the theme app extension, you can customize:
Colors and fonts to match your brand
Card layouts (stacked or horizontal)
Section spacing and sizing
VIP tier display options
Modal popup styling
Method 2: Legacy Code Embedding
If you're using an older theme or prefer manual code integration, you can embed the loyalty page using HTML code.
✨ This method requires basic HTML knowledge
Requirements
Basic HTML/Liquid template knowledge
Access to edit your theme code
A published Dedicated Page in your Rivo dashboard
Setup Steps
Create your Dedicated Page in the Rivo dashboard if you haven't already
From your Shopify admin, go to Online Store > Themes
Click the three-dot button > Edit code
Find the template file where you want to embed the page (e.g., page.liquid, index.liquid)
Copy and paste the snippet code below into the preferred line
<div id="rivo-page-wrapper" style="min-height:800px;"></div>
Save changes and check the result on your online store
⚠️ Important: Make sure to place this code within the main content area of your template, not in the header or footer sections.
Plan Requirements & Access
The Landing Page feature (Method 1) requires a Rivo plan that includes page builder access. If you don't see the Landing Page option in your dashboard, you may need to upgrade your plan.
The legacy embedding method (Method 2) is available on all Rivo plans, but offers less customization flexibility.
Troubleshooting & Common Issues
Theme App Extension Not Appearing
Check your theme compatibility: Ensure you're using a Shopify 2.0 theme that supports app extensions
Verify app installation: Make sure the Rivo app is properly installed and connected to your store
Refresh the theme editor: Sometimes you need to refresh the page or re-enter the theme customizer
Legacy Code Not Working
Check the div placement: Ensure the code is placed in the main content area, not header/footer
Verify your Dedicated Page is published: The page must be active in your Rivo dashboard
Clear browser cache: Try viewing the page in an incognito/private browser window
Check for JavaScript conflicts: Other apps or custom code might interfere with the loyalty page loading
Styling Issues
Theme CSS conflicts: Your theme's CSS might override Rivo's styling
Mobile responsiveness: Test the page on different screen sizes to ensure proper display
Color contrast: Ensure text is readable against your chosen background colors
Multiple Page Embedding
You can display your loyalty program on multiple pages throughout your store:
Dedicated loyalty page: Create a standalone page (e.g., /pages/loyalty)
Homepage integration: Add a section to your homepage
Account page: Include it in customer account areas
Product pages: Show earning opportunities on product pages
Cart/checkout pages: Display points that will be earned
📝 Note: While you can embed the same loyalty content on multiple pages, you can only design one loyalty page configuration in your Rivo dashboard. The content will be consistent across all embedded locations.
Best Practices
Choose the right location: Place your loyalty page where customers naturally look for rewards information
Test thoroughly: Check the page on desktop, mobile, and tablet devices
Monitor performance: Use Rivo's analytics to see how customers interact with your loyalty page
Keep it updated: Regularly review and update your loyalty page content and design
Consider user flow: Make sure customers can easily navigate to and from your loyalty page
Frequently Asked Questions
Can I have multiple different loyalty pages?
No, you can only design one loyalty page configuration in Rivo, but you can embed this same page in multiple locations throughout your store.
Do I need coding knowledge?
For the theme app extension method (recommended), no coding knowledge is required. For the legacy embedding method, you'll need basic HTML understanding.
Will this slow down my store?
Rivo's loyalty pages are optimized for performance and should not significantly impact your store's loading speed.
Can I customize the appearance?
Yes, both methods offer customization options. The theme app extension provides more flexibility through the theme editor, while the legacy method allows for custom CSS modifications.
What if my theme doesn't support app extensions?
If you're using an older theme that doesn't support Shopify 2.0 app extensions, you can use the legacy code embedding method or consider upgrading to a newer theme.
Can customers access the loyalty page without logging in?
Yes, visitors can view the loyalty page to learn about your program, but they'll need to create an account or log in to participate and earn points.
I inserted the snippet code but I can't see the Page. Why?
Make sure your Dedicated Page is enabled by going to Onsite > Dedicated Page in your Rivo dashboard.
Can I add the code to a page within my page builder?
The legacy Dedicated Page can only be rendered if you insert our snippet code into the Shopify theme code directly. However, the new Landing Page method works with theme app extensions and can be added through the theme customizer.
🆘 Need additional help? Contact our support team if you encounter any issues during setup or have questions about customizing your loyalty page.