All Collections
Integrations & Apps
Shopify Integration
Potential Loyalty Points Theme Extension Block
Potential Loyalty Points Theme Extension Block

Encourage activity in your Loyalty Program by adding the Potential Loyalty Points Theme Extension block to your product pages

Stuart Chaney avatar
Written by Stuart Chaney
Updated over a week ago

Introduction

Encourage activity on your loyalty program by adding a simple call to action on your product page that shows the Potential Loyalty Points.

The product page is the most important part of the customer journey. Integrating loyalty into your product pages means Loyalty is integrated into more places – resulting in higher engagement and sales. Rivo's Potential Loyalty Points app block adds value, is non-obtrusive, and gives customers another reason and motivation to add to the cart.

✨ 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

  1. Open the Themes page from your Shopify Admin and click Customize Theme.

  2. From the top center dropdown, select Products > Default Product (or any other template you normally use for the product page).

  3. On the left sidebar click Add Block, then search or select Potential Loyalty Points.

  4. Next, you can customize the design, text, and settings of the block.

  5. Now drag and drop the block wherever you want it to show on the product page.

  6. 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 padding, color, text, and settings of the app block.

  • Panel Color - Choose the background color of the Potential Loyalty Points Block

  • Padding Size - Adjust the padding size of the block in pixels

  • Title - Use the [potential_points] variable to show points earned for purchasing a product

  • Subtext - Add in some explainer text about your loyalty program, and link to your loyalty page or open the widget using the deep link #ba-loyalty-home

  • Show icon - Check the box and select or upload an image/icon to show on the left side of the block. Uncheck the box to hide the icon

  • Only show to logged-out customers - Check this box if you only want the Potential Loyalty Points to be visible to customers who are logged out (Guests). Leave this box unchecked if you want this visible to all customers, both logged in and logged out.

πŸ“ We recommend leaving the box Only show to logged-out customers unchecked.


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 style or .css file in your Shopify code editor. Here's an example:

div#loy-potential-points {
/* Add your styles here */
}

πŸ’‘ 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.

Did this answer your question?