> 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                                                                        | Offers title, message templates per state, scope phrase                                                                                    |
| Checkout reward marketplace | Checkout block (Plus), signed-in customers only | Balance plus your marketplace rewards; redeem, **Apply to cart** and copy-code actions; a shortfall note on rewards the customer can't afford yet | Heading, collapsed heading, maximum offers, balance and cost labels, shortfall note, button labels, success/error messages, reward history |
| Thank-you cashback          | Thank-you block                                 | Credit earned on the order just placed, expiry note, discount-code rewards earned                                                                 | Offers title, title, cashback/expiry/loading messages, discount reward messages                                                            |
| Thank-you referral          | Thank-you block                                 | Referral invite with a **Copy Code** button for signed-in customers; a **Login to share** prompt for guests                                       | Heading, body message, button and clipboard text, image (per state)                                                                        |

## 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                                                                        |
| ------------------------------------ | -------------------------------------------------------------------------------- |
| Offers title                         | (none; the heading when the order earns more than one reward)                    |
| Cashback earned message              | `{amount}`                                                                       |
| Order-goal max reached message       | `{amount}`                                                                       |
| Order-goal progress message          | `{remainingAmount}`, `{nextAmount}`                                              |
| Scope phrase (for {appliesTo})       | `{scope}`                                                                        |
| Earned reward                        | `{reward}`                                                                       |
| Earned reward — not yet unlocked     | `{remaining}`, `{required}`, `{inCart}`, `{reward}`, `{appliesTo}`, `{earnRule}` |
| In-cart progress note (for {inCart}) | `{count}`                                                                        |
| Earned reward — conditions           | `{conditions}`                                                                   |
| Redeem terms label                   | (none)                                                                           |
| Discount goal: progress message      | `{remainingAmount}`, `{nextAmount}`, `{appliesTo}`                               |
| Discount goal: max reached message   | `{amount}`                                                                       |

The two **Discount goal** messages replace the cashback goal messages when an order-goal program pays a discount code instead of store credit.

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

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-8f6e4fa77b227e9e8a875d57882ecc11bc17a4ed%2Fdb-cx-checkout-cashback-banner.png?alt=media" alt="The checkout order summary with a green banner, You will earn $2.50 as cashback on this order!, above four items, the discount code field, and the subtotal, shipping and total." width="470"><figcaption><p>In checkout, your customers see what the order will earn, above the order summary.</p></figcaption></figure>

**Checkout reward marketplace**

| Field                                                 | Variables                                                         |
| ----------------------------------------------------- | ----------------------------------------------------------------- |
| Section heading                                       | (none)                                                            |
| Collapsible (collapsed by default), Collapsed heading | `{count}` in the collapsed heading                                |
| Maximum offers                                        | (a number: how many rewards show, top of your reward order first) |
| Balance label                                         | (none)                                                            |
| Cost label                                            | `{amount}`                                                        |
| Conditions heading                                    | (none)                                                            |
| Expiry label                                          | `{days}`                                                          |
| Shortfall note                                        | `{amount}` (the credit still needed)                              |
| Redeem button, Copy code button                       | (none)                                                            |
| Success message, Generic error message                | (none)                                                            |
| Reward history button, Reward history heading         | (none)                                                            |

The reward descriptions and their conditions ("20% off your next order", "you spend at least $50 on Skincare") aren't fields here: they come from the shared **Reward marketplace text**, so they read the same in checkout, the customer account, the widget and the loyalty page. See [Word your rewards](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md#word-your-rewards-reward-marketplace-text).

Redeeming here mints the discount code on the spot. The customer taps **Apply to cart** to add it to the same checkout, or **Copy code** to keep it. If the code can't be applied automatically, the block says so and asks the customer to copy the code and add it at checkout.

The block shows only to signed-in customers. A guest at checkout sees nothing from it. A reward the customer can't afford yet still shows, with its **Redeem** button turned off and the **Shortfall note** ("Add {amount} more to redeem" by default).

**Thank you page cashback**

| Field                              | Variables                                                      |
| ---------------------------------- | -------------------------------------------------------------- |
| Offers title                       | (none; the heading when the order earned more than one reward) |
| Title                              | `{amount}`, `{expiresAt}`, `{delay}`, `{disabled}`             |
| Cashback message                   | `{amount}`, `{expiresAt}`, `{delay}`, `{disabled}`             |
| Expiry message                     | `{expiresAt}`, `{disabled}`                                    |
| Loading message                    | (none)                                                         |
| Earned reward                      | `{reward}`                                                     |
| Earned reward — conditions         | `{conditions}`                                                 |
| Redeem terms label                 | (none)                                                         |
| Discount order-goal earned message | `{amount}`                                                     |

{% hint style="info" %}
Put `{disabled}` in a message to hide that message.
{% endhint %}

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-f46e33f547e2836e65ffbd6573643c782f4237b2%2Fdb-cx-thank-you-cashback.png?alt=media" alt="The thank-you page order summary with the message Congratulations! You earned $2.33, You earned $2.33 credit for your next order, above four items and totals that show free shipping with an RDM code, Store credit −$20.00 and Total paid $267.00." width="430"><figcaption><p>The thank-you page shows the credit the order earned, here less than the checkout estimate because this store gives no cashback on the part paid with store credit.</p></figcaption></figure>

**Thank you page referral**

The editor has two tabs, one per state.

| Tab               | Field              | Variables                       |
| ----------------- | ------------------ | ------------------------------- |
| **Logged in**     | Heading            | `{amount}`, `{discountCode}`    |
| **Logged in**     | Body message       | `{amount}`, `{discountCode}`    |
| **Logged in**     | Copy button label  | (none)                          |
| **Logged in**     | Clipboard text     | `{discountCode}`                |
| **Logged in**     | Image              | (optional; leave empty to hide) |
| **Not logged in** | Heading            | `{amount}`                      |
| **Not logged in** | Body message       | `{amount}`                      |
| **Not logged in** | Login button label | (none)                          |
| **Not logged in** | Image              | (optional; leave empty to hide) |

Signed-in customers see their code and a **Copy Code** button. Guests see the **Not logged in** copy with a **Login to share** button, which asks them to sign in to see their code.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-70a494abf387067b4c03519ba37902ee1f7f2dac%2Fdb-cx-thank-you-referral.png?alt=media" alt="The thank-you page for a signed-in customer, Thank you, Maya!, with the block Refer a friend and get $5.00 kickback, a message about earning $5.00 when a referred friend makes a purchase, and a Copy Code button." width="520"><figcaption><p>Signed-in customers see the Logged in copy and a Copy Code button.</p></figcaption></figure>

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-5115efa24614dc4c85dbcea18b98d55639aaabc5%2Fdb-cx-thank-you-referral-guest.png?alt=media" alt="The thank-you page for a guest, Thank you, Jordan!, with the heading Refer a friend and get $5.00 kickback, a message that asks them to log in to show their referral code, and a Login to share button." width="520"><figcaption><p>Guests see the Not logged in copy and a Login to share button.</p></figcaption></figure>

## 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 block doesn't show: the customer isn't signed in, or no reward is active. Rewards the customer can't afford still show, with a shortfall note. 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)