Implementing the Points-Earning Widget on Product Pages

This document provides a comprehensive overview of the process to add and customize a points-earning widget on your Shopify product pages. The widget is designed to increase customer engagement by allowing customers to earn points on purchases, which can be redeemed for rewards. Follow these steps to seamlessly integrate and tailor the widget to fit your store's aesthetic and functionality.

Step 1

To begin, access the Onsite Display section and navigate to Product Page Widgets. Here, we will learn how to add a points-earning widget to enhance customer interaction on your product page.

Step 2

Upon accessing the page, you will see the Points Earned widget prominently displayed.

Step 3

To configure the widget, return to Shopify. You have the option to click on Configure here and add it directly on Shopify.

Step 4

This action will redirect you to the appropriate configuration page.

Step 5

You can manually configure settings by navigating to Themes under Online Stores and clicking on Customize. After customization, select the Product Page and choose the default product you wish to modify. Decide on the exact location for the widget addition.

Step 6

Navigate to the section below the price, add a block by clicking on it, go to Apps, search for the earning widget, and click to add it.

Step 7

The widget "Earn up to twenty-four points on this purchase" will be added. For further custom settings, click on Point Earning Widget, or simply click Save. The changes will be reflected on your website.

Step 8

Proceed to additional settings by clicking on the widget. Here, you can see the pages where the widget is enabled and set the Redirect URL for the "Click Here to Learn More" button.

Step 9

Currently, set the URL to your rewards page for convenience. You can choose the View Type: full, default, or compact. Click to see the differences.

Step 10

Choose between displaying just the amount or keeping the default view. For now, we will keep it as default.

Step 11

You can also adjust the background and text color. By default, these are fetched from your website’s theme. Modify them if desired by selecting options here.

Step 12

The font size is standard but can be adjusted as needed. Use additional CSS classes for advanced customization of the widget's appearance.

Step 13

To override the earning amount, enter the desired multiple or additional feature. For instance, entering "10" reflects the earning amount as ten times the existing value. Click Save to apply changes.

Step 14

Reverting back, you can set the value to zero if needed. Similarly, customize the text override as required.

Step 15

The text "Earn up to points on this purchase" can be modified according to your preference. Utilize this custom feature to personalize the product earning widget.

Step 16

Finally, preview how the widget appears on your website. Your customers will be able to view the message "Earn up to 299 points on this purchase."