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
Add to Theme
1. Go to Online Store > Themes in your Shopify admin 2. Click Customize on your active theme 3. Navigate to a template where you want the widget (typically Customers > Account) 4. Click Add section or Add block 5. Find Bonde: Rewards Widget in the app blocks 6. Position it where you'd like it to appear 7. Click Save
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
Add to Theme
1. Go to Online Store > Themes in your Shopify admin 2. Click Customize on your active theme 3. Navigate to a template where you want the widget (typically Customers > Account) 4. Click Add section or Add block 5. Find Bonde: Referral Widget in the app blocks 6. Position it where you'd like it to appear 7. Click Save
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
1. Make sure the Bonde app embed is enabled in your theme 2. Verify you're viewing the correct template 3. Check that the widget block was saved 4. 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
---
Design Mode
Both widgets support Shopify's design mode. When customizing your theme, you'll see a preview of the widget with sample data so you can adjust styling without needing to log in as a customer.
If you need help, reach out via our Intercom chat widget or email us at [email protected].