Publishing Your Rewards Page in Shopify

Now that you’ve finished setting up your Loyalty & Referrals program and designed a dedicated Rewards Page for customers to access your program, you are ready to publish your Rewards Page on your store with Shopify. You can publish your Rewards Page by creating a dedicated page in Shopify, or manually implementing your Rewards Page as a whole or by section in different areas of your store.

This article will walk you through the different options for publishing your Rewards Page on your store.

Before you start

Before you create and publish a new Rewards Page on Shopify, you need to do the following:

• Configure your Loyalty & Referrals program, which includes setting up earning rules, rewards, VIP Tiers, points, an ESP integration, and a referral program, depending on what is relevant to you
• Create a new Rewards Page instance in Yotpo, and design your Rewards Page using the Rewards Page Builder

Implementing your Rewards Page

To add the Rewards Page to your store, do the following:

Step 1: Make sure Yotpo’s app embed is enabled in Shopify (For Shopify 2.0)

1. On a separate tab, open your Shopify admin.
2. Go to Online Store > Themes.
3. Click Customize to open the theme editor.
4. Go to the App embeds section.
5. Make sure the Yotpo Modules & SDK loaders toggle is turned on.
6. Click Save.

To learn more about Shopify App embeds, you can refer to Shopify’s help center

Step 2: Publish your Rewards Page from your Loyalty Admin

1. From your Loyalty & Referrals main menu, go to Display On-site > Rewards Page Builder.
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 come back to publish it when you’re ready.
3. Click Publish in the top right corner.
4. You will see a popup with all the relevant codes:

• To add the full page to your store, copy the code in the Embed full page box. Paste the code onto the dedicated rewards page on your website.
• To add individual page sections to your store, copy the code of the relevant section. Paste the codes on a dedicated page or any page of your choosing.

Step 3: Embed codes in your store

1. Choose the relevant code and click Copy code.
2. In a separate tab, open your Shopify store admin and go to Online Store > Themes. 
3. Under the Current theme, click Actions (three dots). If you want to publish on a dev theme first, choose the relevant theme and continue just the same.
4. Click Edit code.
5. Click Add new template.
6. Choose liquid and name your page.
7. If you're using Shopify Vintage themes, also add the loader code.
8. Paste the code in the template of the page where you want it to appear:
   • If you are using a vintage theme, delete the content and replace it with the code
   • If you are using a Shopify 2.0 theme, the template will be empty upon creation
9. Click Save.
10. Go to Pages > Add page.
11. Choose a title for your page and select the newly created template in the Theme template dropdown menu.
12. Click Save.
13. Add the new page to your store’s navigation. To learn how to do that, see this Shopify guide.

Your rewards page is now live on your site!