How to minimize the popup
Popups can serve as a powerful tool for capturing visitor attention and promoting offers on your website. However, if not executed well, they can sometimes be perceived as intrusive. ShopAgain offers flexible options that let you adjust the behavior of your popups to ensure a more user-friendly experience.
In this guide, we will explore two use cases on how to manage your popups effectively:
Keeping the popup minimized initially, allowing users to expand it at their will.
Minimizing the popup once a visitor dismisses it, giving them the option to revisit and claim the offer at a later stage.
These strategies can be particularly useful if you want to create a less intrusive, more inviting browsing experience for your visitors.
Now, let's dive into the step-by-step process for each use case.
Log into your ShopAgain account and locate Popups and Forms on the sidebar menu.
Click on the Popups option under the Popups and Forms section.
Identify the popup you want to delay (for this example, we're using a welcome popup). Click on the Edit Config button associated with that popup, and then click on Save and Continue.
Scroll down to find the Display Settings section.
In the Display Settings section, select the Minimized with icon radio button. This will ensure that the popup remains minimized when a user initially visits the website.
Under the Minimize icon section, you can further customize how the minimized popup looks by adjusting the following settings:
Vertical alignment (e.g., bottom)
Horizontal alignment (e.g., right)
Margin bottom (e.g., 0px)
Margin right (e.g., 0px)
Background Color (e.g., #7743A3)
Icon Color (e.g., #ffffff)
Once you have made all the necessary adjustments, scroll down and click on the Save.
Follow the steps 1 to 4 from the previous use case to navigate to the Display Settings section of your desired popup.
In the Display Settings section, you can select any of the three display options:
Show Immediately on Page Load: If you want the popup to appear immediately when the page loads, select this option.
Loading Delay: If you want to delay the appearance of the popup, select this option. You can specify the delay period in seconds or percentage of page scroll.
Minimized with Icon: If you want the popup to appear minimized with an icon, select this option.
Locate the Minimize Icon section, here, you need to check the box next to Show minimize icon after popup is closed.
This will ensure that the popup minimizes to an icon once a visitor dismisses it, and they can later click on the icon to expand the popup and claim the offer.
Under the Minimize icon section, you can further customize how the minimized popup looks by adjusting the following settings:
Vertical alignment (e.g., bottom)
Horizontal alignment (e.g., right)
Margin bottom (e.g., 0px)
Margin right (e.g., 0px)
Background Color (e.g., #7743A3)
Icon Color (e.g., #ffffff)
Once you have made all the necessary adjustments, scroll down and click on the Save.
In this guide, we will explore two use cases on how to manage your popups effectively:
Keeping the popup minimized initially, allowing users to expand it at their will.
Minimizing the popup once a visitor dismisses it, giving them the option to revisit and claim the offer at a later stage.
These strategies can be particularly useful if you want to create a less intrusive, more inviting browsing experience for your visitors.
Now, let's dive into the step-by-step process for each use case.
Use Case 1: Keeping the Popup Minimized Initially
Step 1: Navigate to Popups and Forms
Log into your ShopAgain account and locate Popups and Forms on the sidebar menu.
Step 2: Select Popups
Click on the Popups option under the Popups and Forms section.
Step 3: Edit the Popup Configuration
Identify the popup you want to delay (for this example, we're using a welcome popup). Click on the Edit Config button associated with that popup, and then click on Save and Continue.
Step 4: Go to Display Settings
Scroll down to find the Display Settings section.
Step 5: Set the Display Style
In the Display Settings section, select the Minimized with icon radio button. This will ensure that the popup remains minimized when a user initially visits the website.
Step 6: Customize the Appearance (Optional)
Under the Minimize icon section, you can further customize how the minimized popup looks by adjusting the following settings:
Vertical alignment (e.g., bottom)
Horizontal alignment (e.g., right)
Margin bottom (e.g., 0px)
Margin right (e.g., 0px)
Background Color (e.g., #7743A3)
Icon Color (e.g., #ffffff)
Step 7: Save Your Changes
Once you have made all the necessary adjustments, scroll down and click on the Save.
Use Case 2: Minimize the Popup Once Someone Dismisses It
Follow the steps 1 to 4 from the previous use case to navigate to the Display Settings section of your desired popup.
Step 5: Select the Appropriate Option
In the Display Settings section, you can select any of the three display options:
Show Immediately on Page Load: If you want the popup to appear immediately when the page loads, select this option.
Loading Delay: If you want to delay the appearance of the popup, select this option. You can specify the delay period in seconds or percentage of page scroll.
Minimized with Icon: If you want the popup to appear minimized with an icon, select this option.
Step 6: Enable Show Minimize Icon After Popup is Closed
Locate the Minimize Icon section, here, you need to check the box next to Show minimize icon after popup is closed.
This will ensure that the popup minimizes to an icon once a visitor dismisses it, and they can later click on the icon to expand the popup and claim the offer.
Step : Customize the Appearance (Optional)
Under the Minimize icon section, you can further customize how the minimized popup looks by adjusting the following settings:
Vertical alignment (e.g., bottom)
Horizontal alignment (e.g., right)
Margin bottom (e.g., 0px)
Margin right (e.g., 0px)
Background Color (e.g., #7743A3)
Icon Color (e.g., #ffffff)
Step 8: Save Your Changes
Once you have made all the necessary adjustments, scroll down and click on the Save.
Updated on: 15/06/2023
Thank you!