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