How to display Earn points widget on product pages

The Earn points widget allows customers to see how many points they can potentially earn by purchasing a product. This feature is connected to the Place order rule in your Points program. Ensure both the Place order rule and Points program are enabled.

Widget example:

Growave - Earn points widget for product pages

Install widget using Onsite widgets page

  1. In Growave admin, go to the Onsite widgets menu.
  2. In the Rewards tab, find the Earn points widget and click Add widget.

Growave - Onsite widgets - Earn points widget for product pages

  1. You will be redirected to the Shopify page customizer. The Earn points widget will be automatically added in the Product Information section under all other blocks already installed on this page.

Growave - Earn points widget for product pages installed

  1. Drag & drop the Earn points widget under the Price section (recommended), and save changes.

Growave - Earn points widget for product pages - placement

Install widget using Shopify customizer

  1. Go to Shopify Admin → Select a theme → Click Customize.
  2. Select the Default product page → Click Add block.
  3. On the Apps tab, choose the Earn points widget, place it under the Price section, and save changes.

NOTE:

  • If the customer is part of a VIP Tier where points are multiplied, the widget will reflect this by showing the updated number of points when logged in.
  • The widget does not consider Rewardrable amount settings, such as excluding discounts and gift cards or including taxes and shipping, and only works with the Place order rule.

For Legacy themes

To add the widget to your product page, follow these steps:

  1. Open the product-template.liquid file.

  1. Find the <h1> tag and insert the following code right after the closing </h1> tag:
{% if product.available %}

<div class="ssw-html-widget ssw-reward-place-order" data-module="Reward" data-name="PlaceOrder" data-product_id="{{product.id}}"></div>
 {% endif %}

If you have any questions or need help, please contact us at support@growave.io or use the chat icon in the bottom-right corner. We're always here to help 🤗!

Related Articles