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.
@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. Click profile pic on forums for options to connect and ALWAYS include context.
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.
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
Identify the collection or product tag you want to track (e.g., collection-handle or a tag like gift-eligible).
Use Ajax Cart API to read the cart contents on every update.
Trigger a popup (custom modal) when count of eligible items reaches 3.
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>
Shopify’s native Buy X Get Y discount is a backend discount rule, it can be triggered via discount codes and requires customers to add gift products manually to their cart.
Even for a simple free gift pop up offer, you’ll need a third party app.
I recommend you try Monk, a built-for-Shopify app that can create complex free gift offers including the one you’re looking for: a Free Gift- pop up, triggered when items from a specific category are added to the basket.
A free gift pop-up is recommended when you are offering multiple gifts to the customer to choose from or a gift product that has variations like size, color etc.
For a better user experience and the product to be automatically added to the cart I recommend you set up a Free Gift-Auto Add offer using Monk, which adds the gift product of your choice to the customer’s basket when 3 items from a specific collection is added to the basket.
Monk doesn’t slow down your store, as it does not take over the cart, rather blends seamlessly with your existing Shopify cart. The widgets are fully customizable to match your store’s colors and brand guidelines.
Click profile pic on forums for options to connect and ALWAYS include context.
Please see an overview below:
