Implementing the Points-Earning Widget on Product Pages

Introduction

The Points-Earning Widget allows shoppers to instantly see how many loyalty points they can earn for purchasing a product—boosting engagement and nudging customers toward conversion.
This guide walks you step-by-step through adding the widget to your Shopify product pages, customizing its appearance, and tailoring it to match your theme and brand personality.

Step 1 - Access Product Page Widgets

Go to the Onsite Display section and click on Product Page Widgets.
This is where you'll add the Points-Earning Widget to your product pages.

Step 2 - View the Points Earned Widget

On the configuration page, you will see the Points Earned Widget displayed prominently.

Step 3 - Open Shopify Configuration

To configure the widget, return to Shopify.
You may click Configure directly from the Nector dashboard to open the widget inside Shopify.

Step 4 - Go to Shopify Settings
Clicking Configure will redirect you to the correct widget configuration area within Shopify.

Step 5 - Add the Widget via Theme Editor

You can also configure things manually:

1. Go to Online Store → Themes
2. Click Customize
3. Select Product Page
4. Choose a default product for editing
5. Decide where the widget should appear

Step 6 - Insert the Widget Block

Under the product price section:

1. Click Add Block
2. Choose Apps
3. Search for the earning widget
4. Click to add it to the page

Step 7 - Widget Added Successfully

You’ll now see the widget appear with a message like:
“Earn up to twenty-four points on this purchase.”
To customize further, click Point Earning Widget, or simply click Save to apply and preview changes

Step 8 - Access Additional Settings

Click the widget block to open more settings:
• Enable/disable the widget on specific pages
• Set the Redirect URL for “Click Here to Learn More” (usually your Rewards Page)

Step 9 - Choose the View Type

Try different widget view types:
• Full
• Default
• Compact
Select each one to preview how they look.

Step 10 - Display Options

Choose whether to show:
• Only the points amount
• The default full design
For now, keep it set to Default.

Step 11 - Customize Colors

You can modify colors:
• Background color
• Text color
By default, these match your Shopify theme but can be overridden here.

Step 12 - Adjust Font Size & Add CSS

You can:
• Adjust font size
• Add custom CSS classes for advanced customization
This is useful for aligning widget styles with unique brand layouts.

Step 13 - Override the Points Amount

To manually override the earning amount, enter a multiple.
Example:
Entering 10 displays the earnings as 10× the normal amount.
Click Save to apply.

Step 14 - Reset Override Values

You may revert overrides by setting the value to blank.
You can also customize the text override field as needed.

Step 15 - Customize Widget Text

Modify the message “Earn up to points on this purchase” to match your brand tone.
This helps fully personalize the product page experience.

Step 16 - Preview the Widget on Your Product Page

Wrap-Up

You’ve now learned how to:
✅ Add the points-earning widget to Shopify product pages
✅ Configure placement, redirects, and display modes
✅ Match widget styling to your brand
✅ Override and customize points & messaging
✅ Preview how the widget looks to customers
With your Points-Earning Widget live, your customers now get instant visibility into the rewards they can earn—boosting motivation, engagement, and conversion. 💚

Updated on: 16/12/2025