Publishing Your Rewards Page in Shopify

Goals and Outcomes

Once you’ve finished setting up your Loyalty & Referrals program and designed your dedicated 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.

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

• 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, rewards, loyalty tiers, points, an ESP integration, and a referral program, depending on what is relevant to you.

• Created and customized a Rewards Page instance in Yotpo using the Rewards Page Builder.

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

Note

The Rewards Page Widgets app block is only available for the Rewards page in Shopify 2.0 themes.

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.

   

6. Click Save.

To learn more, refer to Shopify’s guide on 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.

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.

4. You will see a pop-up with all the relevant instance IDs (within the Shopify block tab):

   

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

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.

   

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.

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.

Step 2: Publish Your Rewards Page from Your Loyalty Admin

1. From your Loyalty & Referrals admin, go to Display On-site > Rewards Page.

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.

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.

   

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.

7. Click Save.

Legacy Method: Publish Using HTML

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.

Step 2: Publish Your Rewards Page from Your Loyalty Admin

Same steps as here.

Step 3: Embed Codes in Your Store

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

   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.

6. Add the new page to your store’s navigation so shoppers can easily access it.

   

Your Rewards Page is now live on your site!