Popups
Write the popup text, add an image, and set the size, colors, close button and button action.
A popup is a centered window over a dimmed page. It can hold a headline, a description, a coupon box, a countdown and one button. You edit it in the Content & Offer and Media, style & trigger groups of the campaign studio.
Starters
| Starter | Tone | Coupon | Button | Countdown |
|---|---|---|---|---|
| Discount & Offers | Welcome | WELCOME20 |
Sign up now → Sign up | On |
| Urgency (no image) | FLASH20 |
Apply to cart → Cart | On | |
| Exclusive | VIP25 |
Claim exclusive offer → Sign up | On | |
| Sale Event | SALE40 |
Shop the sale → Cart | On | |
| Copy Coupon | SAVE10 |
Copy coupon → Copy code | Off |
Every popup starter opens after 1.5 seconds, once per session, at Medium size. Starters with the countdown on end 26 days after you create the campaign, so check the end date before you publish. See Countdown timers.
Content & Copy
| Setting | What it does |
|---|---|
| Headline | The large title. |
| Description / Offer details | The text under the headline. Leave it empty to hide it. |
| Disclaimer or footnote | Turn on to add a small extra line, such as offer terms, in Footnote text. |
Coupon & Promo Code
Turn on Display coupon box to show a code customers can copy with one click. Choose a Frame style (Dashed or Solid), a Text color and a Border color. See Coupons and discounts.
Call To Action (CTA)
Turn on Show button, then set the Button text, Button color and Text color. Destination decides what the button does:
| Destination | What happens |
|---|---|
| Sign up, Log in | Opens the customer account sign-in page. New customer accounts use one page for both. |
| My account | Opens the customer account page. |
| Cart | Opens the cart. When the coupon box is on, the code is applied first. |
| Home, All products | Opens the home page or the all products collection. |
| Copy code | Copies the coupon code. The page stays where it is. |
| Close popup | Closes the popup. |
| Custom URL | Opens the address you enter. Use a path such as /collections/sale or a full https:// link. When the coupon box is on, the code is applied first. |
Style & Placement
| Setting | What it does |
|---|---|
| Popup size | Small, Medium or Large. Sets the popup width on desktop. On phones the popup always fills the screen width. |
| Popup color | The popup background. |
| Overlay color and Overlay opacity | The layer that dims the page behind the popup, from 0% to 80%. |
| Rounded corners | Rounds the popup and button corners. |
| Close button (top right) | Shows the × button. |
Customers can always close a popup by clicking the dimmed area outside it or pressing Esc, even with the close button hidden.
Media & Image Placement
Turn on Popup with image to add a picture.
- Upload image stores the file in Content → Files in your Shopify admin. Use JPEG, PNG, WebP or GIF, under 5 MB. You can also paste any public address in Image URL, or use Sample image to try a layout.
- Desktop position: Left, Top or Right.
- Mobile image: Show on top or Hide. On phones, the image always sits above the text.
- Image size: Small, Medium or Large. A larger image makes the popup wider; the text column keeps its width.
- Image zoom (100% to 200%), Focus horizontal and Focus vertical move the crop so the important part of the picture stays in the frame.
- Remove takes the image out.
The image frame has a fixed size and the picture is cropped to fill it. Use zoom and focus rather than a pre-cropped file.
When it shows
The Trigger & Frequency block in Media, style & trigger controls when the popup opens and how often. See Targeting and triggers.