Skip to main content

How to customize the reward box?

An eye-catching reward box is important in drawing customers' attention and interest in your reward program.

In this article, we will guide you on how to customize the appearance of the reward box in your store All steps are simple and straightforward. Now, let's get started!

1. Points

Select Branding on the left menu > Points to go to the Point page.

Branding colors

At Color Branding setting, you can adjust the color of the floating reward button and review box on your shop frontend

Click on Default Color to use the original color setup in the app


  • Display:
    • You can change the display position of the float button in the storefront: bottom left or bottom right.
    • Icon: You can select the given icons or upload your own image if neccessary.
    • Click Hide on Mobile to hide the float button on Mobile



You can edit labels for point value and currency symbol's position on the live site. In order to edit other labels, go to Translations section.

Please look at your right side to preview the changes before publishing the reward box

Click Default content to reset labels into the default value initially.

Imgur Imgur Imgur Imgur

  • Triggers:
    • Show on all pages: To display reward widget on all pages of your site
    • Show on specific pages: To display reward widget on specific pages


2. Referrals

To show the referrals popup on the frontend, click Branding on the left menu > Referrals.

Branding colors:

  • Branding color: choose the background color for the Get link button.

  • Text color: select the text color for the Get link button.

Referral Popup:

  • How to show: select the popup display type for referrers on the frontend.

    • Auto show refer popup: always show the popup for referrers when visiting your store.

    • Show bubble teaser: show the teaser type on the frontend. When referrers click on the teaser, a refer popup will display.

    • Do not show refer: no type of the refer popup is displayed on the frontend.

  • Title: enter the title for the refer popup.

  • Description: enter the content for the refer popup.

  • Preview: view the refer popup before it is published.

Referral Rewards:

  • Icon: select an icon to show on the popup for referrers.

  • Title: enter the content for the popup.

  • Button: enter the name for the Claim your gift button.

Referral Success Notification

  • Icon: select an icon to show on the popup.

  • Title: enter the content for the popup.

  • Description: enter the content for the popup.

  • Button: enter the name of the Shop now! Button.

3. Signup Widget

Signup Widget will be displayed on Thank you page of customers who have not had an account in the store yet to encourage account signup.

How to configure Signup Widget:

First, access Joy loyalty app > Branding > Signup Widget > enable Thank you page widget.

Enter the widget's content at Translation > After purchase

Edit the widget's content at After purchase and Heading.

  • You can use the variable {{points}} so the points earned will be automatically shown by setup at Place order.

Finally, remmber to click Save to apply the changes.

When the Signup Widget is successfully configured, if customers have ordered but not logged in to the store, the widget will be displayed as in below:

If you encounter any difficulty, please contact our support via

We are happy to help you till your satisfaction!