Links

Pop-up

A guide to create a pop-up for your Shopify store
An example of Zest's popup
This article helps you create your store's pop-up in Zest to collect emails, promote sales, cross-sell products, etc.
In this article:

What is a pop-up?

A pop-up is an overlay that stops on-site visitors and displays an informational or promotional message to grab their attention. A popup can be a great way to grow your email list, get more newsletter signups, and boost sales.

How to set up a pop-up?

Steps
  1. 1.
    In the theme editor (Customize)
  2. 2.
    On the left-sidebar, locate Pop-up
  3. 3.
    Make necessary changes
  4. 4.
    Save.
Find Popup in the left sidebar

Pop-up block settings

In your pop-up, you can add:
  • Heading and Text: Fill in your heading and text for the pop-up. You can only change the text size of the heading.
  • Image: Select an image shown in your pop-up can image position (Top/Left)
  • Button: Edit your button label
  • Discount code: Fill in the discount code you want to offer your visitors and the apply button label. To know more about discounts and discount codes, see Discounts.
  • Social links: Showcase your store's social links. The social icons shown will be based on your Theme settings > Social media > Social accounts.

Pop-up section settings

Design Mode

Enable design mode to make the pop-up always displays during setup on the customize page.

General Settings

  • Enable
  • Show on homepage only
  • Show for visitors only
  • Trigger open automatically: 4 options
+ Open immediately after page loaded
+ Delay 5 seconds after page loaded
+ Customers scrolling down
+ Customer is leaving the website
The last option (Customer is leaving the website) is only working on the desktop. On mobile, the pop-up will appear after the page is loaded.
  • Repeat open automatically: Set the time before your pop-up appears again.
  • Text alignment (Left/Center).
  • Container width: Slide to adjust.

Teaser button

Enable/disable the teaser button by ticking/unticking the checkbox and filling in the button label.
Popup teaser button settings
You can also change the colors of the teaser pop-up background and text here.
Popup color settings