---
title: "Creating and Publishing your Rewards Page in Shopify"
slug: "publishing-your-rewards-page-in-shopify"
tags: ["Loyalty and Referrals", "Shopify", "Shopify Plus"]
updated: 2026-08-19T13:45:05Z
published: 2026-08-19T13:45:05Z
canonical: "support.yotpo.com/publishing-your-rewards-page-in-shopify"
---

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

# Publishing Your Rewards Page in Shopify

Products

  

Loyalty & Referrals

###### Supported plans

Pro, Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus

## Goals and Outcomes

Once you’ve finished setting up your Loyalty & Referrals program and designed your [dedicated Rewards Page](https://support.yotpo.com/docs/creating-a-rewards-page), the final step is to publish it on your Shopify store. You can publish your Rewards Page as a dedicated page in Shopify or by embedding individual widgets in different areas of your storefront.

> [!NOTE]
> - We recommend publishing your Rewards Page using the **Rewards Page Widgets** app block, which makes your loyalty content easier for both customers and LLMs like ChatGPT and Gemini to access and understand. This implementation automatically generates Shopify metafields as part of Yotpo's machine-readable enhancements, helping [improve your loyalty program’s discoverability in AI-powered conversations](/v1/docs/llm-discoverability-guide-yotpo-loyalty).
> - Alternatively, **you can also use Custom Liquid** if your implementation requires it and still benefit from the same machine-readable enhancements.
> - **HTML page embeds remain available** for legacy implementations but don't support these enhancements.

In this article, you’ll learn how to publish your Rewards Page using each of these implementation methods.

## Getting Started

Before publishing your Rewards Page, make sure you’ve:

- Configured your Loyalty & Referrals program, including [earning rules](/v1/docs/earning-rules-overview-for-shopify), [rewards](/v1/docs/redeemable-rewards-overview-for-shopify-and-shopify-plus), [loyalty tiers](https://support.yotpo.com/docs/create-loyalty-tiers-program), [points](https://support.yotpo.com/docs/setting-up-a-points-for-purchases-earning-rule-on-shopify), an [ESP integration](/v1/docs/communications), and a [referral program](https://support.yotpo.com/docs/configuring-your-referral-program-settings-for-shopify), depending on what is relevant to you.
- Created and customized a Rewards Page instance in Yotpo using the [Rewards Page Builder](/v1/docs/getting-started-with-the-rewards-page-builder#4-publish-to-site).
- Published your Rewards Page from the builder once you're ready for customers to see your changes.

## Recommended Method: Publish with the Rewards Page Widgets App Block

The **Rewards Page Widgets** app block is the recommended way to publish your Rewards Page on Shopify. It supports Yotpo’s machine-readable enhancements to help LLMs understand your loyalty program content and surface it in conversational queries.

> [!WARNING]
> Note
> 
> The **Rewards Page Widgets** app block is only available for the Rewards page in Shopify 2.0 themes.
> 
> ![Rewards page on Shopify theme](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/rewards-page-shopify-theme.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

### Step 1: Enable Yotpo’s App Embed in Shopify (for Shopify 2.0)

1. On a separate tab, open your **Shopify admin**.
2. Go to **Online Store > Themes.**
3. Click **Edit theme** to open the theme editor.
4. Go to the **App embeds** section.
5. Make sure the Yotpo **Widget loader** toggle is turned on under **Yotpo Loyalty & Referrals**.

![Yotpo Loyalty widget loader toggle](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/yotpo-loyalty-widget-loader-toggle.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)
6. Click **Save**.

To learn more, refer to Shopify’s guide on [App embeds](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps#app-embeds).

### Step 2: Publish Your Rewards Page from Your Loyalty Admin

1. From your Loyalty & Referrals main menu, go to **Display On-site >** [**Rewards Page**](https://loyalty-app.yotpo.com/rewards-page-builder-widget).
2. Hover over the Rewards Page instance you want to publish and click **Edit**.

Tip

If you’re not ready to publish your Rewards Page but want to save it internally, click the **save icon** and return to publish it when you’re ready.
3. Click **Publish** in the top right corner.

![Publishing an inactive rewards page in the yotpo admin](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/publish-rewards-page.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)
4. You will see a pop-up with all the relevant instance IDs (within the **Shopify block** tab):

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/shopify-block-instance-ID(1).png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

- **Embed full page**: To add the full page to your store’s Rewards Page, copy the **Instance ID** in the **Embed full page** box. Paste the ID into the **Rewards Page Widgets app block** in Shopify.
- **Embed sections only**: To add individual page sections to your store’s Rewards Page, copy the **Instance ID** of the relevant section. Paste the IDs into the **Rewards Page Widgets app block** in Shopify.
  - To access individual section Instance IDs, open the relevant Rewards Page and click the **</>** icon in the top-right corner. The **Get Code** option on a closed Rewards Page tile only displays the full Rewards Page Instance ID.

> [!WARNING]
> Note
> 
> Each Rewards Page and standalone loyalty widget has its own unique Instance ID. The **Rewards Page Widgets** app block uses this ID to display the correct content on your storefront.

### Step 3: Add the Rewards Page Widgets App Block

1. In your **Shopify admin**, go to **Online Store**.
2. Locate your active store theme and click **Edit theme**.
3. From the dropdown at the top, open your Rewards Page.
4. In the Shopify theme editor, click **Add block** where you want it to appear.
5. Add the **Rewards Page Widgets** app block.

![adding the rewards page widgets app block in shopify](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/rewards-widgets-app-block-shopify.gif?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)
6. Insert the **Rewards Page instance ID**.
  1. To add standalone loyalty widgets only, follow the same steps as above and copy only the **Instance ID** of the respective widget in Yotpo.
7. Preview your changes and click **Save** when ready.

#### Localization Settings (Optional)

If your store serves multiple markets, you can control where the Rewards Page appears using the app block's locale settings:

- Show only for specific locales: Display the Rewards Page only for the locales you specify here. If you leave this field blank, the Rewards Page will be shown to all locales.
- Hide for specific locales: Hide the Rewards Page for the locales you specify in this field. If you leave it blank, the Rewards Page will not be hidden from any locale.

For example:

- Enter **EN** under **Show only for specific locales** to display the Rewards Page only to English-speaking customers.
- Enter **FR,DE** under **Hide for specific locales** to hide the Rewards Page from French and German storefronts.

![Locale settings in the app block](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/locale-targeting-settings-app-block-yotpo.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

---

## Alternative Method: Publish Using Custom Liquid

If your store requires advanced customization or you want to publish your widgets outside of the Rewards Page, you can use Custom Liquid instead.

### Step 1: Enable Yotpo’s App Embed in Shopify

[Same steps as here.](/v1/docs/publishing-your-rewards-page-in-shopify#step-1-enable-yotpos-app-embed-in-shopify-for-shopify-20)

### Step 2: Publish Your Rewards Page from Your Loyalty Admin

1. From your Loyalty & Referrals admin, go to **Display On-site >** [**Rewards Page**](https://loyalty-app.yotpo.com/rewards-page-builder-widget).
2. Hover over the Rewards Page instance you want to publish and click **Edit**.

Tip

If you’re not ready to publish your Rewards Page but want to save it internally, click the **save icon** and return to publish it when you’re ready.
3. Click **Publish** in the top right corner.

In the pop-up, open the **Code snippet** tab.

![Code snippet - tab](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/code-snippet.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

From here, you can copy:

- the **Embed full page code** to publish an entire Rewards Page.
- **standalone widget codes** to publish individual loyalty widgets.

### Step 3: Embed Codes in Your Store

You can publish your entire Rewards Page or individual widgets using the code snippets provided by Yotpo. The process is the same for either approach. The only difference is the embed code you need to copy.

To display a specific loyalty widget on another page (such as your Products or Account pages), follow these steps:

1. Copy the **section code** you want to use from your Yotpo Loyalty admin.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/code-snippet-embed-by-section.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)
2. In Shopify, go to **Online Store** > **Themes** > **Edit theme**.
3. Open the page where you want to embed the section.
4. In the Shopify theme editor, click **Add section** where you want it to appear.
5. Select **Custom Liquid**.
6. Click to open the **Custom Liquid** setting and paste the code in the **Liquid code** box.![embed a section via custom liquid](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/custom-liquid-embed-section.gif?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)
7. Click **Save**.

## Legacy Method: Publish Using HTML

> [!WARNING]
> Note
> 
> HTML embeds don’t support Yotpo’s machine-readable enhancements that help LLMs read and understand your program information. If you’re setting up a new Rewards Page, we recommend using the app block or Custom Liquid instead.

### Step 1: Enable Yotpo’s App Embed in Shopify

[Same steps as here.](/v1/docs/publishing-your-rewards-page-in-shopify#step-1-enable-yotpos-app-embed-in-shopify-for-shopify-20)

### Step 2: Publish Your Rewards Page from Your Loyalty Admin

[Same steps as here.](/v1/docs/publishing-your-rewards-page-in-shopify#step-2-publish-your-rewards-page-from-your-loyalty-admin2)

### Step 3: Embed Codes in Your Store

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/publish-rewards-page-alternative-method.gif?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

To publish your Rewards Page as a standalone page in Shopify using HTML:

1. In the **Code snippet** tab, copy the **Embed full page** code from your Yotpo Loyalty admin.
2. In your **Shopify store admin**, go to **Online Store > Pages**.
3. Click **Add Page**, add a name for it (e.g., Rewards), and click the **Show HTML (</>)** icon.
4. **Paste the embed code** into the Content section.
5. Finish setting up the page and click **Save**.

> [!TIP]
> Tip
> 
> Depending on what you need, you can create a custom template for your Rewards Page before adding it to the store. Learn more about [creating templates in Shopify](https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates).
6. Add the new page to [your store’s navigation](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus) so shoppers can easily access it.

![Adding a page to your store's navigation in Shopify](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/add-page-to-store-menu-shopify.png?sv=2026-02-06&spr=https&st=2026-10-31T08%3A37%3A01Z&se=2026-10-31T09%3A37%3A01Z&sr=c&sp=r&sig=tTCPzFFMcuxHsNLXQS7mn%2BjV75L0dJoJaxNgiOVy%2B5A%3D)

Your Rewards Page is now live on your site!

---

Note

- You can access the full page and section codes at any point by clicking the **</> icon**.
- Any changes you make to your Rewards Page will only be visible to customers after you click **Publish** from the Rewards Page Builder.
- Premium and Enterprise merchants who joined Yotpo Loyalty & Referrals after September 12th, 2023, will only see their published widgets **after activating the program** via the Customer Preview. Learn more about [Testing Your Loyalty Program on Shopify](/v1/docs/testing-your-loyalty-program-on-shopify).