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

# How Do I Display Points Redemption Input Field at Checkout?

> Empower your customers to redeem points directly at checkout, offering them control over how they apply their rewards.

| **Platform** | **Plan**   |
| ------------ | ---------- |
| Shopify      | Pro & Guru |

<Note>
  Checkout app blocks are available for **Shopify Plus** customers only.
</Note>

<Frame>
  <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-hero.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=ab347529b325c62244bac0658fc2061c" alt="Display points redemption input field at checkout" width="3828" height="2464" data-path="images/product-docs/onsite-components/checkout-redeem-input-hero.png" />
</Frame>

Offering customers the ability to redeem loyalty points at checkout is a powerful way to enhance their shopping experience and strengthen their connection with your brand. With Gameball's new feature, users can now view their points balance directly during checkout and easily redeem them for discounts by entering the number of points they want to use.

**Benefits:**

<CardGroup cols={2}>
  <Card title="Simplify Redemption" icon="hand-pointer">
    Providing a direct input field for point redemption at checkout makes it easier for users to apply their rewards, reducing friction.
  </Card>

  <Card title="Increase Reward Utilization" icon="chart-line">
    Displaying the redeem option at checkout encourages customers to use their points, leading to higher reward usage and satisfaction.
  </Card>
</CardGroup>

***

## Prerequisites

<Steps>
  <Step title="Shopify Plus">
    This feature is exclusively available to merchants on the **Shopify Plus** plan.
  </Step>

  <Step title="Updated Shopify Theme">
    Your Shopify theme must support app blocks. Without this, the option to add the Gameball block won't appear in the editor. [Learn more](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps).
  </Step>

  <Step title="Enable Gameball Embed Block">
    Go to the **Theme Editor** in your Shopify admin. Select **App Embeds** from the left menu, search for "Gameball," and toggle it on.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/enable-gameball-embed-block.gif?s=7946f4df027c0b43173af2917a38dcc4" alt="Enable Gameball embed block" width="1152" height="648" data-path="images/product-docs/onsite-components/enable-gameball-embed-block.gif" />
    </Frame>
  </Step>

  <Step title="Activate the &#x22;Flexible Redemption Option&#x22;">
    Ensure that the "Flexible Redemption Option" is activated and configured with the right values.

    <Frame>
      <img src="https://mintcdn.com/gameball/0izDrUbnPHPlIUcS/images/product-docs/onsite-components/activate-redeem-program.png?fit=max&auto=format&n=0izDrUbnPHPlIUcS&q=85&s=6a005001f5430a8a0be87bd0155b0ee0" alt="Activate flexible redemption option" width="5860" height="2840" data-path="images/product-docs/onsite-components/activate-redeem-program.png" />
    </Frame>
  </Step>

  <Step title="Activate Gameball Program">
    In the Gameball dashboard, make sure the toggle at the top-right is activated. Once this is enabled, you'll be able to add the Gameball block.

    <Frame>
      <img src="https://mintcdn.com/gameball/0izDrUbnPHPlIUcS/images/product-docs/onsite-components/activate-gameball-program.png?fit=max&auto=format&n=0izDrUbnPHPlIUcS&q=85&s=fb418260057f8bc60cf29d45d2f040e4" alt="Activate Gameball program" width="5860" height="3494" data-path="images/product-docs/onsite-components/activate-gameball-program.png" />
    </Frame>
  </Step>
</Steps>

***

## How to Install the Block

<Steps>
  <Step title="Navigate to Onsite">
    In Gameball, navigate to **Onsite**, click **Customize**.
  </Step>

  <Step title="Open Theme Editor">
    You'll be redirected to Shopify's Theme Editor.
  </Step>

  <Step title="Add the App Block">
    Under **Order Summary** in the left sidebar, select **Add section > Apps**, and search for **"Checkout redeem input field"**.
  </Step>

  <Step title="Save">
    Select the app block and click **Save**.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-install.gif?s=6bce3b52f89257670ffc1437d7db59d9" alt="Install checkout redeem input field block" width="1152" height="648" data-path="images/product-docs/onsite-components/checkout-redeem-input-install.gif" />
    </Frame>
  </Step>
