SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

System Group - Exit popup

Eira

Written by Eira

Last updated

15 views

On this page


Exit Popup is a powerful tool designed to retain users and convert them before they leave your website.

exit popup.png

1. How to access the Exit pop-up?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Scroolingtext01.png

Step 02: In the theme editor (Customize) > Click the Section button > In the Sections tab, scroll through the list or use the search bar to find and select the System Group > click Add section button > add Exit pop-up

exit popup 1.png

2. How to customize the Exit pop-up?

2.1. Exit pop-up blocks content

There are 3 blocks: Text, Discount, and Button.

2.1.1. Text block

To add a Text block to the Exit pop-up, click the Add block button (plus icon ➕) under the Exit pop-up.

After adding the Text block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device

  • Text: Enter text you want to display

exit popup 2.png

2.1.2. Discount block

To add a Discount block to the Exit pop-up, click the Add block button (plus icon ➕) under the Exit pop-up.

After adding the Discount block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device

  • Discount code: Enter the discount code to be applied or displayed.

    Maximum 20 characters

exit popup 3.png

2.1.3. Button block

To add a Button block to the Exit pop-up, click the Add block button (plus icon ➕) under the Exit pop-up.

After adding the Button block, you can adjust its settings using the sidebar—located on the right or left side of your screen, depending on your device

  • Button label: Leave the label blank to hide the button.

exit popup 4.png

2.2. Exit pop-up options

  • Color: Select the color to apply to this element.

  • Heading: Enter the main heading for this section

  • Image: Upload or select the image to display.

  • Image mobile: Upload or select a different image to display specifically on mobile devices.

  • Collection: Select a specific product collection from your store.

  • Product list: Select an individual list of products to display. If you choose this, the "Collection" setting will not be used.

  • Limit product: Set the maximum number of products to display.

  • Product image ratio: Set the aspect ratio (width to height proportion) for product images.

exit popup 5.png

Show popup

  • Show popup after Show popup after: Display the popup after one of the following conditions is met:

    • Move the cursor out of screen: The popup will appear when the user moves their mouse cursor outside the browser's viewport (often indicating an intent to exit the page).

    • After amount time: The popup will show after the user has spent a specified duration (in seconds) on the page.

    • Scroll to end of page: The popup will appear when the user scrolls near the bottom of the page content.

    Move cursor only work on desktop. On mobile, it's work with scroll if you choose move cursor

exit popup 6.png

Select page to display

  • Home page: Popup will display on home page

  • Product page: Popup will display on product page

  • Collection page: Popup will display on collection page

  • Article page: Popup will display on article page

  • Blog page: Popup will display on blog page

  • Cart page: Popup will display on cart page

  • Other pages: Popup will display on other page

exit popup 7.png

Theme Settings

  • Remove collection URL: Eliminates the collection URL from the product page path, optimizing SEO and creating shorter URLs.

    Remove the collection portion from product URLs for better SEO

  • Color display mode: Selects the product color display method, such as color list or count

  • Show color type: Displays All colors or Only color available. This option allows customers to see the complete color range of a product or focus solely on colors currently in stock.

  • Show secondary image on hover: Displays a secondary product image when hovering over it, giving customers a multi-dimensional view of the product.

  • Show rating: Enables or disables the display of product ratings, providing customer feedback information.

    To display a rating, add a product rating app.

  • Use collection link on vendor: Replace vendor link to collection link. Requires exist a collection has the name same as the vendor of the product. Learn more

  • Show currency codes: Enables or disables the display of currency codes next to product prices, providing clear currency information.

  • Price varies style: Choose a display style for variable product prices (e.g. "From [price]"), which helps customers understand the price range.

  • Maximum color to show: Limits the number of product colors displayed

    0 to responsive auto number. Requires color limit is enabled.

  • Enable color limit: Enables or disables the limit on the number of product colors displayed, allowing control over the color count shown on the product page.

  • Change product image when click swatch on event: Allows the product image to change when a user clicks on a color swatch, creating a more interactive and visual experience.

    Click mode is forced on touch devices.

  • Action after color view more is clicked: Defines the action that occurs when a user clicks the "view more colors" button, such as showing all colors or redirecting to a more detailed page (Expand all colors, Go to product page)

    Requires color limit is enabled.

  • Color list style: Selects the display style for the product color list

  • Color image source: Selects the image source for product colors, allowing the use of actual product images or standard color images for display (Custom images or variant images)

  • Color shape: Selects the display shape for product colors (e.g., square, circle), customizing the color display interface.

exit popup 8.png

Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.

Add custom styles to this section only.

To add custom styles to your entire online store, go to theme settings.

🎁 Exclusive Deals for The4 Customers

EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114) on Pro plan.

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free
SectionAI

🤖 EcomRise: Upsell & Bundles

Boost sales effortlessly with product bundles, upsell and cross-sell, buy X get Y, volume discounts

  • ✅ Easy upsell & cross-sell
  • ✅ Works with the latest themes
  • ✅ Trusted by 10k customers
🚀 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.