Loyalty & Rewards: Creating A Dedicated Rewards Page

  • Updated

While it is possible to run your Loyalty & Rewards Program through the default Launcher, creating a dedicated Rewards landing page is the easiest way to help your customer understand more about how your Loyalty Program works.

This is a key strategy to expanding your Loyalty & Rewards program engagement and participation. The page can be edited to match the design of your brand.

 

The below guide provides instructions for both our Loyalty Classic and Loyalty 2.0 experience. We are migrating customers to Loyalty 2.0 throughout the coming months. If you're unsure which version you are on now, please first navigate here.


In This Guide

Loyalty Classic

Loyalty 2.0

  • Landing Page Content
  • Generate the Widget Code
  • Creating a Custom Page
    • Shopify 2.0
    • Shopify (Vintage Theme)
    • BigCommerce
    • Woocommerce
  • Directing the Referral Link to your Rewards Page

Loyalty Classic

Landing Page Content

Your dedicated landing page should include everything your customer needs to know about your Loyalty & Rewards Program.

Stamped provides a variety of Display widgets to facilitate this.

You can read more about our display widgets in this article:
Loyalty & Rewards Display Widgets

Here's an example of a Dedicated rewards page on our demo store:
https://stamped-demo-store.myshopify.com/pages/loyalty

Other examples of a Rewards Landing Page from other e-commerce sites:
Rewards – georgiemane
Rewards – Goodfair
Rewards - PEScience
Rewards - Tony Ray Tattoos


Generate the Widget Code

Before installing Display Widgets, you will first generate the code snippet for the respective Display Widget in the Stamped Dashboard.
*Note: This step is not necessary for Shopify 2.0

1. Click on the Display Widget you want to install and apply the customization as required. Any settings and changes will be reflected on the preview on the right. 

2. Once you are done, click on 'Get Codes'

Dedicated1.png

3. Copy the generated code by clicking on 'Copy Codes'
Dedicated2.png

*This step is common for all Display Widgets*


Installing Widgets on a Custom Page

 

Shopify 2.0:

1. Go to Online Store - Themes - Customize within your Shopify Dashboard.
Dedicated3.png

  1. Click Pages > Create TemplateDedicated4.png

2. Give the page a name and which template its structure is based on. Commonly, you can use "Default Page".
Once done click "Create Template"
Dedicated5.png

3. Click "Add Section" at the bottom of the left panel of the screen. Then, in the "Apps" list, choose the widget to be added. 

Dedicated6.png

4.  Once you've added the widget, you can click on the widget item in the App Block to customize it! Please see the example below:
Dedicated7.png

4. Click  "Save" on the top right of the screen.

5. To modify the content, you will need to assign the page through the Pages Shopify Editor. To do so, go to Online Store - Pages and click "Add Page"

Dedicated8.png

6. Add a title to the Page and text content if needed.
Dedicated9.png

7. On the right panel of the screen, assign the page to the newly created template:
Dedicated10.png

9. Click "Save"

8. Click More Actions - View Page to see the page!
Dedicated11.png

Shopify (Vintage Theme)

1. Log in to your Shopify Admin panel

2. On the left, click on ' Online Store', go to 'Pages' and click on 'Add Page' on the top right corner

Dedicated12.png

3. Add a Title for the page and then click on the HTML icon

Dedicated13.png

4. In the HTML editor paste the generated widget code copied from the Dashboard for the display widget.

5. Click on ' Save' for the changes to take effect.

Bigcommerce

1. Log in to your BigCommerce Admin panel.

2. On the left panel, go to Storefront > Web Pages

3. Click 'Create Web Pages'.

Dedicated14.png4.  For the Page Type, you can choose This Page Will:  Contain content created using the WYSIWYG editor below

5. Fill in the Web Page Details.
Dedicated15.png

6. In the HTML editor paste the generated widget code copied from the Dashboard for the 'Full Page' display widget.

Dedicated16.png

7.  Click on 'Save & Exit' for the changes to take effect.

Woocommerce


For Woocommerce, the installation step would depend on the Page builder used. You can simply add the widget code in the HTML editor.


Directing the Referral Link to your Rewards Page

 

