Free gift progress

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.

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.

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.

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

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.