> ## 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.

# Loyalty widgets

> Add the Rewards and Referral widgets to your Shopify theme.

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:

* **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.

<Steps>
  <Step title="Open the customer account editor">
    In your Shopify admin, go to **Settings > Customer accounts** and open the customizer for your customer account experience.
  </Step>

  <Step title="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**.
  </Step>

  <Step title="Add the rewards page to your menu">
    Add a menu link to the **Bonde: Rewards & Store Credit** page so customers can reach their full history and expiring credit.
  </Step>
</Steps>

The balance block also links to the rewards page, so customers can tap through from their profile.

<Tip>
  The balance block and page only appear for logged-in customers, and require at least one active reward program. The "expiring soon" note only shows when the customer has credit expiring within 30 days.
</Tip>

***

## 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

<Steps>
  <Step title="Open theme customizer">
    Go to **Online Store > Themes** in your Shopify admin and click **Customize** on your active theme.
  </Step>

  <Step title="Navigate to template">
    Navigate to a template where you want the widget (typically **Customers > Account**).
  </Step>

  <Step title="Add the widget">
    Click **Add section** or **Add block** and find **Bonde: Rewards Widget** in the app blocks.
  </Step>

  <Step title="Position and save">
    Position it where you'd like it to appear and click **Save**.
  </Step>
</Steps>

### 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

<Steps>
  <Step title="Open theme customizer">
    Go to **Online Store > Themes** in your Shopify admin and click **Customize** on your active theme.
  </Step>

  <Step title="Navigate to template">
    Navigate to a template where you want the widget (typically **Customers > Account**).
  </Step>

  <Step title="Add the widget">
    Click **Add section** or **Add block** and find **Bonde: Referral Widget** in the app blocks.
  </Step>

  <Step title="Position and save">
    Position it where you'd like it to appear and click **Save**.
  </Step>
</Steps>

### 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