> 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/checkout-and-thank-you-widgets.md).

# Checkout & thank-you widgets

{% hint style="info" %}
**Plan:** the two checkout blocks require **Shopify Plus** (Shopify only allows checkout customization on Plus). The two thank-you page blocks work on all Shopify plans.
{% endhint %}

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

\_This article's section starts at 11:06 in the video.\_

Four blocks cover the purchase moment: two in checkout (what this order earns, and a chance to redeem rewards) and two on the thank-you page (confirmation of the credit earned, and a referral invite). When you're done here, all four are placed and speaking your brand's language.

## At a glance

| Touchpoint                  | Surface               | What it shows                                                                              | You can customize                                                                                            |
| --------------------------- | --------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| Checkout cashback           | Checkout block (Plus) | Cashback the order will earn; order-goal progress; discount reward notices                 | Message templates per state                                                                                  |
| Checkout reward marketplace | Checkout block (Plus) | Balance plus redeemable rewards (order / product / shipping); redeem and copy-code actions | Heading, balance label, per-reward-type templates, minimum-order note, button labels, success/error messages |
| Thank-you cashback          | Thank-you block       | Credit earned on the order just placed, expiry note, goal-earned message                   | Title, heading, body/expiry/loading messages                                                                 |
| Thank-you referral          | Thank-you block       | Referral invite with copyable link, in separate guest and logged-in states                 | Headings, body copy, button and clipboard text                                                               |

## Prerequisites

* A live cashback program; for the marketplace block, at least one active reward; see [Set up the reward marketplace](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md).
* For the checkout blocks: a Shopify Plus store.

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

1. In Shopify admin, go to **Settings → Checkout** and open the checkout editor for your published checkout profile.
2. On the **Checkout** page of the editor, add the app blocks **Checkout Cashback Banner** and **Checkout Reward Marketplace** where you want them (the order summary column is a common spot).
3. Switch the editor's page selector to the **Thank you** page and add **Thank You Cashback** and **Thank You Referral**.
4. Save. On non-Plus stores, skip step 2; only the thank-you page accepts blocks.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-3673db038896917584b31b1776b37c5dc738b232%2Fdb-checkout-editor-cashback-banner-annotated.png?alt=media" alt="The Shopify checkout editor with the Checkout Cashback Banner block listed in the Order summary section of the sidebar and the checkout preview on the right."><figcaption><p>In the checkout editor, add Checkout Cashback Banner where you want it. Then switch the page selector to Thank you for the thank-you blocks.</p></figcaption></figure>

## Step 2. Customize each block's messages

Each block has its own editor under **DollarBack admin → Customize**, in the **Checkout** group. Variables in curly braces fill in per order.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-04c9496e07457ce2c4efc90aa73f44f92cf13238%2Fdb-customization-checkout-group-annotated.png?alt=media" alt="The Checkout group on the Customize widgets page with cards for Cashback at checkout, Thank you page cashback, Thank you page referral and Checkout reward marketplace, two of them marked Only available on Shopify Plus."><figcaption><p>The Checkout group has one card per block. The badge tells you whether that block is placed in your checkout.</p></figcaption></figure>

**Cashback at checkout**

| Field                           | Variables                                       |
| ------------------------------- | ----------------------------------------------- |
| Cashback earned message         | `{amount}`                                      |
| Order-goal progress message     | `{remainingAmount}`, `{nextAmount}`             |
| Order-goal tier reached message | `{amount}`, `{remainingAmount}`, `{nextAmount}` |
| Order-goal max reached message  | `{amount}`                                      |

The goal messages give checkout a last-second upsell: "Add {remainingAmount} more to earn {nextAmount} back" can still change the order.

**Checkout reward marketplace**

| Field                                  | Variables             |
| -------------------------------------- | --------------------- |
| Section heading, Balance label         | (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 | (none)                |

Redeeming here mints the discount code on the spot; the customer copies it and applies it in the same checkout.

**Thank you page cashback**

| Field              | Variables     |
| ------------------ | ------------- |
| Confirmation title | `{amount}`    |
| Cashback heading   | `{amount}`    |
| Expiration message | `{expiresAt}` |
| Loading text       | (none)        |

**Thank you page referral**

| Field                                                           | Variables                 |
| --------------------------------------------------------------- | ------------------------- |
| Referral heading                                                | (none)                    |
| Referral message                                                | `{amount}`                |
| Copy button label                                               | (none)                    |
| Logged-out title / Logged-out message / Logged-out button label | `{amount}` in the message |

The referral block has two states: signed-in customers see their code and a copy button; guests see the logged-out copy prompting them to create an account first.

## Verify it works

1. Place a test order as a signed-in customer with some credit.
2. In checkout, confirm the cashback banner shows the right amount and the marketplace lists your rewards.
3. On the thank-you page, confirm the earned amount, the expiry note, and the referral invite with a copyable code.

## Common issues

* The checkout blocks aren't available in the editor: the store isn't on Shopify Plus, or the blocks weren't added to the published checkout profile.
* The marketplace shows no rewards: no reward is active, or the customer's 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).
* A redeemed code won't apply: check the store-wide combination rules. See [A reward discount code isn't working](/dollarback-store-credit/troubleshooting-and-faq/reward-discount-code-isnt-working.md).
* The cashback amount at checkout differs from what lands: discounts and caps apply at calculation. See [How cashback is calculated](/dollarback-store-credit/earning-cashback-programs/how-cashback-is-calculated.md).

## Related articles

* [Customer account blocks](/dollarback-store-credit/widgets-and-storefront/customer-account-blocks.md)
* [Set up the reward marketplace](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md)
* [Discount combination rules](/dollarback-store-credit/spending-store-credit-and-rewards/discount-combination-rules.md)
* [How customers share referral links](/dollarback-store-credit/referral-program/how-customers-share-referral-links.md)