The Shopify Referral Page

Learn how you can customize the Referral Page

Fivos Stergiannis avatar
Written by Fivos Stergiannis
Updated over a week ago

The Referral Page is created automatically (but you can also create it manually if needed) in your store once you install the Viral Loops app. It is a standalone page where the store's customers can join your campaign, invite their friends, view their progress and coupons won.

Here’s what you can do with it:

  • Edit to make it match your brand and add more details about the campaign

  • Change its URL

  • Add it to your Navigation Menu to help customers find it.

You've probably already checked the documentation about the Viral Loops for Shopify app mini-wizard and video tutorial, and by now you have made all the needed settings in the campaign wizard. 

In order to customize your Referral Page, just Edit your Shopify campaign and go to the Referral Page step.

Once you click the "Edit the Referral Page" button, the editor will open:

You can see on the left of the page, that there are 5 main edit sections: 

  1. Cover 

  2. Joining & Sharing 

  3. Coupons

  4. Milestones, and 

  5. Custom CSS.


In the Cover section, you can perform simple edits (text, style, font size and color) for the Heading, the Description and the Background image (upload an image or simply select a background color).

Once you finish editing, click on Save changes.

Joining & Sharing

In the Joining & Sharing section, you can also perform simple edits (text, style, font size and color) for the Heading, the CTA text, the Placeholder for email input as well as edit the Description and text of the Counters (friends who subscribed and friends who ordered).

When you finish editing this section, click on Save changes button.


In the Coupons section, similarly with the other 2 previous sections, you can perform simple edits (text, style, font size and color) for the Heading and the Description as well as the placeholders. You can also translate the Discount term to the language of your choice.

Click Save changes when you finish editing.


The 4th section of the editor, is the Milestone section where again, you can perform simple edits (text, style, font size and color) for the Heading and the Description. You can also translate the Referral(s) term (used in the milestones), to the language of your choice.

❗ Regarding the milestones' images size, if the image is rectangular (1:1 ratio) it will perfectly fit the container. We generally recommend rectangular images for the milestone rewards, regardless of resolution. However, images that are at least 250x250 pixels would be the best.

Custom CSS

The 5th and last section of the editor, is Custom CSS. Here you can add custom CSS (at your own risk) and customize further the Referral Page.

👉🏻 If you need to manually re-create the Referral Page, you can  follow the guide here.

When you are finished with this section too, click Save changes and then click the Campaign wizard button to return to the campaign wizard.

Then, click Next to reach the Integrations step (and enable/set the integrations you want) or click the Finish button on the down right corner of the page and your campaign will be set and ready!

Did this article help you? Let us know! 😊

Did this answer your question?