You can use order limits, discount coupons and saved product searches to define gifts with purchase.

Our example illustrates how to create a discount coupon that the customer can enter at checkout to receive a 100% discount on a selected product. You can inform the customer about it personally or add a functionality to the theme to display the discount code to the customer when a product has been added to the shopping cart.

Below you can see how to set up gifts with purchase step by step.

1. Creating a saved product search

First, create a saved product search that finds the gift with purchase.

  1. Click Create saved search in the left-hand pane on the Products page.

    If necessary, see how to create saved searches.

  2. Define the following search term: Include > Property > Product name > Exactly > [GIFT'S NAME].

    You can also define multiple gifts by creating a separate, hidden product category for them and targeting the saved product search at the category.

  3. Make sure that the product search finds only the relevant products, and save the search.

2. Creating a discount coupon

Next, create a discount coupon to your online store, and target it at the product search you've just created.

  1. Click New coupon on the Orders > Discount coupons page.
  2. Define the following settings for the discount coupon:
    • Type: Campaign
    • Discount: 100%, which can only be used to pay for selected products
    • Applicable for products: [THE PREVIOUSLY CREATED PRODUCT SEARCH]
  3. Save the discount coupon.

3. Setting order limits

Finally, set the free gift's order quantity to 1 by using order limits.

  1. Open the free gift for editing on the Products page.

    Optionally, see how to edit products.

  2. Set the minimum and maximum order quantities to 1 in the item Purchasing price, product numbers & suppliers information > Order limit.
  3. Save the product.

Now the customer can enter the discount code at checkout and add 1 item of the defined product to the shopping card at a 100% discount.

4. Editing your store's theme (optional)

You can also add to your online store a functionality for displaying a notification about the discount code to customers when they add products to the shopping cart.

Below you can see a sample JavaScript code that uses Barebones' tools to display information about the discount in a modal window. The window displays a text fetched from a content page whose ID is 5, and the displayed contents are defined in the file helpers/modals/example.html.

The code is added to the afterAddProduct() hook used for initializing the shopping cart plugin, which can be found in the scripts/custom.js file if your theme is based on Barebones.

afterAddProduct: function ($buyForm) {
  MCF.Loaders.hide($buyForm);
  MCF.Theme.updateMiniCarts()
    .then(function () {
      MCF.Drawers.toggleByName('cart');
  });
  $.magnificPopup.open({
  	type: 'ajax',
  	items: {
  		src: '/interface/Helper?file=/helpers/modals/example&infopage=5'
  	}
  }, 0);
},