> ## 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 Potential Points on Product Pages?

> Show potential loyalty points customers can earn directly on your product pages to drive engagement and higher conversion rates.

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

<Frame>
  <img src="https://mintcdn.com/gameball/o1WKK5n3ph536BuS/images/product-docs/onsite-components/product-points-hero.png?fit=max&auto=format&n=o1WKK5n3ph536BuS&q=85&s=4bd264de30bcdec831e833a08860f70c" alt="Display potential points on product pages" width="3566" height="2144" data-path="images/product-docs/onsite-components/product-points-hero.png" />
</Frame>

The product page plays a crucial role in the customer journey. By integrating loyalty features directly into your product pages, you increase touchpoints for engagement, which can lead to higher sales.

Gameball allows users to display potential points that can be earned directly on the product page. This feature gives customers clear visibility into the rewards they'll earn for each purchase, encouraging engagement and driving higher conversion rates by showcasing the benefits of their loyalty program upfront.

**Benefits:**

<CardGroup cols={2}>
  <Card title="Encourage Add-to-Cart" icon="cart-plus">
    Highlighting potential points motivates customers to add items to their cart, increasing purchase likelihood.
  </Card>

  <Card title="Drive Higher Average Order Value" icon="arrow-trend-up">
    Customers are more likely to add additional items to their cart when they see the direct rewards tied to each product, leading to increased spending.
  </Card>
</CardGroup>

***

## Prerequisites

<Steps>
  <Step title="Updated 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-general.gif?s=869aebc8657f09e0bc10f77ed9ad16fc" alt="Enable Gameball embed block" width="1152" height="648" data-path="images/product-docs/onsite-components/enable-gameball-embed-block-general.gif" />
    </Frame>
  </Step>

  <Step title="Activate the &#x22;Earn Points&#x22; Module">
    In the Gameball dashboard, navigate to **Programs > Earn Points**, then activate the module.
  </Step>

  <Step title="Activate Gameball Program">
    In the Gameball dashboard, ensure the top-right toggle is active. Once enabled, you will 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/product-points-customize.png?fit=max&auto=format&n=aJ_BSQbSOF-R8lP1&q=85&s=b077a92d8f608a113b43f8dae6c54932" alt="Navigate to Onsite customize" width="5524" height="2498" data-path="images/product-docs/onsite-components/product-points-customize.png" />
    </Frame>
  </Step>

  <Step title="Open Theme Editor">
    You'll be redirected to the Shopify theme editor on the product page. If this doesn't happen, please review the prerequisites.
  </Step>

  <Step title="Add the App Block">
    In the left sidebar, under the "Template" section, find **Product Information**. Click **Add Block > Apps**, and search for **"Product Points"**.
  </Step>

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

    <Frame>
      <img src="https://mintcdn.com/gameball/o1WKK5n3ph536BuS/images/product-docs/onsite-components/product-points-install.png?fit=max&auto=format&n=o1WKK5n3ph536BuS&q=85&s=8f1ebd8bb1408b922b5a88274174b1fe" alt="Install product points block" width="3566" height="2144" data-path="images/product-docs/onsite-components/product-points-install.png" />
    </Frame>
  </Step>
</Steps>

***

## Customization

<AccordionGroup>
  <Accordion title="Style Customization" icon="palette">
    1. In the Shopify theme editor, click on the **"Product Points"** app block.
    2. On the right sidebar, adjust the icon, text, colors, and styles as needed.
    3. On the left sidebar, you can also change the block's position within the template section.
    4. Click **Save**.
  </Accordion>

  <Accordion title="Content & Translation" icon="language">
    1. To customize the content and translation, go to the Gameball Dashboard.
    2. Navigate to **Widget > Content**.
    3. In the **Onsite** tab, edit the text as needed.
    4. Click **Save**.

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

***

## Important Notes

<Warning>
  This extension will automatically hide from your store if:

  * The Gameball program is deactivated.
  * The "Earn Points" module is deactivated.
  * The customer is excluded from the loyalty program.
  * The product offers 0 loyalty points.
  * The product is excluded from the "Earn Points" rules.
  * Your account is on a plan that doesn't support this feature.
</Warning>

***

## Common 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>
</AccordionGroup>
