# Free gift progress

Chapter 11 of the Peel user guide.

Free gift progress turns "how much more for the free one?" into a bar. A sentence and a chunky bar sit at the top of the bag drawer and in the cart page's summary, with a die-cut marker for each reward: "Spend **$10 more** for a free sticker." When the bag reaches the amount, the marker flips to a tick, the gift appears in the bag by itself as a line tagged **Free gift**, and the sentence moves on: "Spend $11.50 more for free shipping. Free sticker added." If the bag drops below the amount, the gift quietly leaves again.

Peel adds and removes the gift. **It can't make the gift free.** That takes a Shopify discount, which you create once. Until you do, a gift line carries its real price, with no **Free gift** tag, and the shopper is charged for it.

> **Note:** The bar is on in every preset, promising a reward with no gift product behind it, so it says "Free sticker unlocked" and nothing goes in the bag. Finish this chapter before you publish, or turn off **Theme settings › Free gift progress › Show the free-gift bar**.

## Set it up

**Step 1: create the gift product.**

1. In admin, go to **Products** and add a product: the sticker you're giving away. Give it a real price, such as $3.00, and one variant. If it has more than one, the theme adds the first one in stock.
2. Set its stock, and track it if you want the gift to run out when you do.
3. Add the tag `free-gift`, so step 2 can leave it out.
4. Make sure it's published to your **Online Store** sales channel.
5. In the **Status** section, choose **Unlisted** and **Save**. An Unlisted product can be sold, but it doesn't show up in search, collections or recommendations, so nobody browses to it and it stays out of your grids.

**Step 2: create a collection of what counts towards the gift.**

The discount needs a list of products to measure the spend against, and it has no "all products" choice. So make one collection of everything you sell, with the gift left out:

1. In admin, go to **Products › Collections** and create a collection. Call it "Counts towards the free gift".
2. Add a condition, so new products join by themselves: **Tag does not include** `free-gift`.
3. **Save**. You don't need to add it to a menu.

**Step 3: create the discount.**

1. In admin, go to **Discounts** and click **Create discount**.
2. Choose **Buy X get Y**.
3. Under **Method**, choose **Automatic discount**, and give it a **Title**, such as "Free sticker". Shoppers see this at checkout.
4. Under **Customer buys**, choose **Minimum purchase amount** and enter the same number as **Spend this much**, such as 20.00. Under **Any items from**, choose collections and add the collection from step 2.
5. Under **Customer gets**, set the quantity to 1. Under **Any items from**, choose products and add your gift. Under **At a discounted value**, choose **Free**, which is 100% off.
6. Tick **Set the maximum number of uses per order** and enter 1.
7. Under **Eligibility**, leave **All customers**.
8. Under **Combinations**, tick any discount classes it should work alongside, such as the shopper's discount codes.
9. Set **Active dates** to start today, with no end date, and **Save**.

**Step 4: tell the theme.** In **Theme settings › Free gift progress**, set **Spend this much** to the same amount, choose your **Gift product** under **First reward**, and rewrite **Reward name** and the two messages if your gift isn't a sticker.

**Step 5: test it.** Open your store in a private window and add products up to the amount.

| The gift line in the bag shows | What it means |
| --- | --- |
| **Free gift** and **Free** | It's working. Check that the total at checkout agrees. |
| A price, and no **Free gift** tag | The discount isn't applying, and the shopper will be charged. There's no Remove on a gift line, so they can't take it out. Check the discount's minimum, its collection and its gift. |
| No gift line, and the bar says "Free sticker unlocked" | No **Gift product** is chosen, or the gift can't be sold: check its status and that it's published to the Online Store. |

Then take the bag back under the amount and check that the gift leaves.

## The gift's own price, and the minimum

Three numbers have to agree, and the gift's price is the one that catches people out.

**The bar never counts the gift.** It adds up the line prices of everything else in the bag, so a $3 gift can't pay for itself. With $18 of stickers, the bar stays at $18, and no gift is added.

