> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/customer-account-blocks.md).

# Customer account blocks

{% embed url="<https://dollarlabs.neetorecord.com/watch/c8d6c712c04f95c6091c>" %}

\_This article's section starts at 12:26 in the video.\_

DollarBack ships six blocks for the new customer account pages, so the loyalty program lives where customers already check their orders: a credit balance banner, the referral share UI in three placements, the reward marketplace, and the Google Wallet pass. This page covers placing and customizing each.

## At a glance

| Touchpoint                 | Surface                             | What it shows                                                                       | You can customize                                                                                  |
| -------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Credit balance             | Account page block                  | Balance banner, transaction history with filters                                    | Banner title/description, CTA text, history filter and tag labels                                  |
| Referral blocks (×3)       | Order list / order status / profile | Referral code plus share UI, referral history                                       | Headings, message templates, copy-button and clipboard text                                        |
| Account reward marketplace | Profile block                       | Redeemable rewards, redemption history, balance                                     | Headings, balance label, empty states, reward templates, button labels, success/error messages     |
| Google Wallet pass         | Profile block + phone wallet        | Loyalty card: live balance, member name, tier, QR code, push updates on earn/redeem | Issuer and program name, logo and hero image, background color, earned/redeemed notification texts |

These blocks require Shopify's **new customer accounts**; they don't render in classic/legacy accounts. A seventh, closely related block, **Order status – cashback earned**, shows the credit earned on a specific order and is placed the same way.

## Prerequisites

* New customer accounts enabled in Shopify (**Settings → Customer accounts**).
* A live cashback program; for the marketplace block, active rewards; for the wallet block, the Google Wallet integration; see [Google Wallet passes](/dollarback-store-credit/integrations/google-wallet-passes.md).

## Step 1. Place the blocks in the account editor

1. In Shopify admin, go to **Settings → Checkout** and open the editor, then switch to the customer account pages (or open the customer accounts editor from **Settings → Customer accounts**).
2. On each page, add the DollarBack blocks you want:

| Account page             | Blocks available                                                                            |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| Order list (order index) | **Store Credit Earned**, **Referral Program - Order List**                                  |
| Order status             | **Store Credit Earned**, **Referral Program - Order Status**                                |
| Profile                  | **Referral Program - Profile**, **Reward Marketplace - Profile**, **Wallet Pass - Profile** |

3. Position each block and save.

You don't need all three referral placements; most stores use the profile plus one order placement. All three share the same referral code; the placements meet the customer in different moments.

## Step 2. Customize each block

Each block has an editor under **DollarBack admin → Customization**, in the **Customer account** group. Variables in curly braces fill in per customer.

**Credit balance**

| Field           | Variables  |
| --------------- | ---------- |
| Section heading | (none)     |
| Body message    | `{amount}` |
| Button label    | (none)     |

The block shows the balance banner plus the customer's transaction history with filters; the filter and tag labels are editable strings too.

**Referral – order list / order status / profile** (same fields, three placements)

| Field             | Variables                    |
| ----------------- | ---------------------------- |
| Heading           | `{amount}`, `{discountCode}` |
| Body message      | `{amount}`, `{discountCode}` |
| Copy button label | (none)                       |

**Profile reward marketplace**

| Field                                                         | Variables             |
| ------------------------------------------------------------- | --------------------- |
| Section heading, Balance label, Empty state                   | (none)                |
| Reward template (order discount)                              | `{amount}`, `{value}` |
| Reward template (product discount)                            | `{amount}`, `{value}` |
| Reward template (free shipping)                               | `{amount}`            |
| Minimum-order note                                            | `{minAmount}`         |
| Redeem button, Copy code button                               | (none)                |
| Success message, Generic error message, Error (not signed in) | (none)                |

**Order status – cashback earned**

| Field                   | Variables  |
| ----------------------- | ---------- |
| Cashback earned message | `{amount}` |

**Wallet pass**

The profile block renders a "Save to Google Wallet" entry with a signed link generated per customer. Its appearance and the pass itself (issuer and program name, logo and hero image, background color, and the earned/redeemed push notification texts) are configured in **DollarBack admin → Integrations**, not on the Customization page. See [Google Wallet passes](/dollarback-store-credit/integrations/google-wallet-passes.md).

## Verify it works

1. Sign in to the storefront as a test customer with some credit and open the account pages.
2. Profile: balance and marketplace render, the referral code shows, the wallet entry appears (when the integration is on).
3. Open a past order that earned credit: the earned message and referral block show on the order status page.
4. Redeem a low-cost reward from the marketplace and confirm the success message and the new code.

## Common issues

* Blocks don't appear: the store is on classic customer accounts, or the blocks weren't added in the account editor. See [A widget isn't showing on my store](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md).
* The marketplace is empty: no active rewards, or the balance is below every reward's cost. See [Set up the reward marketplace](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md).
* The wallet entry is missing: the Google Wallet integration isn't configured. See [Google Wallet passes](/dollarback-store-credit/integrations/google-wallet-passes.md).

## Related articles

* [Checkout & thank-you widgets](/dollarback-store-credit/widgets-and-storefront/checkout-and-thank-you-widgets.md)
* [How customers spend their credit](/dollarback-store-credit/spending-store-credit-and-rewards/how-customers-spend-their-credit.md)
* [How customers share referral links](/dollarback-store-credit/referral-program/how-customers-share-referral-links.md)
* [Google Wallet passes](/dollarback-store-credit/integrations/google-wallet-passes.md)