> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.nector.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Configure PDP Points Earn Widget

# Implementing the Points-Earning Widget on Product Pages


${frame}[](https://www.youtube.com/embed/zI3seOUTre4)

### 

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image1_1bvmvsf.jpg)


###### Step 2 - View the Points Earned Widget

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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image2_17zt6g8.jpg)


###### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image3_eodgub.jpg)


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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image4_2gmxhp.jpg)


###### 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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image5_r32hfs.jpg)


###### 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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image6_kqg7am.jpg)


###### 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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image7_p4i1lu.jpg)


###### 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)

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image8_186s175.jpg)


###### Step 9 - Choose the View Type

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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image9_cvv7se.jpg)


###### Step 10 - Display Options

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

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image10_a63ozt.jpg)


###### Step 11 - Customize Colors

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


![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image13_1nt9wln.jpg)


###### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image15_11x13xw.jpg)


###### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image16_1pe4pdg.jpg)


###### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image17_1ogx95s.jpg)


###### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image18_1bqscun.jpg)


###### Step 16 - Preview the Widget on Your Product Page


![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image19_7r98hi.jpg)


###### 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. 💚