> ## 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 Earned Points at Checkout?

> Encourage your customers to complete their orders by showing the points they'll earn with each purchase—directly at checkout.

| **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-earned-points-hero.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=b5e5eecc05c9b061d9623a34a3cc39b7" alt="Display earned points at checkout" width="3828" height="1982" data-path="images/product-docs/onsite-components/checkout-earned-points-hero.png" />
</Frame>

Displaying the potential points customers can earn from their order on the checkout page helps them understand the immediate rewards they'll receive. By showing how many points they will earn with their purchase, this feature encourages customers to make the most of their loyalty program benefits right at the point of transaction.

**Benefits:**

<CardGroup cols={2}>
  <Card title="Increases Order Value" icon="arrow-trend-up">
    Showing potential points encourages customers to add more items to their cart to maximize their rewards, leading to higher average order value.
  </Card>

  <Card title="Boosts Loyalty Program Engagement" icon="heart">
    By highlighting the rewards they'll earn, customers are more likely to engage with the loyalty program and make repeat purchases to accumulate more points.
  </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;Earn Points&#x22; Program">
    In the Gameball dashboard, navigate to **Programs > Earn Points**, then activate the module.

    <Frame>
      <img src="https://mintcdn.com/gameball/0izDrUbnPHPlIUcS/images/product-docs/onsite-components/activate-earn-points.png?fit=max&auto=format&n=0izDrUbnPHPlIUcS&q=85&s=e3f9e03bfaf7b556cc65fd782e776d08" alt="Activate earn points program" width="5524" height="2334" data-path="images/product-docs/onsite-components/activate-earn-points.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**.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-earned-points-customize.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=ef1bb59929c121acf347ac68919bb877" alt="Navigate to Onsite customize" width="5524" height="2700" data-path="images/product-docs/onsite-components/checkout-earned-points-customize.png" />
    </Frame>
  </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 App Block > Apps**, and search for the **"Checkout potential points"** block.
  </Step>

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

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

***

## How It Works

<Tabs>
  <Tab title="Guest Customers">
    If not logged in, the extension will show the earned points in addition to asking you to log in to collect the points.

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

  <Tab title="Logged-In Customers">
    When the logged-in customer reaches the checkout page after placing an order, the extension will be displayed, showing the number of points earned from the last order, in addition to a call-to-action that opens the widget on the redemption option to let the user redeem their points.

    <Frame>
      <img src="https://mintcdn.com/gameball/aJ_BSQbSOF-R8lP1/images/product-docs/onsite-components/checkout-earned-points-logged-in.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=bfd400e5499f8d99587faedcdb59930f" alt="Logged-in customer earned points view" width="1088" height="902" data-path="images/product-docs/onsite-components/checkout-earned-points-logged-in.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 Gameball program is deactivated.
  * The "Earn Points" program is deactivated.
  * The earned points are 0.
  * The customer is excluded from the loyalty program.
  * Your account is on a plan that doesn't support this feature.
</Warning>

***

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="What happens if I downgrade my plan?" icon="circle-question">
    The block will automatically hide if your plan no longer supports the feature.
  </Accordion>

  <Accordion title="What should I do if I clicked on Customize but saw a &#x22;There is a problem loading the page&#x22; message?" 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>
</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>
