# Popup Script to Display Discount Codes
We’re excited to help you make the most of your referral program! With the Referral Rocket popup script, you can easily display a discount code to users who have been referred by their friends. This guide will walk you through how to use the script, explain its parameters, and help you customize it to fit your brand.
### Step-by-Step Guide to Adding the Popup Script
1. **Copy the Script**: Below is the script provided by Referral Rocket. Add this on the page referred users will land i.e. the share URL configured in the campaign.
```
```
2. **Replace the Placeholder Values**:
* Replace `campaign-id` with your actual campaign ID. This is a unique identifier for your referral or discount campaign.
* Customize the other attributes (e.g., `popup-header`, `background-color`, `button-color`, etc.) to match your brand and campaign goals.
3. **Add the Script to Your Website**:
1. Backup Your Theme (Recommended)
2. In your Shopify Admin, go to: **Online Store → Themes**
3. Click the **⋯ (three-dot menu)** next to your active theme and choose **Duplicate**
4. This creates a backup in case you want to undo any changes
5. Edit the Code
1. After duplicating, go back to your **active theme**\
2. Click ⋯ again and select **Edit Code**
6. Open the theme.liquid File
1. In the Layout folder, click to open theme.liquid
7. Paste the Script into the \ Section
1. Scroll to find the \ tag and Paste your script just before the closing \ tag:
8. Click Save to apply the changes.
4. **Test the Popup**:
* Once the script is live, test it by visiting your website as a referred user. The popup should appear with the discount code and the customizations you’ve applied.
### Explanation of Script Parameters
Here’s a breakdown of each attribute in the script and what it does:
| **Attribute** | **Description** |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| `campaign-id` | The unique identifier for your referral or discount campaign. Replace this with your actual campaign ID. |
| `popup-header` | Sets the heading text inside the popup. Customize this to match your messaging. |
| `background-color` | Defines the background color of the popup. Use color names or hex codes. |
| `button-color` | Specifies the color of the button inside the popup. Use color names or hex codes. |
| `button-value` | Determines the text displayed on the button (e.g., “Buy,” “Shop Now,” etc.). |
***
### Customization Tips
* **Brand Consistency**: Use colors (`background-color`, `button-color`) that align with your brand’s visual identity.
* **Clear Messaging**: Customize the `popup-header` and `button-value` to clearly communicate the discount and encourage action.
* **Test Across Devices**: Ensure the popup displays correctly on both desktop and mobile devices.
***
### Troubleshooting
If the popup doesn’t appear as expected:
1. Double-check that the `campaign-id` is correct.
2. Ensure the script is placed just before the closing `` tag.
3. Verify that there are no JavaScript errors in your browser’s console.
