# Add Referral Widget on Shopify Stor

Follow these steps to integrate the Referral Widget into your Shopify store and kickstart your referral program.

#### Step 1: Create a Dedicated Referral Page

1. In your **Shopify Admin**, go to:\
   Online **Store → Pages**<br>

   <figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FB40U9DCsLQrN6YlSNAcV%2FScreenshot%202025-04-14%20at%203.27.31%20PM.png?alt=media&#x26;token=bdceeb2b-41c0-4ee3-97cd-04bbef8da844" alt=""><figcaption></figcaption></figure>
2. Click **Add Page**.
3. Enter a name for your page, like: **Refer and Earn**

<figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FkQCDuLrKJxhvZvGiuZ2u%2FScreenshot%202025-04-14%20at%203.28.17%20PM.png?alt=media&#x26;token=835e6014-004d-4b65-94b2-d2c16091ffbc" alt=""><figcaption></figcaption></figure>

4. Switch to **HTML view** by clicking the \</> icon in the top-right of the content editor. Paste the following code into the editor:

```
<script type="text/javascript" defer src="https://app.referralrocket.io/widget/widgetIndex.js"></script>


<div class="hype_widget" campaign-id="YOUR-CAMPAIGN-ID"></div>
```

5. &#x20;🔁 **Important**: Replace YOUR-CAMPAIGN-ID with your actual campaign ID.

<figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2F68S3nRavbakCgMa7YAEy%2FScreenshot%202025-04-14%20at%203.31.05%20PM.png?alt=media&#x26;token=9e5016fb-55b1-4a25-9720-9aca21b36ba6" alt=""><figcaption></figcaption></figure>

5. Ensure **Visibility** is turned on so the page is accessible to visitors.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe01wW3EYenMYEvuSeOR7yOwSprf6WeOERn5ME0SYw2YjSRP5cGDockouRUGJYJhjcZH-TngmqvPerpYqd0sZ26gjylBo-RqX43gK6Lz331vkPXTSKcYpKc9EdUEM0VSmZuaNHA6g?key=YGR2ZdG_XcMahc1Lgg4I-y-9" alt=""><figcaption></figcaption></figure>

7. Click **Save** to publish the page.

***

#### Step 2: Add the Referral Page to Your Store Menu

Make it easy for customers to access your referral program by adding it to your store's navigation menu.

1. In your **Shopify Admin**, go to:\
   **Content → Menus**\ <br>

   <figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FG8g09qyJApK0HVYZngvN%2FScreenshot%202025-04-14%20at%203.31.59%20PM.png?alt=media&#x26;token=2947c416-7bc0-44df-aa5a-dda5d70d3d99" alt=""><figcaption></figcaption></figure>
2. Choose the menu where you'd like to add the page — for example, **Main Menu.**
3. Click **Add menu** item.

<figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FpyHnS5avaLvbKXNiWrqD%2FScreenshot%202025-04-14%20at%203.34.19%20PM.png?alt=media&#x26;token=50700298-6a9a-40b2-894b-98eafb75de38" alt=""><figcaption></figcaption></figure>

4. Enter a link label like **Refer and Earn**.
5. In the **Link field**, select Pages.\ <br>

   <figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FLElbxrIw2qyGcHeYPsvW%2FScreenshot%202025-04-14%20at%203.34.54%20PM.png?alt=media&#x26;token=5a944ad4-f870-48f3-8040-3d6e7de57c7e" alt=""><figcaption></figcaption></figure>
6. Then, choose the **referral page** you created (e.g., Refer and Earn).\
   \ <br>

   <figure><img src="https://346708387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpvWNOwMd3hfowlhBXaA%2Fuploads%2FQCg1eysLczNNEkOxtjUb%2FScreenshot%202025-04-14%20at%203.35.09%20PM.png?alt=media&#x26;token=66bad923-274d-4397-af2c-b4126b3bee13" alt=""><figcaption></figcaption></figure>
7. Click Add, then **Save** menu to apply the changes.\ <br>

***

<br>