</Steps>

***

## How It Works

<Tabs>
  <Tab title="Guest Customers">
    If not logged in, customers will see a login prompt to access their balance. Once identified (email entered), the block updates to the logged-in version.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-guest.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=9638d8242305f58bbdba51ccc8049aaf" alt="Guest customer redeem input view" width="1020" height="600" data-path="images/product-docs/onsite-components/checkout-redeem-input-guest.png" />
    </Frame>
  </Tab>

  <Tab title="Logged-In Customers">
    The block displays the total available points as a default in the input field. Customers can enter the desired amount to redeem.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-logged-in.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=df1dd8a2beb919678b774b4eb73cd065" alt="Logged-in customer redeem input view" width="1056" height="1066" data-path="images/product-docs/onsite-components/checkout-redeem-input-logged-in.png" />
    </Frame>

    After adding the points, the customer clicks on **"Redeem"**, and Gameball will deduct points from the customer's balance and automatically generate a discount code, which is then applied to the order.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-applied.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=e6b14e4a8d4744801ff353beae19ff8b" alt="Points redeemed and discount applied" width="1084" height="944" data-path="images/product-docs/onsite-components/checkout-redeem-input-applied.png" />
    </Frame>

    If the coupon is not applicable due to conditions like minimum order value, restrictions on combining with other discounts, or other advanced conditions, an error message will appear explaining why the coupon cannot be applied to the cart.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-redeem-input-error.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=0b67aa911c3e69d6acb785776d50d3ed" alt="Redeem input error message" width="1076" height="1156" data-path="images/product-docs/onsite-components/checkout-redeem-input-error.png" />
    </Frame>
  </Tab>
</Tabs>

***

## Customization

<AccordionGroup>
  <Accordion title="Style Customization" icon="palette">
    The checkout extensions have no style customization options. However, you can customize its position by simply dragging and dropping it to your desired location on the checkout page.
  </Accordion>

  <Accordion title="Content & Translation" icon="language">
    In the Gameball Dashboard, go to **Widget > Content**. Under the **Onsite** tab, edit the text and customize it for supported languages.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/onsite-content-translation.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=465d9dc80a716be565f91505296e5f34" alt="Content and translation settings" width="5860" height="3218" data-path="images/product-docs/onsite-components/onsite-content-translation.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

***

## Important Notes

<Warning>
  The block will automatically hide if:

  * The program is deactivated.
  * The "flexible redemption option" is deactivated.
  * The customer is excluded from the rewards program.
  * Your account is on an unsupported plan.
</Warning>

***

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="I clicked on Customize but saw a &#x22;There is a problem loading the page&#x22; message. What is the issue?" icon="circle-question">
    Please review the prerequisites and ensure all conditions are met. If you still encounter an issue, contact us at [support@gameball.co](mailto:support@gameball.co).
  </Accordion>

  <Accordion title="I downgraded to the Free plan. What will happen to the block?" icon="circle-question">
    The block will automatically hide once you're on a plan that doesn't support it.
  </Accordion>

  <Accordion title="What happens if the customer redeems points but doesn't use the coupon?" icon="circle-question">
    If the customer redeems points but does not use the generated coupon immediately, they can access the coupon later through the widget. The coupon will remain available for future use, but it cannot be reverted to points.
  </Accordion>
</AccordionGroup>

***

## Related Articles

<CardGroup cols={2}>
  <Card title="Display Potential Points in Cart" icon="cart-shopping" href="/product-documentation/onsite-components/general-components/display-potential-points-in-cart">
    Show potential points earned on current products in the cart.
  </Card>

  <Card title="Display Potential Points on Product Pages" icon="tag" href="/product-documentation/onsite-components/general-components/display-potential-points-on-product-pages">
    Show potential points directly on product pages.
  </Card>
</CardGroup>
