Skip to main content

Adding points preview app block to the product details page

G
Written by Glenn Lee
Updated this week

Engagement is critical to the success of your loyalty program. You need to ensure that each touch point is optimized for the desired outcomes, from members. Points Preview is a new app block, that shows the points (or other reward currency) that can be earned, by purchasing a particular product. This block is added to the product details page, providing a clear indication of the points on offer and motivating members to take action!

In this article, you'll learn about:

Adding the points preview app block

Follow these steps to add the points preview app block, to your product details page:

1. Go to Shopify Admin > Sales Channels > Online Store > Themes. Select the Customize button on the right.

2. Go to the drop down menu at the center of the page and select Products. You may have more than one product details page template, so select the one that is relevant.

3. In the Template > Product information section, select where you would like to add the app block and select +.

πŸ’‘ While you can add the points preview app block anywhere within the product details page template, we recommend adding it to the Product information section, so that it is easy to access.

4. Go to the Apps section and search for Loyalty Points Preview. Select this.

5. Reposition the app block, as required, within the Product information section. Once you are satisfied with the position of the app block, select Save and exit the theme customizer.

Configuring the points preview app block

To configure the look and feel of the points preview app block, follow these steps

1. Go to Okendo Admin > Loyalty > On-site Displays > Loyalty Points Preview

2. You can configure a number of elements within the app block:

  • Text: Select this option, to customize the text displayed in the points preview app block. Note you can add and remove the {{ points }} and {{ programName }} variables, to further personalize the content in this app block.

  • Background: Select this option to customize the background color and border, enabling it to stand out or blend in to the product details page.

  • Icon: Select this option to add an icon. The icon is added to the left had side of the app block. You can also modify the color of the icon.

  • Text colors: Add colors for text and links. Otherwise select Inherit Text Colors From Page to inherit colors from your online store's theme.

You can also view changes, in the preview pane.

3. Once you are satisfied with the look and feel of the app block, select Save Changes.

Considerations when determining the value to display

The points preview app block will consider the following factors, when determining the value to display:

  • Member enrolment: Enrolled members are allocated to tiers and may be awarded more points (or other reward currency) per order. Unenrolled (pending) members are not allocated to tiers and receive the base values only.

  • The enrolled member's tier and rule variations: Points on orders, may differ for members on different tiers, due to rule variations. For example, enrolled members on a bronze tier may receive 1 point for each dollar spent, but gold tier members may receive 3 points for each dollar spent.

  • Active promotions: Any active promotions may also alter the value displayed.

  • Product variants: The app block will consider any differences in price, due to product variants.

  • Selling plans: The app block will consider any price differences for once-off orders versus orders by subscription.

⚠️ The app block will not take into account any separate custom earn rules on orders.

If you have any specific questions or need further assistance, feel free to reach out to our support team.

Did this answer your question?