Offer Free product at checkout or add to cart page

[alexian]

I want to offer a free product to customers on the 'Add to Cart' page after they click 'Add to Cart.' Ideally, I would like a pop-up or some kind of notification to show on the 'Add to Cart' page so that the user knows they can add a free product. However, the issue I’m facing is that I can only display the free product on the product page using this app: 'https://apps.shopify.com/easify-product-options?st_source=autocomplete.' But I can’t get it to show on the 'Add to Cart' page.

And one more thing: if a customer selects 5 or 6 products and chooses 1 free product with each, only 1 free product should go to the checkout page. It shouldn’t be that if there are 5 products, then 5 free products are being taken to the checkout.

[Kate_WSQ]

Hi @EasifyApps  here is a question for you.😊

[EasifyApps]

Thank you so much for the tag!

[Ellie-BOGOS]

Hi @alexian 

This is Ellie from BOGOS, #1 Promotion App on Shopify.

BOGOS can exactly answer your question. Here's what the app can do:

1) The app has a popup or gift slider on cart page. When customers meet the condition of your offer, they will see the popup and choose the gift before heading to checkout.

2) BOGOS allows you to limit the number of gifts customers can get from the offer. You can setup so they get only 1 free product from the offer.

Install BOGOS to set it up on your store (4.9 overall rating, 1985+ reviews) ⭐

If you have any questions, you can reply to my message here or contact us via the 24/5 Live Chat!

Wishing you the best with the business,

Ellie

BOGOS Team

[Small_Task_Help]

Hi,

There are two solutions: Use the app

Or go for custom coding 

Javascript code example to add popup 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.add-to-cart-button').forEach(function(button) {
      button.addEventListener('click', function() {
        // Code to show popup
        Swal.fire({
          title: 'Free Gift!',
          text: 'Add a free product to your cart!',
          icon: 'success',
          confirmButtonText: 'Add Free Product'
        }).then((result) => {
          if (result.isConfirmed) {
            // Code to add free product
            addFreeProduct();
          }
        });
      });
    });
  });

  function addFreeProduct() {
    // Code to add the free product to the cart
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        items: [{
          id: YOUR_FREE_PRODUCT_VARIANT_ID,
          quantity: 1
        }]
      })
    });
  }
</script>

Code for "one per order" example

function addFreeProduct() {
  // Check if free product is already in cart
  fetch('/cart.js')
    .then(response => response.json())
    .then(cart => {
      let freeProductInCart = cart.items.find(item => item.id === YOUR_FREE_PRODUCT_VARIANT_ID);
      if (!freeProductInCart) {
        // Code to add the free product
        fetch('/cart/add.js', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            items: [{
              id: YOUR_FREE_PRODUCT_VARIANT_ID,
              quantity: 1
            }]
          })
        });
      }
    });
}

[alexian]

Can you Please also mention this where i have to paste this code?

[EasifyApps]

Hi @alexian,

We’re currently developing a feature for a one-time charge per cart, which will allow you to limit the number of free products in the cart regardless of how many different main products a customer buys. (At the moment, the app only supports a one-time charge per product).

We apologize that the current app version doesn’t fully meet your needs. We’ll be sure to inform you as soon as the new feature is released. Thank you for your patience!

[AbulHasib]

Hey @alexian , I suggest using the Bevy Design pop-up builder for this.  

Our app has an "Add to Cart" trigger that will show a pop-up when customers add a product to their cart. 

You can use this pop-up to inform customers about the free product in their cart. Setting up a pop-up takes just a few minutes with pre-made templates.

Bevy Design gives you complete control over your pop-ups. You can configure them and set up cart values, defining which products and how many of them will be considered free items.

Bevy Design offers a free plan to let you test and see how it can benefit your store. 

Feel free to reach out if you need help setting up your campaign.

Link of the app - Shopify App Store

For additional information, visit our website: Bevy Design