Pro Free Gifts

The Free Gifts module allows you to reward your customers with a gift if they hit a specified spending goal (spending-based offer) or apply a coupon code (coupon-based offer).

With Merchant Pro, you can set up as many gift offers as you want.

For each spending-based offer, you can specify which product(s) count toward its spending goal — you can add any product, just one individual product, or one or more product categories.

The Free Gifts module adds a floating gift icon to your website. On top of the icon, it also displays a counter that shows the number of gift offers in your store:

Floating gift widget in closed state

When a customer clicks the gift icon, a floating widget appears on the screen that shows the details of the available gifts, including:

  • the product names
  • the thumbnail images
  • the original prices
  • the remaining amount to be spent or the coupon code belonging to the offer
Floating gift widget in open state

Once a customer reaches the specified spending target or applies a coupon code, Merchant Pro adds the gift to the cart:

A gift added to the cart, frontend view of the Free Gifts module

Below, we’ll see how you can configure and enable Merchant Pro’s Free Gifts module on your WordPress site.

1. Open the Free Gifts Module

First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Boost Revenue section, and click the Free Gifts module to open its settings page:

Location of the Gifts module on the Merchant dashboard

2. Review the Module’s Settings

On the module’s settings page, you’ll find four groups of settings:

  • Floating Gift Widget – Here, you can add your gift offers one by one (see in detail in Step 6).
  • Settings – These options control the module’s behavior and appearance on the Cart page (see in detail in Step 3).
  • Gift Widget – These options let you configure the behavior, position, and icon of the floating gift widget (see in detail in Step 4).
  • Look and Feel – Here, you can customize the colors and size of the floating gift widget (see in detail in Step 5).

Right to the settings sections, you can find the Preview pane where you can see the design changes in real time as you’re customizing the module (if you click the gift icon inside the Preview pane, you can also preview the widget when it’s open):

Free Gifts module, admin page, overview

Now, let’s see each settings group one by one.

3. Configure the Module’s Behavior on the Cart Page

In the Settings section, you can configure the following options:

  • Gift based on spending type – Here, you can set up how the spending goals are calculated. The available options are Cart subtotal (additional discounts and charges are not included) and Cart total (additional discounts and charges are included).
  • Free text – This is the text of the gift price tag on the Cart page (default value: ‘Free’).
  • Cart item title text – This is the title that Merchant Pro shows below the gifted product’s name on the Cart page (default value: ‘Free Gift’).
  • Cart item description text – This is the description that Merchant Pro shows after the cart item title text (default value: ‘This item was added as a free gift’).

If you’ve changed any of the default values, click the Save button that appears in the top-right corner of the page:

Settings section of the Free Gifts module of Merchant Pro

4. Configure the Behavior and Position of the Gift Widget

The Gift Widget section gives you access to the following options:

  • Widget icon – Here, you can choose from five stylish gift icons for the floating gift widget.
  • Position – Here, you can configure where the gift widget will appear on your site. The available options are Top Right, Top Left, Bottom Right, and Bottom Left.
  • Distance – This option allows you to set the distance of the widget from either the top or the bottom of the page in the following way:
    • If you chose Top Right or Top Left, then the distance value is between the top of the widget area (when it’s open) and the top of the screen.
    • If you chose Bottom Right or Bottom Left, then the distance value is between the bottom of the widget area (when it’s open) and the bottom of the screen.
  • Show on pages – These checkboxes allow you to choose the pages where Merchant Pro will show the floating gift widget. The available options are Homepage, Shop page, Product page, and Cart page.

If you made any changes, click the Save button in the top-right corner of the page:

Gift Widget section of the Free Gifts module of Merchant Pro

5. Customize the Look and Feel of the Gift Widget

