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, you’re ready to publish it on your Shopify store.

You can publish your Rewards Page in two ways:

• As a dedicated page in Shopify.

• By embedding individual sections of the page in different areas of your store.

In this article, you’ll learn how to publish your Rewards Page using either method.

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 designed a Rewards Page instance in Yotpo using the Rewards Page Builder.

Implementing Your Rewards Page

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 Customize to open the theme editor.

4. Go to the App embeds section.

5. Make sure the Yotpo Widget loader toggle is turned on.

   

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 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 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 embed 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 Current theme, click the Actions (three dots) menu, then select Edit code.

   If you prefer, select a development theme instead.

4. Click Add new template, choose liquid, and give it a name.

   For Shopify Vintage themes, make sure to add the loader code.

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

6. Click Save.

7. Go to Pages > Add page.

8. Choose a title for your page and select the newly created template in the Theme template dropdown menu.

9. Click Save.

10. Add the new page to your store’s navigation.

Your rewards page is now live on your site!