Skip to content
Menu

Popular
Install on Shopify

How to Customize the Referral Popup

Simple Affiliate ·

How the Referral Popup Works

When a customer opens an affiliate's referral link, Simple Affiliate can show a popup at the bottom of your storefront. The popup tells the customer who referred them and, when the link applies a discount code, which code was applied. On the Pro plan and above, single-use discount codes also use this popup: the customer clicks Claim in it to get their code.

You can match the popup to your store's look. In the Popup design settings, you choose the background and text colors, the font, the text size, the corners and the text alignment. A preview shows each change before you save.

How to Customize the Popup

  1. Open the popup settings. In Simple Affiliate, go to Settings > Referral and scroll to Notifications. The Popup design settings are at the top of the card.

    Notifications card of the Referral settings with the Popup design settings and a preview of the popup

  2. Set the colors.

    • Background color: Enter a hex color, such as #F6F4EF, or pick one. When you leave it empty, the popup uses the button color of your affiliate emails, and then the brand color of your Shopify checkout.

    • Text color: Leave it on Automatic to use black or white, whichever is easier to read on the background. Enter a hex color to choose your own. The close icon and the popup buttons use the same color.

  3. Set the text.

    • Font: Theme font uses the font of your store theme. You can also choose System default, Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia or Times New Roman.

    • Text size (px): Enter a size from 12 to 32 pixels. The default is 20.

    • Text alignment: Theme keeps the alignment of your store theme. Choose Left or Center to set it for the popup.

  4. Set the corners. In Corners (px), enter a radius from 0 (square corners) to 40 pixels. The default is 0.

  5. Check the preview, then save. The preview below the settings shows the popup with your changes. Click Save in the save bar at the top of the page.

    Popup design settings with a light background, dark text, the Georgia font and centered text, and the preview of that popup

  6. Test the popup on your storefront. Open a referral link of an affiliate on your published store. The popup shows with your design.

    Storefront page with the referral popup at the bottom, in the saved design

Change the Popup Text

The design settings do not change the words of the popup. To change them, go to Settings > Translations and open the Notifications group. Edit the messages there, for example "You were referred by [NAME]!", then save.

Important Rules to Remember

  • Which popups use the design: The referral link popup, the discount code popup and the single-use discount code popup with its Claim button. Error messages, such as a code that could not be applied, keep the standard look.

  • When the popup shows: The referral link popup shows only when Referral link applied is on, and the discount code popup only when Discount code applied is on. Both switches are in the same Notifications card. Each popup needs the Simple Affiliate tracker on in your theme's App embeds. See How to enable the Simple Affiliate tracker.

  • Back to the original look: Click Use the default design below the preview, then save. This clears the design and the background color.

Simple to install. Simpler to run.

Install on Your Shopify Store