Configuring the Point Redemption Widget on Product Display Pages

This document outlines the procedure for setting up the Point Redemption Widget on product display pages. This feature allows customers to see how many points they can redeem when purchasing a product, potentially influencing their buying decision. The steps will guide you through the configuration process, from accessing the necessary settings to customizing the widget's appearance and behavior.

Step 1

To begin configuring the Point Redemption Widget, navigate to the left menu and select "Onsite Display." Then, click on "Point Redemption Widget."

Step 2

You will now see the "Point Redeem at PDP Cart" option.

Step 3

Proceed by clicking on "Configure."

Step 4

Upon clicking "Configure," you can view the current status of the feature, indicating whether it is enabled or disabled.

Step 5

Ensure that the feature remains enabled.

Step 6

After a short duration of five minutes, the changes will start to take effect. Ensure that the redemption rule has been configured beforehand.

Step 7

Next, return to Shopify where the widget configuration will continue.

Step 8

Within Shopify, navigate to the "Online Store" section and click on "Themes."

Step 9

Under "Themes," select "Customize." Choose the page where you wish to add the widget. For instance, select the default product page, and position the redemption widget just below the earning widget. Click on "Add," select "Apps," and look for the "Point Redeem Widget."

Step 10

After adding the Point Redemption Widget, click "Save" to finalize the changes. If customization is needed, click the widget again to enter the customization options.

Step 11

Begin customizing the widget by selecting the background color manually, or allow it to automatically use the website's color scheme. You can also adjust the text color accordingly.

Step 12

Decide where the widget should appear; for this setup, select the product page. Adjust the font size based on the brand's identity and add any additional CSS classes if needed.

Step 13

To further customize, add CSS classes. Disable the automatic discount feature, so when customers log in, discounts apply automatically without manual input.

Step 14

If the auto-discount feature is enabled, customers must apply discounts manually. You can also hide the widget for guests, making it visible only to logged-in users. Set the redirect URL as necessary.

Step 15

Users will be redirected to the login page when attempting to check their redeemable points. Input the sign-in page URL here. Control the widget's border visibility as needed.

Step 16

Decide whether to hide or display the widget border. To disable animations, such as the rotating circle, click the corresponding option.

Step 17

For logged-in customers, customize the override text with three different options. Display standard text for logged-out users. Demonstrate how each text looks on the website.

Step 18

For logged-in customers, there are two text customization options. Display the default message, such as "200 saved using your points," visible when a coupon is automatically applied.

Step 19

If the auto-apply checkbox isn't selected, customize the message further. Use custom icons and features to reflect the desired text, and ensure both text options are in place.

Step 20

Adjust the settings as needed to meet your requirements. Thank you for completing the configuration.