HomeDashboard

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.

<script
  type="text/javascript"
  class="hype_popup"
  campaign-id="campaign-id"
  src="https://app.referralrocket.io/widget/DiscountModal.js"
  defer
></script>

  1. 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.

  2. 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 <head> Section

      1. Scroll to find the <head> tag and Paste your script just before the closing </head> tag:

    8. Click Save to apply the changes.

  3. 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 </body> tag.

  3. Verify that there are no JavaScript errors in your browser’s console.

PreviousAdd Referral Widget on Shopify StorNextScoreApp

Last updated