Publishing Your Rewards Page in Shopify

      Publishing Your Rewards Page in Shopify

        Article summary


        Loyalty & Referrals
        Supported plans

        Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus

        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:

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

        Please 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 be able to see their published widget on-site only after activating the program via the Customer Preview. To learn more about the customer Preview, go to Testing your Loyalty Program on Shopify

        Was this article helpful?