• Mon. Oct 18th, 2021

    How to Retarget Abandoned Carts with a Promo Popup Using Divi’s Condition Options

    Byadmin

    Oct 14, 2021


    Retargeting abandoned carts is an effective marketing technique that incentivizes customers to buy the items they abandoned after adding them to their cart on your website. One effective strategy for bringing those customers back to finish the purchase is to offer a discount on the items they intended to buy. The tricky part is to offer those discounts only to users who have abandoned their carts.

    Divi’s condition options include display conditions that allow you to show or hide content based on a user’s WooCommerce cart content and page visits. This condition combo makes it possible to retarget those users who have abandoned their carts with a discount or promo popup.

    In this tutorial, we are going to show you how to retarget abandoned carts by creating a smart promo popup that shows on a landing page only if the user has items in their cart and has visited the checkout page.

    Let’s get started!

    Sneak Peek

    Here is a quick look at the promo popup we’ll build in this tutorial.

    This promo popup will display on the page if the user has added a product to their cart and visited the checkout page.

    Download the Retargeting Abandoned Cart Promo Popup Layout for FREE

    To lay your hands on the layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    To import the section layout to your Divi Library, navigate to the Divi Library.

    Click the Import button.

    In the portability popup, select the import tab and choose the download file from your computer.

    Then click the import button.

    Once done, the section layout will be available in the Divi Builder.

    Understanding the Concept

    Before getting into the nitty-gritty building process of the tutorial, it might help to understand the basic concept of what we are going to build. The idea is to use the Divi Builder to build a promo popup on an existing landing page. Once the promo popup section is built, we want to add the condition options that will display the section when both of the following conditions are met.

    1. The user has contents in their Cart
    2. The user has visited the Checkout page

    This can be done using Divi’s built-in condition options when editing the section (or any Divi Element).

    Once the condition options are set for that section (or promo popup), we can now retarget users who have abandoned their cart by displaying the popup whenever they have met the conditions. The process would go something like this…

    1. The user visits the landing page without the promo popup displayed
    2. The user adds contents to their Cart (meeting condition #1)
    3. The user visits the Checkout page (meeting condition #2) but for whatever reason, the user doesn’t complete the checkout process and leaves.
    4. Then later the user revisits the landing page that now displays the promo popup which redirects them to the complete the checkout process with a discount.

    Pretty cool stuff! Now that you understand the concept, let’s get to the tutorial, shall we?

    What You Need to Get Started

    expanding corner tabs

    To get started, you will need to do the following:

    1. If you haven’t yet, install and activate the Divi Theme.
    2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
    3. Choose the option “Build From Scratch”.

    After that, you will have a blank canvas to start designing in Divi.

    Retargeting Abandoned Carts with a Promo Popup using Divi’s Condition Options

    Part 1: Uploading the Premade Landing Page

    For this tutorial, we are going to add the promo popup to the landing page of a Divi website. To jumpstart this process, we are going to import the Perfumery Landing Page layout from within the Divi Builder.

    To do this, open the settings menu and click the Add From Library icon. Then search and find the Perfumery Layout Pack and click to use the Perfumery Layout Page Layout.

    retargeting abandoned carts with a promo popup using divi's condition options

    Part 2: Building a Fixed Section as the Promo Popup Container

    Once the landing page is loaded. Scroll to the bottom of the page and add a new regular section below the footer section of the page.

    retargeting abandoned carts with a promo popup using divi's condition options

    Section Settings

    Width and Padding

    Next, update the section settings with a custom max-width and padding as follows:

    • Max Width: 500px
    • Padding: 10px top, 10px bottom

    retargeting abandoned carts with a promo popup using divi's condition options

    Border

    Then give the section a border.

    • Border Width: 15px
    • Border Color: #f6f4f2

    retargeting abandoned carts with a promo popup using divi's condition options

    Box Shadow

    Once the border is in place, add a box shadow to the section for a little depth:

    • Box Shadow: see screenshot
    • Box Shadow Blur Strength: 38px
    • Shadow Color: rgba(203,146,116,0.6)

    retargeting abandoned carts with a promo popup using divi's condition options

    Animation

    To give the popup a delayed animation, update the animation style as follows:

    • Animation Style: Flip
    • Animation Direction: Left
    • Animation Duration: 3000ms

    This will show the popup section 3 seconds after page load with a nice flip animation.

    retargeting abandoned carts with a promo popup using divi's condition options

    Position

    Under the Advanced tab, update the position so that the section remains fixed at the bottom left of the browser window.

    • Position: Fixed
    • Location: Bottom Left

    retargeting abandoned carts with a promo popup using divi's condition options

    CSS Class

    Eventually, we are going to add a clickable “X” icon that will close/hide the popup. We need to add a custom CSS Class to the section in order to target it with jQuery.

    Enter the following CSS Class:

    • CSS Class: et-promo-popup

    retargeting abandoned carts with a promo popup using divi's condition options

    Part 3: Adding Condition Options to Section

    Once the section (our popup container) is built, we are ready to add the condition options that will display the section when both of the following conditions are met.

    1. The user has contents in their Cart
    2. The user has visited the Checkout page

    Display Condition 1: Cart Contents

    First, we are going to add a display condition that will display the section/popup whenever the user has contents in their cart.

    To do this, go to the advanced tab under the section settings. Then click the plus icon to add a new condition.

    In the dropdown menu, select the Cart Contents condition.

    In the Cart Contents settings popup, make sure the option Display Only If User’s Cart is set to “Has Products”.

    Then save changes.

    NOTE: This condition is specific to Divi sites using WooCommerce.

    retargeting abandoned carts with a promo popup using divi's condition options

    Display Condition 2: Page Visit

    Next, we are going to add a display condition that will display the section/popup whenever the user has visited a specific page, which, in this case, will be the Checkout page on a WooCommerce site.

    To do this, go to the advanced tab under the section settings. Then click the plus icon to add a new condition.

    In the dropdown menu, select the Page Visit condition.

    In the Cart Contents settings popup, make sure the option Display Only If User is set to “Has Visited a Specific Page”. Then select the Checkout page from the list of pages in the popup.

    Then save changes.

    retargeting abandoned carts with a promo popup using divi's condition options

    Display If All Conditions Are True

    Since we have multiple conditions in play, we can choose to display the section if any or all conditions are true.

    In this case, it makes sense to display the promo popup when all conditions are true (the user has contents in their cart and they have visited the check-out page).

    Under Display Conditions, select the following:

    • Display if all conditions are true

    retargeting abandoned carts with a promo popup using divi's condition options

    At this point, the condition functionality we are looking for is already in place to show the section only when a user has cart contents and has visited the checkout page. Now, all we need to do is fill the section with the content needed to create the promo.

    Part 4: Creating the Promo Popup Content

    To create the content for the promo popup, we are going to add four modules:

    1. A blurb module with a clickable X icon so users can close the popup
    2. A text module for the title and body text
    3. Another text module for the promo code
    4. And a button module that will redirect to the checkout page so users can complete the purchase.

    Creating the “X” Icon to Close the Popup

    The Row for the Icon

    Before we add the “X” icon blurb, add a new one-column row to the section.

    retargeting abandoned carts with a promo popup using divi's condition options

    Update the row settings as follows:

    • Gutter Width: 1
    • Width: 100%
    • Padding: 0px top, 0px bottom

    retargeting abandoned carts with a promo popup using divi's condition options

    Then give the row an absolute position with a higher z index as follows:

    • Position: Absolute
    • Z Index: 12

    retargeting abandoned carts with a promo popup using divi's condition options

    The Icon

    To create the “X” icon to close the popup, add a new blurb module inside the row.

    retargeting abandoned carts with a promo popup using divi's condition options

    Take out any default Title or Body text from the blurb content. Then click to use the X icon for the blurb.

    retargeting abandoned carts with a promo popup using divi's condition options

    Under the design tab, update the following:

    • Icon Color: #ddd
    • Icon Font Size: 40px

    retargeting abandoned carts with a promo popup using divi's condition options

    • Width: 40px
    • Module Alignment: right
    • Height: 40px

    retargeting abandoned carts with a promo popup using divi's condition options

    Under the Advanced tab, add the following custom CSS class to the blurb:

    • CSS Class: et-close-popup-icon

    We will need to target this class with our jQuery later.

    retargeting abandoned carts with a promo popup using divi's condition options

    Creating the Title and Body Text for the Popup

    The other modules we are going to add will need a separate row. Add a new one-column row under the previous row containing the blurb icon.

    retargeting abandoned carts with a promo popup using divi's condition options

    Then update the row settings as follows:

    • Gutter Width: 1
    • Width: 100%
    • Padding: 0px top, 20px bottom, 40px left, 40px right

    retargeting abandoned carts with a promo popup using divi's condition options

    To add the Title and Body content, add a new text module inside the new row.

    retargeting abandoned carts with a promo popup using divi's condition options

    Update the content inside the body area with the following HTML:

    <h2>Get 20% Off!</h2>
    Use the following coupon code during checkout to get 20% off your perfume order when you buy today! This offer is only available for a limited time.
    

    retargeting abandoned carts with a promo popup using divi's condition options

    Under the design tab, update the text styles as follows:

    • Text Font Weight: Semi Bold
    • Text Text Size: 18px
    • Text Line Height: 1.8em
    • Text Alignment: Center
    • Heading 2 Font: Cormorant Garamond
    • Heading 2 Font Weight: Medium
    • heading 2 Text Color: #000
    • Heading 2 Text Size: 54px (desktop), 38px (tablet and phone)

    retargeting abandoned carts with a promo popup using divi's condition options

    Creating the Promo Code for the Popup

    To create the promo code, add a new text module under the previous one.

    retargeting abandoned carts with a promo popup using divi's condition options

    Update the body area with the text “Code: Perfumeoff”

    retargeting abandoned carts with a promo popup using divi's condition options

    Under the design tab, update the following:

    • Text Font Weight: Semi Bold
    • Text Text Color: #cb9274
    • Text Text Size: 16px
    • Text Letter Spacing: 2px
    • Text Alignment: Center

    retargeting abandoned carts with a promo popup using divi's condition options

    • Margin: 15px top, 15px bottom
    • Padding: 15px top, 15px bottom
    • Border Width: 4px
    • Border Color: #f4e8dc
    • Border Style: Dashed

    retargeting abandoned carts with a promo popup using divi's condition options

    Creating the Button for the Popup

    In order to create the button, copy the button module of one of the existing buttons on the premade layout.

    retargeting abandoned carts with a promo popup using divi's condition options

    Then past the button module under the promo code text module.

    retargeting abandoned carts with a promo popup using divi's condition options

    Update the button text and alignment as follows:

    • Button Text: Use Coupon at Checkout
    • Button Alignment: Center

    retargeting abandoned carts with a promo popup using divi's condition options

    Don’t forget to add a link to the checkout page. To do this, you can use add a dynamic page link as the button link URL to your existing checkout page.

    retargeting abandoned carts with a promo popup using divi's condition options

    Custom Code to Close the Popup When Clicking the “X” Icon

    For our final step, we need to add a quick snippet of CSS and jQuery to close the popup when clicking the “X” icon.

    To add the code, add a new code module under the button.

    retargeting abandoned carts with a promo popup using divi's condition options

    Then paste the following CSS making sure to wrap the code in the necessary style tags.

    .et-close-popup-icon:hover {
      cursor: pointer;
    }
    

    retargeting abandoned carts with a promo popup using divi's condition options

    Under the last style tag containing the CSS snippet, paste the following jQuery making sure to wrap the code with the necessary script tags.

    (function ($) {
      $(document).ready(function () {
        $(".et-close-popup-icon").on("click", function() {
          $(".et-discount-popup").slideUp("slow");
        })
      });
    })(jQuery);
    

    retargeting abandoned carts with a promo popup using divi's condition options

    Final Result

    Currently, the promo popup will remain hidden until you have successfully met both conditions set with Divi’s condition options on the section. This means you will have to add a product to your cart and then visit the checkout page. After that, go back to the landing page we just built and you will see the promo popup 3 seconds after page load.

    Here is what the promo popup looks like when visiting the page after meeting the conditions.

    Here is the popup on mobile.

    And here is an example of the process a user would go through before seeing the promo that successfully retargets them to finish the checkout process.

    Final Thoughts

    Divi’s conditional options open the door for tons of opportunities to display content in strategic ways. The promo popup that we built in this tutorial is great for retargeting abandoned carts. But there are so many more ways to fine-tune the conditions to fit your own needs or build a completely new process for retargeting abandoned carts. I’d love to hear your ideas!

    I look forward to hearing from you in the comments.

    Cheers!





    source

    Leave a Reply

    Your email address will not be published. Required fields are marked *