Once your customer created an account in your store, a Referral Link would be generated for them to start referring their friend to your store.

They can find the link on the launcher below:

Dedicated17.png
You can direct the referral link to your rewards page by updating the URL in the setting.

Here's how to do it:

  1. Settings - General
  2. Click on "Referral"
  3. Input the URL of your Rewards or Referral landing page below:

    Dedicated18.png

  4. Click Save.

The Referral Link should now redirect to your Referral or Rewards landing page!


Loyalty 2.0

Landing Page Content

Your dedicated landing page should include everything your customer needs to know about your Loyalty & Rewards Program.

Stamped provides a variety of Display widgets to facilitate this.

You can read more about our display widgets in this article:
Loyalty & Rewards Display Widgets

Here's an example of a Dedicated rewards page on our demo store:
https://stamped-demo-store.myshopify.com/pages/loyalty

Other examples of a Rewards Landing Page from other e-commerce sites:
Rewards – georgiemane
Rewards – Goodfair
Rewards - PEScience
Rewards - Tony Ray Tattoos


Generate the Widget Code

Before installing Display Widgets, you will first generate the code snippet for the respective Display Widget in the Stamped Dashboard.
*Note: This step is not necessary for Shopify 2.0

1. Navigate to the Display Widgets tab from the left menu and click on the widget you want to install and apply the customization as required. Any settings and changes will be reflected on the preview on the right. 

2. Once you are done, click on Get Codes

LR

3. Copy the generated code by clicking on 'Copy Codes'
Dedicated2.png

*This step is common for all Display Widgets*


Installing Widgets on a Custom Page

Shopify 2.0:

1. Go to Online Store - Themes - Customize within your Shopify Dashboard.
Dedicated3.png

  1. Click Pages > Create TemplateDedicated4.png

   2. Give the page a name and which template its structure is based on. Commonly, you can use "Default Page". Once done click "Create Template"
Dedicated5.png

3. Click "Add Section" at the bottom of the left panel of the screen. Then, in the "Apps" list, choose the widget to be added. 

Dedicated6.png

4.  Once you've added the widget, you can click on the widget item in the App Block to customize it! Please see the example below:
Dedicated7.png

4. Click  "Save" on the top right of the screen.

5. To modify the content, you will need to assign the page through the Pages Shopify Editor. To do so, go to Online Store - Pages and click "Add Page"

Dedicated8.png

6. Add a title to the Page and text content if needed.
Dedicated9.png

7. On the right panel of the screen, assign the page to the newly created template:
Dedicated10.png

9. Click "Save"

8. Click More Actions - View Page to see the page!
Dedicated11.png

Shopify (Vintage Theme)

1. Log in to your Shopify Admin panel

2. On the left, click on ' Online Store', go to 'Pages' and click on 'Add Page' on the top right corner

Dedicated12.png

3. Add a Title for the page and then click on the HTML icon

Dedicated13.png

4. In the HTML editor paste the generated widget code copied from the Dashboard for the display widget.

5. Click on ' Save' for the changes to take effect.

Bigcommerce

1. Log in to your BigCommerce Admin panel.

2. On the left panel, go to Storefront > Web Pages

3. Click 'Create Web Pages'.

Dedicated14.png4.  For the Page Type, you can choose This Page Will:  Contain content created using the WYSIWYG editor below

5. Fill in the Web Page Details.
Dedicated15.png

6. In the HTML editor paste the generated widget code copied from the Dashboard for the 'Full Page' display widget.

Dedicated16.png

7.  Click on 'Save & Exit' for the changes to take effect.

Woocommerce

For Woocommerce, the installation step would depend on the Page builder used. You can simply add the widget code in the HTML editor.


Directing the Referral Link to your Rewards Page

Once your customer has created an account in your store, a Referral Link will be generated for them to start referring their friends.

They can find the link on the launcher below:

Dedicated17.png


You can direct the referral link to your rewards page by updating the URL in the setting:

  1. Navigate to Referrals & Affiliates from the main left menu
  2. Scroll down to the Referral Link Redirection section and input the URL of your Rewards or Referral landing page below:

    LR

  3. Click Save.

The Referral Link should now redirect to your Referral or Rewards landing page!

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request