Free Products On-site Module

      Free Products On-site Module


        Article Summary

        Products


        Loyalty & Referrals
        Supported plans

        Platinum, Enterprise

        eCommerce Platform

        Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento)

        The free product module is a highly customizable way to let customers redeem their points for free products. You can deploy a new module in minutes, with no development required. 

        In this article find out how to access, customize, and deploy the free product module on your site.

        Is this article for me?
        If you wish to implement the module on a generic platform, please view the Implementing a Free Products Module on a Custom or Generic Platform article.

        Setting up a free product reward

        Before you can set up your Free Product Module, you need to have some free product options set up. Follow these steps to set up a free product: Log in to Yotpo Loyalty & Referrals admin and then:

        1. In your Yotpo Loyalty &referrals main menu, go to Set Up Program > Direct Rewards.
        2. Click Create a New Coupon
        3. Choose coupon type as Free product
        4. Enter the Variant ID.
        If you are using Shopify Plus, learn where to find the variant ID on Shopify

        Learn more about Offering Products as Redemption Options

        Once you've done this, you can now set up your free product module 

        Accessing the Editor

        Accessing via the Rewards Page Builder

        To create a new section via the Rewards Page Builder, do the following:

        1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Rewards Page Builder.
        2. Click Create Rewards Page or click the existing page you want to edit.
        3. Click Redeem Points (Free Products) section or add a new section if you don't have one.
        4. Proceed below to the next step, "Customize settings".
        Accessing as a module
        1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Redeem Points Modules.
        2. Scroll down to and click the Free Product section
        3. Click Edit on the instance you wish to edit or click "+ Create new"
        Please note:
        Your module won't appear on your site until you deploy it

        Customize the module

        There are three sections in the Free Product Module editor.

        Layout

        In this section, you can:

        • Choose which products will appear in the module 
        • Max images per screen
          Max images on desktop
          Max images on mobile 
        • Choose the image aspect ratio 
        • Drag & drop to arrange product layout 

        General appearance

        General appearance > General

        Fonts

        The primary font and secondary font are two fonts that will apply in several places throughout your module. 

        Advanced CSS editor

        If you'd like to make further customizations to the module, use our embedded CSS editor. If you are using the CSS Editor, 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

        We will not update a specific module instance if we detect that it will impact your live module version. Our team can only detect these issues if the CSS is in our editor.

        If you'd like to make further customizations to the module, use our embedded CSS editor. If need to make any overriding changes to the Free Product Redemption Module CSS, use this class name before the class you want to override:

        .yotpo-widget-products-redemption.yotpo-widget-override-css
        

        General appearance > Logged in state

        • Point balance 
          Points balance must include at least one variable, either {{current_point_balance}}, or {{points_as_credit}}.
          {{current_point_balance}} - This shows how many points the customer currently has. For example 500 points.
          {{points_as_credit}} - This shows how many points the customer has in terms of store credit. For example $5.00.
        • Redeem button
          Opens a confirmation message and confirmation buttons. The confirmation message reads: "Add this item to your cart?"

        Confirmation buttons

        • Primary button 
          Default: "Yes, add it"
        • Secondary button
          Default: "Cancel"
        • Success text
          Default "Product has been successfully added to your cart"

        General appearance > Optional restrictions

        There are two optional restrictions you can choose to apply to your free products.

        Per cart limit message

        By default, customers can only redeem one free product per cart. See below the default message:

        You can choose to enable or disable this restriction by doing the following:

        • Check the bubble to limit one free item per cart (default). 
        • Uncheck the bubble to disable the requirement. If the bubble is unchecked, customers will be able to add multiple free products to a single cart.

        Minimum purchase requirement message

        By default, customers are required to have at least one paid product in the cart to redeem a free product. See below the default message:

        You can choose to enable or disable this restriction by doing the following:

        • Check the bubble to require at least one paid item in the cart to redeem (default.)
        • Uncheck the bubble to disable the requirement. If the bubble is unchecked, customers will be able to add free products to cart with or without a paid product.

        Customizing product appearance

        Here you can upload a new product image, and change the name and how the product points cost appears in the module. We recommend a minimum size of 480px by 480px Images must be smaller than 2MB. We support JPG, PNG, SVG, and GIF.

        Appearance

        Product name

        This name is pulled from what you set in the loyalty admin, but you can change how it appears on the module. Changing it on the module will not affect the name in the catalog. If you change the name in the admin, it will automatically update in the module.

        Product points cost

        This field must contain the variable "{{points}}", which is the cost of the product as defined in your admin settings. Note, you can't change the number of points needed to redeem the product here, the points cost of the product can be controlled in your admin settings.

        Product Restrictions

        Note that if you choose to mark a product with the 'out-of-stock' label and also display the VIP Only Label, then only the "out of stock" flag will display.

        Out-of-stock label

        If this box is checked, an "out of stock" label will appear over the product, and customers will not be able to redeem it. By default, this box is unchecked and the label is not displayed.

        Please note:
        If a product goes out of stock, this will not be updated automatically.

        Restrict Product to specific VIP tiers

        If this box is checked, you can restrict this product to only certain VIP Tiers. The product will be hidden from customers who are not in the right tiers. By default, this box is unchecked and the item is not restricted to any VIP tier.

        You can choose a different tier restriction for each product individually.

        Display restricted product

        If this box is checked, the product will be displayed to all customers regardless of their VIP Tier status. A "VIP Only" label will appear over the product. You can edit the text of the label. By default, the label is not displayed.

        Show product to logged-out customers (yes/no)

        If you don't want logged-out customers to see restricted products, select no. You may want to use this option since you can only know what VIP tier a shopper belongs to if they are logged in. The default is set to no.

        Duplicating a copy (creating an instance)

        You can duplicate an existing module. This is useful if you want to create different versions, holiday themes, do A/B testing, or make changes to a module before deploying to your site.

        1. Hover over the module you want to duplicate.
        2. Click the settings icon that appears.
        3. Inside the stack menu, Click Duplicate.

        Publishing the module

        Publishing as a module

        To publish your Module onsite, you need to embed some code. For embedding a Module on any page other than Checkout, see this guide for Embedding On-site Modules on Your Store.

        Deploying via the Rewards Page Builder

        If you are building your Free Product section with the Rewards Page Builder, follow the steps for publishing your Rewards page.

        Deploying at checkout

        Merchants using Shopify
        The Module cannot be added to the Shopify checkout page.

        You can also deploy your free product module at your checkout page. When deployed on the checkout page, the module will appear in the form of a dropdown menu with the same products (names and price in points) exactly as you defined them in your Free Product module.

        See below an example of a Free Product Module deployed at checkout.

        To prepare for embedding Modules or Sections at checkout, do the following:

        1. Copy & paste this snippet once, and it will serve all the modules you may want to embed on your checkout page.
        <script src="https://cdn-
        widgetsrepository.yotpo.com/v1/loader/_5ByCnrcrJV9Ktgfhw_LXQ" async></script>
        1. Proceed to the next step below, according to how you are publishing.
        Publish at checkout with the Rewards Page Builder

        To publish a free product section at checkout via the Rewards Page Builder, do the following:

        1. Log in to your Loyalty admin
        2. Click On-site Modules > Rewards Page Builder
        3. Click Edit the page you want to publish
        4. Click Publish and a popup will appear.
        5. Under the Section snippets tab, copy the code of the section you want to embed.

        This means the section will appear both on your rewards page and also at checkout.

        Publish at checkout as a module

        To publish a Free Product Module at checkout, do the following:

        1. Go to On-site Modules > Free Product Module.
        2. Click Edit the instance you want to publish.
        3. Click the Publish button.
        4. Copy the second code snippet and embed it in your site code on your checkout page.

        Activated/deactived

        Activated

        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.

        Deactivated

        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. You're all set! 

        Advanced customizations

        Some additional customizations can be made to the module if you are savvy with code. See below the advanced options.

        The following attributes can be added to your module's code snippet, just after your instance ID.

        For example, if your module's code snippet looks like this:
        <div class="yotpo-widget-instance" data-yotpo-instance-id="0000"></div>

        Then add the attribute here:
        <div class="yotpo-widget-instance" data-yotpo-instance-id="0000" add-attribute-name=value> </div>

        If you want to add multiple attributes, add them one after the other, separated by spaces.

        Advanced Attributes
        • redeem-button-text="insert your own text here!"
          The text of the button to make the redemption free product.  Default - "REDEEM NOW"
        • apply-button-text="insert your own text here!"
          Default - "Apply"
        • dropdown-text="insert your own text here!"
          The text of the dropdown to choose a free product from the list in the checkout page. Default - "Choose Product"
        • login-button-text="insert your own text here!"
          The text of the button that take you to the login page in case the customer is logged out. Default - "REDEEM NOW"
        • point-balance-text="insert your own text here!"
          The text that presents the point balance of the customer. Default - "You have {{current_point_balance}} points"
        • Confirmation-step-title="insert your own text here!"
          The text that presents after a click on 'redeem free product', in order to verify the action of redeem. Default - "Add this item to your cart?"
        • confirmation-step-confirm-option="insert your own text here!"
          The text of the button to approve the redeem action. Default - "YES, ADD IT"
        • confirmation-step-cancel-option="insert your own text here!"
          The text of the button to reject the redeem action. Default - "CANCEL
          cost-text-redemption="insert your own text here!"
          The text of the cost of the product in points. Default - "{{points}} POINTS"
        • View-cart-text="insert your own text here!"
          The text of the button that redirects the customer to the cart. Default - "VIEW CART"
        • Go-back-text="insert your own text here!"
          The text of the button that takes the customer back to the main state, after the redeem action failed for any reason. Default - "GO BACK"
        • status-success-text="insert your own text here!"
          The text of the message that appears after the redeem action was a success. Default - "Product has been successfully added to your cart"
        • Status-failure-text="insert your own text here!"
          The text of the message that appears after the redeem action failed. Default - We could not add this product to your cart"
        • Has-no-paid-product-failure="insert your own text here!"
          The text of the message that appears when at least one paid product should be in the cart (only relevant if that setting is active). Default - "Add at least one paid product to your cart in order to redeem"
        • Has-free-product-failure="insert your own text here!"
          The text of the message that appears when customer try to redeem more than one free product (only relevant if that setting is active). Default - "You can only redeem one free product per purchase"

        Was this article helpful?