Exit offers are, in fact, pop-ups configured to display when a visitor moves the mouse up to the close button and is about to leave your site. They aim to grab attention for a few moments and try to hold the buyer.

To configure an exit offer:

1. On the Popups page of your store's Admin area (Discounts -> Popups), start creating a pop-up as described here.

2. When on the step Popup Behavior, set the Display mode option to "Show a popup when a visitor wants to live site." This reveals special fields in addition to the regular ones to configure an exit offer.

  • Min Qty in cart: Specify a minimum product quantity in the cart for an exit offer to become active for visitors.

  • Max Qty (0 - no limit): Specify a maximum product quantity in the cart for an exit offer to become active for visitors.

  • Min subtotal: If applicable, specify a minimum cart subtotal for an exit offer to become active for visitors.

  • Max subtotal (0 - no limit): Specify a maximum cart subtotal for an exit offer to become active for visitors.

3. Complete the offer configuration and click Update to save the changes.

To style an exit offer, you can:

  1. use the styles from the Popup Appearance section when formatting the pop-up message;

  2. use the Theme Tweaker add-on to add your styles for the following CSS selectors:
    .exit-offer-popup-dialog.no-title .exit-offer-contents
    .ui-dialog.exit-offer-popup-dialog .ui-dialog-titlebar-close
    .ui-dialog.exit-offer-popup-dialog

    You can also style a particular exit offer pop-up by using its ID number; for example, .exit-offer-popup-dialog-2.no-title .exit-offer-contents.

When testing your custom styles, use the following command in your browser debug console to make the exit pop-up appear again on the next page refresh. jQuery.removeCookie("exit_offer_shown");


Now clear browser cookies, refresh the page, and add an item to the cart to see how the exit offer changes.

Did this answer your question?