**The discount counts what's in its collection,** at full price. With the gift left out of the collection, the minimum is simply your **Spend this much**: 20.00 for a $20 reward. That's why step 1 tags the gift and step 2 leaves it out.

**If the gift is in the collection, its price counts.** The minimum would then be reached by $17 of stickers plus a $3 gift, by anyone who adds the gift by hand through its direct link. If you can't keep it out, set the minimum to **Spend this much plus the gift's price**: 23.00 for a $20 reward with a $3 gift.

> **Note:** Don't use **Amount off products** at 100% on the gift. It looks like the obvious choice, but Shopify measures that discount's minimum against the selected products only. With only the gift selected, the bag's other products don't count, a minimum of 20.00 can never be reached, and every shopper pays for their gift.

**If you run other product discounts,** the two counts can drift apart in a few cases. The bar counts lines after their discounts, so a sale can keep a bag under the amount even when Shopify's full-price count is over it: there's no gift, and no harm done. The other way round, Shopify doesn't count an item in the minimum if a combinable product discount is already on it, so a bag can reach the bar's amount and get the gift line while the discount doesn't apply. Test a sale before you run it, as in step 5.

## Second reward and free shipping

**Second reward** works the same way, with its own gift, amount and discount. The rewards sort themselves by amount, so you can enter them either way round, and a shopper who reaches both keeps both gifts. Set the minimum of each discount to its own amount.

**A milestone with nothing added** is a reward with no **Gift product**: the bar shows it and the bag adds nothing. Use it for something you handle yourself. When it's reached, the bar says "[Reward name] unlocked" and leaves out **Message once it is reached**, because nothing was added.

**Free shipping** joins the bar as the last step when **Theme settings › Commerce › Free shipping over** is above 0, with a truck for a marker: "Spend $11.50 more for free shipping", then "Free shipping unlocked". That amount, and those words, only change the theme's messages: set the real free shipping rate in **Settings › Shipping and delivery**. To reword it, go to **Edit default theme content** (chapter 2).

## What shoppers see

| Where | What it says |
| --- | --- |
| **The bag** (drawer and cart page) | The sentence, the bar with its markers, and labels under them: "$20 free sticker", "$35 free shipping". Markers are evenly spaced, so two close amounts never collide on a phone, and the fill reaches each marker exactly at that amount. |
| **The product page** | The nudge under the add button: "Add this and you're **$14.50 away** from a free sticker." It counts the bag plus this variant against the next reward, and takes the reward's name from your message, after "[amount] more for". A message written another way shows whole. |
| **The gift line** | The product, a **Free gift** tag and **Free**, with no stepper and no Remove, because the bag adds and takes it. With no discount it shows its real price and no tag. |

The sentence is the next reward's **Message before it is reached**, then the latest reached reward's **Message once it is reached**, or "[Reward name] unlocked" if there's no gift in the bag to go with it. With everything reached, it's every "reached" message in order. With an empty bag, or no rewards set, there's no bar. In the theme editor the bar shows a sample at 62%, and the gift is never added while you're editing.

## Limits

* **Buy it now and accelerated checkout skip the bag,** so those shoppers get no gift. To send everyone through the bag, turn off **Show accelerated checkout buttons** in the Buy buttons block.
* **Only shoppers paying in your store's currency** see the bar or get the gift, because the amounts can't be converted reliably (chapter 14). A gift already in a bag leaves if the shopper changes currency.
* **Without JavaScript** the bar shows but no gift is added.
* **The gift's stock is real.** A sold-out gift can't be added, and the bar reads "Free stickers are all gone for now" while it still fills. That sentence is fixed text: to reword it, for a washi sample say, go to **Edit default theme content** (chapter 2).
* **The bag counts the gift** in its item count, because it's a real thing in the bag. It also counts for shipping weight, so give it a realistic weight.
* **Turning the bar off** stops gifts being added or removed. A gift already in a bag becomes an ordinary line, with a stepper and a Remove.