This guide explains how to create a custom referral page inside your Shopify store and add Viral Loops widgets to it. You can either place widgets on an existing page or create a new dedicated referral page that matches your theme.

Prerequisites

Before starting, make sure:

Your Viral Loops campaign is already created using the Viral Loops for Shopify template.
Your Shopify store is connected to Viral Loops.
You have access to the Theme Editor in Shopify.

1. Open Your Shopify Theme Editor

Log in to your Shopify store:
https://accounts.shopify.com/
In the Shopify admin, go to Online Store → Themes.
Click Edit Theme to open the Shopify Theme Editor.

This is where you will add or configure your Viral Loops widgets.

2. Choose Your Customization Approach

You can either:

Add Viral Loops widgets into an existing page, or
Create a brand-new custom template and map a new page to it

Both approaches are fully supported.

Option 1: Add Widgets to an Existing Shopify Page

In the Theme Editor, navigate to the page you want to edit.
Click Add Section.
In the pop-up, select Apps.
You will now see the Viral Loops sections and blocks available for your campaign.
Select the widget you want to add (e.g., Form Widget, Milestone Widget).
The widget will appear on the page, and you can reposition or style it as needed.

Note:
The Popover Widget is located under App embeds, not Sections.

This option is ideal if you already have a page you want referral participants to land on.

Option 2: Create a New Custom Page and Add Widgets

This option gives you full control over the design of your referral experience.

2.1 Create a New Page Template

In the Theme Editor, open the top dropdown (e.g., “Home page”) and switch to Pages.
Click Create Template.
Choose a base template.
- Recommended: Use the Default Page template so the new referral page inherits your store’s theme styling.
Shopify will create a blank template you can fully customize.

2.2 Add Viral Loops Widgets to the New Template

Once the blank template loads:

Click Add Section.
Select Apps and choose any Viral Loops widget you want to include—Form, Milestone, etc.
Position the widgets as needed and customize the layout.

This template will determine how all pages assigned to it will look.

2.3 Create a New Shopify Page Using This Template

When your template is ready:

Click Exit to leave the Theme Editor.
In your Shopify admin, go to Online Store → Pages.
Click Add Page.
Give your page a name (e.g., “Referral Program”).
Under Template, select the custom template you just created.
Set visibility as needed and click Save.
Shopify will now generate a page URL for this dedicated referral page.

You now have a custom-designed Viral Loops referral page inside your Shopify store.

3. Update Your Viral Loops Campaign with Your New Page URL

Once your new custom page is active:

Open your Viral Loops campaign wizard.
Navigate to the Referrer Page or Referred User Page step.
Replace the default URL with your newly created Shopify page URL.
Save your configuration.

This ensures participants are redirected to your new custom referral experience.

4. Example Setup

A complete custom page may include:

Viral Loops Signup Form
Milestone Rewards widget
Sharing State widget
Any additional content you’d like to add

The example in the source document shows a custom page containing both the Form Widget and the Milestone Widget, fully matching the Shopify theme.