The Look and Feel section allows you to customize the width and colors of the floating gift widget, respectively:

  • Count background color – This is the background color of the counter that shows the number of available gift offers on your site (default value: #000).
  • Count text color – This is the text color of the counter above (default value: #fff).
  • Gift button background color – Here, you can change the background color of the gift button (default value: #362e94).
  • Gift button hover background color – Here, you can change the background color of the gift button when your customer moves the cursor over it (default value: #7167e1).
  • Gift button icon color – This is the color of the gift icon that appears on top of the gift button (default value: #fff).
  • Content width – This is the width of the content area of the gift widget when it’s open (default value: 300 px).
  • Content background color – Here, you can change the background color of the content area of the gift widget (default value: #fff).
  • Label background color – This is the background color of the call-to-action label that appears above each offer inside the widget (default value: #f5f5f5).
  • Label text color – This is the text color of the call-to-action label that appears above each offer inside the widget (default value: #212121).
  • Product text color – This is the text color of the name of each product inside the widget (default value: #212121).
  • Product hover text color – This is the text color of the name of each product inside the widget when the cursor is moved over it (default value: #757575).
  • Product price text color – This is the text color of the price tag inside the widget (default value: #999999).
  • Free text color – This is the text of the ‘Free’ label inside the widget (default value: #212121).
Look and Feel settings of the Free Gifts module of Merchant Pro

If you’ve changed any of the default values, click the Save button at the top of the page.

6. Create Your First Gift Offer

Now that all the module-level settings are configured, you can create your first free gift offer.

To do so, scroll up to the Floating Gift Widget section and click the Add New Offer button.

You can choose between a Spending Based and a Coupon Based offer:

Options of the Add New Offer button of the Free Gifts module

i. Set Up a Spending-Based Gift Offer

First, let’s see how to create a spending-based offer:

After selecting the Spending Based option, a new settings box will appear on the screen where you can create your free gift campaign. You’ll need to fill in the following options:

  • Offer name – The name of the offer; it will only appear on the module’s admin page.
  • Products that can be purchased to claim the gift – Here, you can choose the products that are included in this free gift offer. The available options are Any product, Specific product (start typing the name of the product, and Merchant’s live search functionality will show you the available options), and Product categories (you can select the product categories you want to add from a dropdown list).
  • Spending goal – This is the minimum amount in the currency of your store (e.g. $) that your customer needs to spend on the product(s) defined in the previous option to receive the gift. (You can change the currency of your store by going to WooCommerce > Settings > General > Currency options > Currency in your WordPress admin area.)
  • Product rewarded as gift – Here, you can use live search to select the product your customer will get as a gift when they reach the spending goal.
  • Spending goal target – The following three options allow you to configure the call-to-action label inside the floating gift widget in the three different states of the gift offer, respectively:
    • At 0% – The default text is ‘Spend {goalAmount} on any product to receive this gift!’. The {goalAmount} variable dynamically adds the spending goal you set for the offer.
    • Between 1 – 99% – The default text is ‘Spend {amountMore} on any product to receive this gift!’. The {amountMore} variable automatically calculates the difference between the Cart total or subtotal (based on the setting you configured in Step 3) and the spending goal.
    • At 100% – The default text is ‘Congratulations! You are eligible to receive a free gift.’.
Settings of a spending-based offer of the Free Gifts module

When all the settings are configured, click the Save button at the top of the page.

ii. Create a Coupon-Based Gift Offer

To set up a coupon-based gift offer with Merchant Pro, first, you’ll need to create the coupon using WooCommerce’s built-in options.

To do so, open the Marketing > Coupons settings in your WordPress admin area (the Marketing menu is added by WooCommerce; if you don’t see this option, check if the ‘Enable the use of coupon codes’ option is enabled on the WooCommerce > Settings > General page), and click the Add coupon button:

The Coupons admin page of WooCommerce with the Add coupon button

When the coupon editor opens, name your coupon (this is the coupon code that your customer will need to enter on the Cart page; e.g. FREEGIFT), and enter the following values into the Coupon data section:

  • General > Discount type: Fixed cart discount
  • General > Coupon amount: 0 (This needs to be set to zero because customers will get a free gift in exchange for the coupon.)

In the Usage restriction tab, you can also create conditions for your coupon, such as minimum and maximum spend, included and excluded products (if you leave this field empty, WooCommerce will apply the coupon to all products in your store), and more.

When the settings are configured, click the Publish button at the top of the page:

User interface of the Coupon editor of WooCommerce

Once the coupon is published, it will appear on the Marketing > Coupons page where you can later edit or delete it:

FREEGIFTS coupon showing up on the Coupons page of WooCommerce

Now that you’ve created the coupon, you can access it from Merchant Pro’s Free Gifts module.

Return to the Merchant > Free Gifts page, click the Add New Offer button, and select the Coupon Based option:

Floating gift widget options of a coupon-based offer

When the settings box of the new offer appears on the screen, configure the following options:

  • Offer name – The name of the offer; it will only appear on the module’s admin page.
  • Product – This is the product that your customers will get as a gift. Start typing the name of the product and Merchant’s live search feature will show you the available options from your store.
  • Use coupon to receive this product for free – Here, you can select the coupon you want to use for this offer using a dropdown list that will show all the coupons from WooCommerce’s Marketing > Coupon menu.
Floating gift widget options of a coupon-based offer

When the settings of the coupon-based offer are configured, click the Save button in the top-right corner of the page.

7. Enable the Free Gifts Module

Now, it’s time to activate the module.

To do so, click the Enable button at the top of the module’s page:

Location of the Enable button on the Gifts module's admin page

Once the Free Gifts module is activated, the floating gift widget populated with your offer(s) will appear on your site.

8. Create More Gift Offers

With Merchant Pro, you can create as many free gift offers as you want.

To add another offer, click the Add New Offer button below the existing offer in the Floating Gift Widget section, configure its settings, and then click the Save button at the top of the page.

When the new offer is saved, you can close its settings section and review all your gift offers in a list view:

Floating Gift Widget section with three free gift offers added

You can also change the priority of your gift offers by rearranging them using drag and drop (Merchant Pro will show the first offer at the top location in the floating gift widget, the second offer at the second location, and so on).

Video Walkthrough

Check out the video below for a live demo of the Free Gifts module: