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

# Activate the Checkout UI Extension

> Add Yuko's checkout app blocks to show points earning and reward redemption inside Shopify Checkout.

<Note>
  **Where to find this:** Shopify admin → Settings → Checkout → Customize
</Note>

## Introduction

Yuko's checkout extension adds app blocks to Shopify Checkout. Customers can see the points they'll earn and redeem their points for a discount without leaving checkout. You set the text in Yuko and place the blocks in Shopify's Checkout Editor.

## What problem this solves

Shopify Checkout doesn't run theme code or app scripts, so storefront widgets can't appear there. Checkout app blocks are the supported way to keep loyalty visible at the point of purchase.

## Yuko checkout blocks

| Block name in the Checkout Editor | Yuko widget | Default position |
| - | - | - |
| **Yuko Potential points earn** | [Checkout Earn](/onsite-widgets/checkout-earn) | Order summary |
| **Yuko Redeem rewards** | [Checkout Redeem](/onsite-widgets/checkout-redeem) | Order summary |
| **Yuko Checkout Membership Upsell** | [Checkout Membership Upsell](/memberships/widgets/checkout-membership-upsell) | Order summary |

All three use Shopify's `purchase.checkout.block.render` target, so you can move them to any block slot the Checkout Editor offers.

<Info>
  Points earned on a placed order are shown on the Order status page in customer accounts, not in checkout. The **Yuko Order status earned points** block is covered in [Customer Account Extension](/installation-and-setup/customer-account-extension).
</Info>

## When to use

* Your store is on **Shopify Plus**.
* You want customers to see earnable points and redeem rewards at checkout, not only in the cart.

## Before you start

<Check>Yuko is installed on your Shopify store.</Check>
<Check>Your store is on **Shopify Plus**. On other plans, the **Checkout Process** group in **Loyalty → Widgets** shows "Available only on Shopify Plus plan" and the checkout widgets can't be turned on.</Check>
<Check>The widget is switched on in **Shopify admin → Apps → Yuko Loyalty → Loyalty → Widgets**. Checkout widgets are available on select Yuko plans.</Check>

## Setup guide

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

  <Step title="Add the Yuko app block">
    Click **Add app block** in the section where you want the widget and choose the Yuko block for this widget (for example **Yuko Potential points earn** or **Yuko Redeem rewards**).
  </Step>

  <Step title="Position and save">
    Drag the block to its final position in the checkout and click **Save**.
  </Step>
</Steps>

<Info>
  Checkout app blocks are only available on **Shopify Plus**. In Yuko, the Checkout Process widgets show "Available only on Shopify Plus plan" on other Shopify plans. See [Theme compatibility & requirements](/getting-started/theme-compatibility).
</Info>

## How it works

When a customer reaches checkout, Shopify loads the Yuko blocks you placed. Each block reads its text from the matching widget in **Loyalty → Widgets**:

* **Yuko Potential points earn** shows how many points the order will earn.
* **Yuko Redeem rewards** shows the customer's balance and lets them redeem points or apply an existing reward as a discount. Logged-out customers see a login prompt instead.

The checkout blocks don't depend on the [Yuko App embed](/installation-and-setup/theme-app-embed).

### Limitations

* Shopify Plus only.
* Shopify controls the look of checkout blocks, so there's no Styles tab or Custom CSS for these widgets. You can change the text.

## Best practices

<Tip>**Preview before you publish.** Use the Checkout Editor preview with a test customer who has points to check both blocks.</Tip>
<Tip>**Keep Redeem near the order summary.** Customers look there for discounts, so they reach for their points before an outside coupon.</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="I don't see the Yuko blocks in the Checkout Editor">
    Confirm Yuko is installed and your store is on Shopify Plus. Click **Add app block** and look for the block names in the table above.
  </Accordion>

  <Accordion title="The block is placed but shows nothing">
    Make sure the matching widget is switched on in **Loyalty → Widgets** and your loyalty program is enabled.
  </Accordion>

  <Accordion title="Can I change the wording?">
    Yes. Edit the text in **Loyalty → Widgets → Checkout: Earn points** or **Checkout: Redeem points**.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Theme App Embed" icon="plug" href="/installation-and-setup/theme-app-embed">
    The Yuko App embed that powers Floating Rewards, Loyalty Nudges and the theme blocks.
  </Card>

  <Card title="Checkout UI Extension" icon="cart-shopping" href="/installation-and-setup/checkout-ui-extension">
    Add the earn and redeem blocks to Shopify Checkout (Shopify Plus).
  </Card>

  <Card title="Customer Account Extension" icon="user" href="/installation-and-setup/customer-account-extension">
    Add the loyalty blocks and full loyalty page to Shopify customer accounts.
  </Card>

  <Card title="Verify Your Setup" icon="circle-check" href="/installation-and-setup/verify-setup">
    Confirm widgets render correctly on the live storefront.
  </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.