--- title: "Referral Welcome Popup" slug: "referral-welcome-popup" tags: ["Loyalty and Referrals", "Shopify Plus", "Shopify", "Salesforce Commerce Cloud", "BigCommerce", "Adobe Commerce (Magento)", "Custom"] updated: 2025-02-05T08:46:55Z published: 2025-02-05T08:46:55Z canonical: "support.yotpo.com/referral-welcome-popup" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.yotpo.com/llms.txt > Use this file to discover all available pages before exploring further. # Referral Welcome Popup Products Loyalty & Referrals ###### Supported plans Free, Pro, Premium, Enterprise ###### eCommerce Platform Shopify, Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento), Custom **The Referral welcome popup** is the first thing new shoppers see when they arrive at your shop via a referral link from their friends. The popup will display a coupon code or points shoppers can use with their purchases. This is your brand’s way of greeting and enticing them to explore your store and make a purchase. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/c3ded989-9553-47a9-b4a6-dd7421046105.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) If you'd like to learn more about the Referral Program popups, read our [Referral Program Popups Overview](/v1/docs/referral-program-popups-overview) article. ## Creating a popup ### New merchants The popup is **automatically enabled** for new merchants who recently joined Yotpo Loyalty & Referrals. **To access referral welcome popup:** 1. In your Yotpo Loyalty & Referrals admin, go to **Display** **On-site > Referral**. 2. Scroll down to the **Referral Welcome Popup** section. You can go ahead and customize the welcome popup to better fit your brand’s design. ### Existing merchants Existing merchants who joined Yotpo **before the 25th of March, 2021**, will need to access the module and create a new popup instance. **To create a referral welcome popup instance:** 1. In your Yotpo Loyalty & Referrals admin, go to **Display On-site > Basic Modules > Referral**. 2. Scroll down to the **Referral Welcome Popup** section. 3. Click the **Create** button. If you choose to publish the new Referral welcome popup, the old popup will be automatically disabled.![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/980e7d03-b0eb-4f5d-b231-117fa348862b.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) You can revert back to the old popup at any time by enabling it. This will automatically disable the new popup module. ## Customizing your popup You can customize every aspect of the popup to fit your brand’s voice and tone. ### General Appearance ### Email Capture Available for Merchants who installed Yotpo Loyalty & Referrals after February 15, 2023. - Merchants using Shopify, please refer to [this article](/v1/docs/setting-up-and-managing-your-referrals-program-for-shopify-and-shopify-plus#additional-email-verification) for more information on email capture. - Merchants on all other platforms, please refer to [this article](/v1/docs/setting-up-your-referral-program#email-verification) for more information on email capture. Activating the setting will add an additional step to the popup where referred friends must fill in their email addresses before they can see the discount code. This step can help in boosting security and preventing referral fraud. #### Image & background In this section, you can choose the different design elements for the popup: - Display image on both mobile and desktop - Background color and opacity - Fonts ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/eebff379-6439-47ba-982d-4cc78cf7809d.gif?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) Want to use a custom font? If you wish to use a font that isn’t included in the pre-existing menu, check out our [guide on adding a custom font to a module](/v1/docs/adding-a-custom-font-to-a-module). **Advanced customization** At the bottom of the tab, you’ll find the Custom CSS option for advanced code editing of all the different elements. Simply use the “Inspect” action of your browser to hover over an element you wish to edit to learn its name and which CSS rules are already applied to it. ### Text design In this section, you can adjust the content, size, and color of the different popup text elements. **If you turned on the Email capture setting**, you will be able to choose between the popup steps to adjust both the popup text and the error messages relevant to each step. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/15602b6a-c63a-4127-b5f6-6f8657bb3a7d.gif?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) #### Popup text Here you can adjust the title, subtitle, and button text that appear in the popup. Please note: The coupon value/name doesn't update automatically in the popup. When you're adjusting the reward the referred friend will receive, make sure to also update the text in the popup. #### Error messages In this section, you can change the color and content of the different error messages the user may encounter. Each error message you edit will be shown on the preview screen so that you will be able to see exactly what the shopper sees.![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/142f38d5-ecfa-46e0-b632-5ad16f34ea0d.gif?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) The different messages and their use cases: - **Invalid email** -This message will appear if the provided email address does not fit the regular format of email addresses, for example - if the address is missing the "@" character. Please note: You must turn on the Email capture setting in order to edit this error. If the setting isn't turned on, the error isn't relevant since the referred friend will not provide an email address. - **Not eligible** - This message will appear if the referred friend is not eligible to receive a reward. For example, if the referred friend’s details match those of the referrer. - **Used this offer** - This message will appear if the friend already used their referral reward. - **General error** - This error will appear if there’s a general problem with the site or referral program. This can display if the coupon code can’t display for any reason. - **Safari privacy settings error** - This error message will appear if the "Hide IP address" setting in the referred friend's Safari browser is turned on. Since this setting aims to hide personal details, if turned on, Yotpo’s fraud prevention system will not allow the referred friend to participate in the referral program. To get the discount code, the referred friend must first turn off the "Hide IP address" option in their Safari privacy settings, then click the referral link again. ## Saving and publishing your popup Please note: - The Referral Welcome Popup doesn’t have an Instance ID. - If you are using a generic implementation of Yotpo Loyalty & Referrals, make sure to add the loader code onto the landing page under the Landing URL field in your [Referral Program settings](/v1/docs/setting-up-your-referral-program#additional-parameters). Once you’re done customizing your popup, you can save it by clicking the **Save** icon. Unlike the other modules, the Referral welcome popup can only have one instance. This means that only one popup design can be created and then redesigned as you see fit. To publish your popup and make it available to referred friends, go to the top right corner of the preview window and click on **Publish**. After clicking **Publish**, the popup will automatically appear on the webpage you defined as the **Landing URL** in your [Referral Program settings](/v1/docs/setting-up-your-referral-program#additional-parameters). If no URL is defined and the field is left blank, the referral link will lead the user to the address defined as the **Website URL** in the Settings > [General section](https://loyalty-app.yotpo.com/general-settings) of your Loyalty admin. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fea59f4d-2310-48ac-8b84-3bdfebe20631.png?sv=2026-02-06&spr=https&st=2026-11-08T11%3A40%3A31Z&se=2026-11-08T12%3A40%3A31Z&sr=c&sp=r&sig=SEOCk8qs7v79dsZ3XthTTTGdijQkJHsGYqUZvBzXcTc%3D) Any customizations you save and publish on this popup moving forward will not need another copy and paste of the code.