Create a Free Gift Popup

Technical Q&A
,
1

Hi,

I am trying to create a pop up for my shop where if 3 items from a specific category are added to the basket, a pop up is triggered to allow the customer to add a free gift.

I have set up the offer with the Buy X Get Y discount but I have hit a bit of a roadblock with the popup. There appears to be a few apps which could do this for me but they all have extra bloat and subscription costs. It seems silly to potentially slow down my site which extra code I don’t need for a simple pop up.

Any recommendations would be greatly appreciated!

2 Likes
3

Shopify’s Buy X Get Y discount only applies if customer adds both items to cart. And it appears on cart/checkout only. Anything else requires an app.

4

@EFJ9678 Teaching how to make such a thing is beyond the scope of the forums, google web development making a popup HTML CSS and Javascript.
THEN use the forums showing your work.

If your a merchant that needs it implemented for you then reach out to me for theme customization services.
:speaking_head: :postbox: Click profile pic on forums for options to connect and ALWAYS include context.

5

Hi,

I recommend using a free gift app like BOGOS App. With BOGOS, you can easily create a pop-up that triggers when 3 items from a specific category are added to the cart, allowing customers to add a free gift.

This is how the gift slider will pop-up:

image
image1261×721 107 KB

You can manage your promotions smoothly and customize offers, all within a single app, without significantly affecting your website.

:backhand_index_pointing_right: Please see an overview below:

  • Set up condition:

image
image1562×806 136 KB

  • Set up free gifts

image
image1508×812 83.7 KB

You can start to try BOGOS for FREE here!

6

Hi @EFJ9678 ,
You can definitely achieve this without installing a heavy app, as long as you’re comfortable adding a small custom script. Since you already set up the Buy X Get Y discount, all you need is a lightweight popup that checks the cart in real time and triggers when the customer adds 3 items from a specific collection.

What you need to do

  1. Identify the collection or product tag you want to track (e.g., collection-handle or a tag like gift-eligible).
  2. Use Ajax Cart API to read the cart contents on every update.
  3. Trigger a popup (custom modal) when count of eligible items reaches 3.
  4. Add a button inside the popup that adds your free gift product using Ajax.

Example lightweight solution (no app required)

Add this inside your theme’s theme.liquid BEFORE </body>:

<div id="gift-popup" style="display:none;" class="popup">
  <div class="popup-content">
    <h3>You've unlocked a free gift!</h3>
    <p>Add your free item to the cart.</p>
    <button id="add-gift-btn">Add Free Gift</button>
    <button id="close-popup">Close</button>
  </div>
</div>

<script>
  function checkGiftEligibility() {
    fetch('/cart.js')
      .then(res => res.json())
      .then(cart => {
        let count = 0;

        cart.items.forEach(item => {
          // check collection or tag
          if (item.product_type === 'YOUR TYPE' || item.tags.includes('gift-eligible')) {
            count += item.quantity;
          }
        });

        if (count >= 3 && !sessionStorage.getItem('giftShown')) {
          document.getElementById('gift-popup').style.display = 'block';
          sessionStorage.setItem('giftShown', 'true');
        }
      });
  }

  // Run on page load and whenever cart updates
  document.addEventListener('DOMContentLoaded', checkGiftEligibility);
  document.addEventListener('cart:updated', checkGiftEligibility);

  // Add your gift
  document.getElementById('add-gift-btn').onclick = function () {
    fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: YOUR_GIFT_VARIANT_ID, quantity: 1 })
    }).then(() => location.reload());
  };

  document.getElementById('close-popup').onclick = function () {
    document.getElementById('gift-popup').style.display = 'none';
  };
</script>