Free Products On-site Module
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.
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:
- In your Yotpo Loyalty &referrals main menu, go to Set Up Program > Direct Rewards.
- Click Create a New Coupon
- Choose coupon type as Free product
- Enter the Variant ID.
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:
- In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Rewards Page Builder.
- Click Create Rewards Page or click the existing page you want to edit.
- Click Redeem Points (Free Products) section or add a new section if you don't have one.
- Proceed below to the next step, "Customize settings".
Accessing as a module
- In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Redeem Points Modules.
- Scroll down to and click the Free Product section
- Click Edit on the instance you wish to edit or click "+ Create new"
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.
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.
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.
- Hover over the module you want to duplicate.
- Click the settings icon that appears.
- 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
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:
- 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>
- 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:
- Log in to your Loyalty admin
- Click On-site Modules > Rewards Page Builder
- Click Edit the page you want to publish
- Click Publish and a popup will appear.
- 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:
- Go to On-site Modules > Free Product Module.
- Click Edit the instance you want to publish.
- Click the Publish button.
- 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"