Popup Script to Display Discount Codes
Last updated
Last updated
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.
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.
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.
Add the Script to Your Website:
Backup Your Theme (Recommended)
In your Shopify Admin, go to: Online Store → Themes
Click the ⋯ (three-dot menu) next to your active theme and choose Duplicate
This creates a backup in case you want to undo any changes
Edit the Code
After duplicating, go back to your active theme
Click ⋯ again and select Edit Code
Open the theme.liquid File
In the Layout folder, click to open theme.liquid
Paste the Script into the <head> Section
Scroll to find the <head> tag and Paste your script just before the closing </head> tag:
Click Save to apply the changes.
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.
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.).
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.
If the popup doesn’t appear as expected:
Double-check that the campaign-id is correct.
Ensure the script is placed just before the closing </body> tag.
Verify that there are no JavaScript errors in your browser’s console.
