> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuko.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Post-Purchase Widget

> Invite customers to get and share their referral link on the thank-you and order status pages, right after they buy.

<Note>
  **Where to find this:** Shopify admin → Apps → Yuko Loyalty → Referral → Widgets → Post-Purchase Widget
</Note>

## Introduction

The **Post-Purchase Widget** asks customers to refer a friend straight after checkout. It's the **Yuko Referral Signup** extension block, shown on the thank-you page and on the order status page in customer accounts.

## What problem this solves

Customers are most enthusiastic right after buying. Showing the referral offer at that moment, with a one-click way to get a link, turns that enthusiasm into referrals.

## Where it appears

* The **Thank you** page (`purchase.thank-you.block.render`).
* The **Order status** page in Shopify customer accounts (`customer-account.order-status.block.render`).

## Overview

* Four text fields: title, description and two button labels.
* No Styles tab. The block uses Shopify's checkout and customer account styling.
* A customer who isn't a referrer yet sees **Get referral link**. Clicking it enrolls them and shows their link with a copy button. Existing referrers see their link straight away.

## Before you start

<Check>The referral program is enabled and a friend reward is set in **Referral → Program**. The widget stays hidden without a friend reward.</Check>
<Check>For the order status page, your store uses Shopify customer accounts (**Settings → Customer accounts**).</Check>

## Setup guide

### 1. Configure the widget in Yuko

<Steps>
  <Step title="Open the widget">
    Go to **Referral → Widgets** and open **Post-Purchase Widget**.
  </Step>

  <Step title="Edit the content">
    | Field | Default |
    | - | - |
    | **Title** | `Refer a friend & get rewarded!` |
    | **Description** | `Give your friends {{friend_reward}} and get {{referrer_reward}} for each successful referral.` |
    | **Copy Button Text** (shown once the link is displayed, max 30 characters) | `Copy Link` |
    | **Get Link Button Text** (shown before the link is loaded, max 30 characters) | `Get referral link` |

    In **Title** and **Description**, use `{{friend_reward}}` and `{{referrer_reward}}` to insert the reward titles, so the text stays in sync with your rewards.
  </Step>

  <Step title="Save and enable">
    Click **Save**, then switch the toggle next to the widget title on. The badge changes to **Active**.
  </Step>
</Steps>

### 2. Add the block to the thank-you page

<Steps>
  <Step title="Open the checkout editor">
    In your Shopify admin, go to **Settings → Checkout** and click **Customize**.
  </Step>

  <Step title="Open the Thank you page">
    Use the page selector at the top to switch to **Thank you**.
  </Step>

  <Step title="Add the block">
    Click **Add app block**, choose **Yuko Referral Signup**, position it and click **Save**.
  </Step>
</Steps>

### 3. Add the block to the order status page

<Steps>
  <Step title="Open the Customer Accounts editor">
    In your Shopify admin, go to **Settings → Customer accounts** and click **Customize**.
  </Step>

  <Step title="Open the right page">
    Use the page selector at the top to open the page where the block should appear (Order status, Orders, or Profile).
  </Step>

  <Step title="Add the Yuko app block">
    Click **Add app block** and choose the Yuko block for this widget (for example **Yuko Order status earned points**, **Yuko Order index points display** or **Yuko Profile loyalty program**).
  </Step>

  <Step title="Position and save">
    Position the block where customers will see it and click **Save**.
  </Step>
</Steps>

<Info>
  Customer account blocks only work with Shopify's **new customer accounts**. Check that they're turned on in **Settings → Customer accounts**.
</Info>

On the **Order status** page, add the **Yuko Referral Signup** block.

### 4. Verify

Place a test order and check that the widget appears on the thank-you page. Click **Get referral link**, then copy the link and open it in a private window to check that the Friend Welcome Popup appears.

## How it works

1. The block checks that the referral module is on, a friend reward exists and the widget is enabled.
2. If the customer already has a referral code, the block shows their link.
3. Otherwise the block shows **Get referral link**. Clicking it enrolls the customer as a referrer and shows the new link.
4. The customer copies the link and shares it.

### Limitations

* The block's look follows Shopify's checkout and customer account styling.
* The order status target needs Shopify customer accounts and a logged-in customer.

## FAQs

<AccordionGroup>
  <Accordion title="Do I need Shopify Plus?">
    Thank-you and order status page blocks don't require Shopify Plus. Checkout-step blocks, such as the loyalty checkout widgets, do.
  </Accordion>

  <Accordion title="Why don't I see the widget after an order?">
    Check that a friend reward is set, the widget's toggle is on, and the **Yuko Referral Signup** block is added to the page you're looking at.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Program Setup" icon="gear" href="/referrals/program-setup">
    Rewards, landing URL, sharing, fraud prevention and UTM tracking.
  </Card>

  <Card title="Reward Types" icon="gift" href="/referrals/reward-types">
    Pick the right reward for the referrer and the friend.
  </Card>

  <Card title="Referral Widgets" icon="window" href="/referrals/widget">
    Post-Purchase Widget, Referral Landing Page and Friend Welcome Popup.
  </Card>

  <Card title="Referral Emails" icon="envelope" href="/emails/referral-emails">
    The emails sent to referrers and friends.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Book a Free Setup Call" icon="phone" href="https://cal.com/rameshelamathi/yuko-demo">
    Talk to our team for personalised setup help.

    **Time:** 30 minutes
  </Card>

  <Card title="Contact Support" icon="life-ring" href="https://yuko.so/support/">
    Visit our support hub for help articles, live chat and ticket submission.
  </Card>

  <Card title="Browse the Guides" icon="book" href="/getting-started/welcome">
    Documentation across loyalty, referrals, memberships and more.
  </Card>

  <Card title="Install Yuko" icon="shop" href="https://apps.shopify.com/yuko">
    Add Yuko to your Shopify store from the Shopify App Store.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.