Product Share Referral Module

      Product Share Referral Module


        Article summary

        Products


        Loyalty & Referrals


        Reviews

        Visual UGC

        Supported plans

        Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify, Plus

        The product share referral module allows shoppers to share recently purchased products with their friends.
        The same settings apply to both site referral and product referral, but the product share referral link will take referred friends directly to the shared product’s page - making the path to purchase even shorter.
        The ability to share specific products drives increased engagement by enabling shoppers to further personalize the referral experience. In turn, this can lead to an increase in new customer acquisition and referral revenue.

        Customer journey

        Below is an overview of the product share referral process: 

        Referring customer:

        1. Referring customer makes a purchase
        2. Post-purchase product share referral popup appears
        3. The customer chooses a product they wish to share and their preferred sharing method - email, Twitter, Facebook, etc.

        Referred friend:

        1. The referred friend received a message from the referring customer and clicks the referral link.
        2. Referred friend lands directly on the product page and sees the Referral Welcome popup that includes a discount code


        This discount can be used across your store and does not apply only to the shared product - all in accordance with the settings applied to your referral program

        Setting up product share referral

        This functionality requires setting up the Share Product module. With it, you can quickly build a customized and intuitive user experience for your referring customers, without the need for any development. 

        Before you begin

        Before creating and customizing the module, make sure to set up your referral incentives, as these apply across your referral modules.

        Accessing the module

        1. In your Loyalty & Referrals main menu, go to Display On-site > Referrals.
        2. Go to the Share Product section and click Create.

        Customizing module settings

        Share options

        In this section, you'll be able to configure the share channels present on the desktop and mobile versions of your module, as well as customize the messages sent via those different sharing methods. You can enable your referring customers to share products via the listed methods. You can even determine which share methods are available on mobile and desktop:

        • Email - This setting has two additional options:
          • Marketing email (default) - this email will be sent through either your Yotpo Triggered Emails or through the ESP solution you integrated with Yotpo Loyalty & Referrals.
          • Personal email - this is a personal email that will be sent directly from the referring customer’s own Gmail, Yahoo, or Outlook account.
        • SMS - Mobile text message
        • Copy link - Allow customers to copy the referral link and share it however they want. 
        • Facebook  - Facebook posts and Messenger
        • WhatsApp text message

        Main share option

        Here you can choose the default share option that will be presented to customers.You can set a different default option per user type - mobile user and desktop user.

        Once the main share options are set, you can go through all the available share channels and configure the following settings:

        • Enable/disable the option using the toggle
        Please note:
        If a share option is set as the main share option, its toggle and default device option will be grayed out. To unlock it, simply set a different share option as the main option.
        • Choose availability depending on the device used - mobile or desktop.
        • Edit the share message that will appear on the channel. 

        Email share option

        The email share option includes an additional setting - email type. There are two available types of share emails:

        Personal email

        If you select this option, the option to customize the Email Subject and Email Body will populate within the module editor:

        The referring customer will also be able to alter the message within their account.

        Marketing email - Yotpo triggered emails

        To edit the "Referral Share Email", head back into your Loyalty & Referrals admin > Programs > Triggered Emails

        If you are using one of our Email Marketing Integrations, you'll be able to customize your Referral Share Email from within the email marketing platform.

        In the Triggered Emails section of your admin, you will see two new email templates:

        These emails will be sent out if you chose to have the Marketing Email share option. The following placeholders can be added to the email template:

        • *|product_name|* - The name of the product the shopper chose to share, as it appears in Shopify.
        • *|product_image|* - The main image of the product, as it appears in Shopify.
        • *|product_referral_link|* - The referral link of the referring customer.
        Marketing email - ESP integrationIf you are using ESPs to send your referral share emails, they will receive a new webhook event that can trigger the marketing email - “Referral Product Share”.Relevant attributes include:
        • product_referral_link
        • product_id
        • product_name
        •  image_url

        Share options - visuals

        To help you visualize how this text will look within each sharing method, we've provided sample text and screenshots below:

        Facebook post
        Facebook Messenger


        WhatsApp text message

        Look & Feel

        Customize your module’s aesthetic and adjust it to fit your brand.

        General

        With these settings, you can control the overall appearance of your popup. This includes:

        • How long till it shows up after a shopper completed a purchase.
        • The background color and overlay.
        • The main text, fonts, and color.
        • The product gallery consists of the product just purchased by the shopper.

        You can also add your own advanced customization by using the Custom CSS field. If you use custom CSS, you may see a notification asking you to update your module version from time to time. Read more about module versions.

        Please note:

        Make sure to use our embedded CSS editor instead of hardcoding directly onto your storefront.
        This allows Yotpo to recognize if any changes to the version of the module will affect its on-site appearance.
        We will not update a specific module instance if we detect that it will impact your live Module version.

        Desktop share options

        Here you can choose the colors, fonts, and text of the share options as they appear to a desktop user. The settings here will change dynamically in accordance with the share channels chosen in the Share Options tab.

        Mobile share options

        Here you can choose the colors, fonts, and text of the share options as they appear to a mobile user. 

        The settings here will change dynamically in accordance with the share channels chosen in the Share Options tab.

        Publishing the module

        Please note:

        Premium and Enterprise merchants who joined Yotpo Loyalty & Referrals after September 12th, 2023, will be able to see their published widget on-site only after activating the program via the Customer Preview.

        To learn more about the customer Preview, go to Testing your Loyalty Program on Shopify


        The module must be implemented post-purchase to encourage shoppers who just completed their purchase to share the great product with their friends.

        You can display a post-purchase referral request by deploying an instance of the module to your checkout page. 

        Once you’re done customizing your module instance, do the following:

        1. Click the Publish button at the top right corner.
        2. A popup with two pieces of code will appear:

        1. In a new tab, go to your Shopify admin
        2. Go to Settings > Checkout
        3. In the Additional scripts field, paste both snippets of code.
        4. Save your changes in Shopify.
        5. Click the Publish changes button in your Yotpo Loyalty & Referrals admin.

        Active/inactive module instance

        If your module is active (green dot), this means that any changes you publish will be reflected on your store if the module snippet is embedded.

        If your module is inactive (yellow dot), this means that any changes you publish/save will not be reflected on your store. This also means if you had the module snippet embedded and active on your store before, it will not be visible when inactive.


        Was this article helpful?