Loyalty widgets

The Rewards Widget and Referral Widget let customers view their store credit balance and share their referral link directly from your storefront.

​

Prerequisites

Before installing the widgets:

1. Enable the Bonde app embed in your theme
2. Have at least one active rewards program or referral program
3. Customers must be able to log in (customer accounts enabled)

---

​

Installing the rewards widget

The Rewards Widget displays:

• Customer’s store credit balance
• Recent rewards earned
• Available reward programs they can earn from

​

Widget settings

In the theme customizer, configure: Display options

• Show transaction history
• Show available programs
• Show login prompt for guests

Styling

• Text color
• Background color
• Accent color
• Border color
• Border radius

Guest message: Customize the message shown to customers who aren’t logged in.

---

​

Installing the referral widget

The Referral Widget displays:

• Customer’s unique referral link
• Share buttons (copy, Facebook, Twitter, email, native share)
• Referral statistics (clicks, conversions, earnings)
• Reward amount they’ll earn per referral

​

Widget settings

In the theme customizer, configure: Display options

• Show login prompt for guests

Styling

• Text color
• Background color
• Accent color
• Border color
• Border radius

Guest message: Customize the title and message shown to customers who aren’t logged in.

---

​

Recommended placement

​

Customer account page

The most common placement is on the customer account page. This makes rewards and referral information easily accessible to logged-in customers.

​

Dedicated rewards page

Create a dedicated page for your loyalty program and add both widgets there. Link to this page from your navigation.

​

Post-purchase

Consider adding widgets to the order confirmation page to encourage customers to share while they’re excited about their purchase.

---

​

Styling tips

Both widgets support full color customization to match your theme: Match your theme

• Use your theme’s primary colors for accent color
• Match background and text colors to your page
• Keep border radius consistent with your theme’s style

Make it stand out

• Use a contrasting background color to draw attention
• Use your brand’s accent color for buttons and highlights

Keep it clean

• White or light background often works best
• Dark text ensures readability
• Subtle borders help define the widget area

---

​

Customer experience

​

Logged-in customers

Rewards Widget shows:

• “You have $X.XX in store credit” with balance
• “Recent Rewards” section listing last 5 rewards
• “Ways to Earn” section showing active reward programs
• Expandable details with “View Details” button

Referral Widget shows:

• “Share & Earn” header with reward amount
• Unique referral URL with copy button
• Share buttons for social media and email
• Stats: clicks, conversions, and total earned

​

Guest visitors

Both widgets show a customizable message prompting visitors to log in or create an account to access rewards and referrals.

---

​

Troubleshooting

Widget not appearing?

• Make sure the Bonde app embed is enabled in your theme
• Verify you’re viewing the correct template
• Check that the widget block was saved
• Try previewing the theme and logging in as a customer

Balance shows $0?

• Customer may not have earned any rewards yet
• Rewards are only issued after orders are processed
• Check that reward programs are set to “Active” status

Referral link not working?

• Ensure the referral program is set to “Active”
• Verify the customer is logged in
• Check that referral codes are being generated

Styling not applying?

• Clear your browser cache
• Make sure you saved changes in the theme customizer
• Some themes may override certain styles