The Rewards Widget and Referral Widget let customers view their store credit balance and share their referral link directly from your storefront. There are two ways to show store credit to customers:Documentation Index
Fetch the complete documentation index at: https://docs.getbonde.com/llms.txt
Use this file to discover all available pages before exploring further.
- Customer account extensions (below): For Shopify’s new customer accounts. A balance block and a standalone rewards page that live inside the customer account experience.
- Theme widgets (further down): App blocks you add to your storefront theme.
Store credit in customer accounts
If you use Shopify’s new customer accounts, Bonde adds two extensions you can place in the customer account experience:- Store credit balance: A block showing the customer’s current store credit balance, plus any amount expiring in the next 30 days in small print.
- Rewards & store credit page: A standalone page showing the total expiring in the next 30 days, followed by the customer’s full store credit history.
Open the customer account editor
In your Shopify admin, go to Settings > Customer accounts and open the customizer for your customer account experience.
Add the balance block
On the Profile page, click Add block and select Bonde: Store Credit Balance. Position it where you’d like and click Save.
Prerequisites
Before installing the widgets:- Enable the Bonde app embed in your theme
- Have at least one active rewards program or referral program
- 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
Open theme customizer
Go to Online Store > Themes in your Shopify admin and click Customize on your active theme.
Navigate to template
Navigate to a template where you want the widget (typically Customers > Account).
Widget settings
In the theme customizer, configure: Display options- Show transaction history
- Show available programs
- Show login prompt for guests
- Text color
- Background color
- Accent color
- Border color
- Border radius
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
Open theme customizer
Go to Online Store > Themes in your Shopify admin and click Customize on your active theme.
Navigate to template
Navigate to a template where you want the widget (typically Customers > Account).
Widget settings
In the theme customizer, configure: Display options- Show login prompt for guests
- Text color
- Background color
- Accent color
- Border color
- Border radius
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
- Use a contrasting background color to draw attention
- Use your brand’s accent color for buttons and highlights
- 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
- “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
- 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
- Ensure the referral program is set to “Active”
- Verify the customer is logged in
- Check that referral codes are being generated
- Clear your browser cache
- Make sure you saved changes in the theme customizer
- Some themes may override certain styles