Introduction
Encourage customer engagement with your loyalty program by showcasing exactly what customers will earn when they purchase. The Potential Loyalty Points block adds a compelling call-to-action on your product pages that shows customers the specific points they'll earn from their purchase.
The product page is one of the most critical touchpoints in the customer journey. Integrating loyalty into your product pages means your rewards program becomes a seamless part of the shopping experience – resulting in higher engagement, better conversion rates, and increased customer lifetime value. Rivo's Potential Loyalty Points block adds value, creates urgency, and gives customers additional motivation to complete their purchase.
✨ Potential Loyalty Points Theme Extension is available on every plan - including the Free plan
Potential Loyalty Points Video Walkthrough
Here's a quick video walkthrough demo showing you how to install the Potential Loyalty Points theme extension on your store.
How to Add Potential Points Earned to Your Product Pages
Open the Themes page from your Shopify Admin and click Customize Theme.
From the top center dropdown, select Products > Default Product (or any other template you normally use for the product page).
On the left sidebar click Add Block, then search or select Potential Loyalty Points.
Next, you can customize the design, text, and settings of the block.
Now drag and drop the block wherever you want it to show on the product page.
Once you're happy with where it is and how it looks click Save.
📝 Currently, this feature doesn't support product variants - the potential points shown on variants will be for the main product price.
Customization and Design Options
Using the Potential Loyalty Points theme editor, you can customize the appearance, content, and behavior of the app block to match your brand and optimize customer engagement.
Panel Color - Choose the background color of the block to match your store's color scheme. For best results, select a color that creates enough contrast to make the text easily readable.
Padding Size - Adjust the padding size (in pixels) to control the spacing within the block. Smaller padding creates a more compact block, while larger padding gives more breathing room around your content.
Title - Use the
[potential_points]variable to dynamically display the points earned for purchasing a product. For example: "Earn [potential_points] points with this purchase!" or "Get [potential_points] reward points when you order today!"Subtext - Add explanatory text about your loyalty program to drive engagement. Consider linking to your loyalty page or use the deep link
#ba-loyalty-hometo open your loyalty widget. Example: "Join our rewards program and start earning points today!"Show icon - Add a visual element to draw attention to your loyalty message. Select or upload an image/icon to display on the left side of the block. Using your loyalty program logo or a simple rewards icon can enhance recognition.
Only show to logged-out customers - Control the visibility of the block based on customer login status. When checked, the block will only appear to guests, which can be useful for encouraging account creation. When unchecked, all customers will see the potential points they can earn.
📝 We recommend leaving the box Only show to logged-out customers unchecked, as both logged-in and guest customers benefit from seeing potential points they can earn.
Best Practices for Using Potential Loyalty Points
Get the most from your loyalty points display with these proven strategies:
Strategic placement - Position the block near your add-to-cart button or product price to make the potential rewards immediately visible during the purchase decision.
Clear messaging - Use concise, action-oriented language that clearly communicates the benefit. Example: "Complete your purchase and earn [potential_points] points toward your next reward!"
Integration with other loyalty touchpoints - Combine this feature with your Potential Loyalty Points Checkout Extension to create a consistent loyalty message throughout the customer journey.
Highlight customer tier benefits - For VIP customers, the block will automatically display tier-specific point calculations, reinforcing the additional benefits of membership in your loyalty program.
💡 Pro Tip: Create urgency by pairing this block with a limited-time bonus points campaign. Update your title text to something like "LIMITED TIME: Earn [potential_points] points - that's 2X our normal rate!"
Customizing the Potential Loyalty Points Block With CSS
Since this is an app block and Rivo uses Shopify Metafields, you can customize the design with CSS just like you would any other element on your website. Simply add your own styles to the theme's style or .css file in your Shopify code editor. Here are some example styles to enhance your points display:
div#loy-potential-points {
/* Add a subtle border and rounded corners */
border: 1px solid #e2e2e2;
border-radius: 8px;
/* Add a subtle shadow effect */
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
/* Adjust text styling */
font-family: your-custom-font, sans-serif;
}/* Style the heading element */
div#loy-potential-points h3 {
font-weight: 600;
margin-bottom: 5px;
}/* Make points amount stand out */
span.order-placed-potential-points-amount {
font-weight: bold;
color: #f06292; /* Use your brand's accent color */
}
💡 If you're not familiar with using CSS yet, we recommend diving into some fundamentals. Google offers a free resource on learning CSS as well as W3 Schools.
Common Questions
Can I reposition the Potential Loyalty Points block anywhere on the product page?
Yes! Simply drag and drop it to show it anywhere you want using the theme editor.
Can I add this to another product template?
Yes, just select your product template from the top dropdown and then repeat the steps above.
How do I use a custom font with the Potential Loyalty Points block?
You would specify that font within your CSS, and add custom styles following the steps above.
Does this app block slow down my product page?
Absolutely not! Since we're directly integrated with Shopify Metafields, there is no impact on site speed, and this app block will load as quickly as any other text on your product page.
How are the potential points calculated for customers in different VIP tiers?
The block automatically detects a customer's VIP tier (if they're logged in) and calculates potential points based on their specific tier settings. This means VIP customers will see the actual points they'll earn according to their tier's reward structure.
Can I use this feature alongside the Potential Loyalty Points Checkout Extension?
Absolutely! Using both features creates a consistent loyalty message throughout the customer journey. Customers will see potential points on the product page and be reminded of these points during checkout, reinforcing the value of completing their purchase.
Can I hide the block on mobile devices?
While there's no built-in option to hide the block on specific devices, you can use custom CSS media queries to control visibility on different screen sizes.