How to Customize Your Popup (Design Step)
Learn how to customize your popup (design step). Step-by-step guide with screenshots.
The Design step is where you control how your popup looks and appears on your store. It is built to be simple and fast so you can launch quickly without technical complexity.
Where Is the Design Step?
After you:
Click Create campaign
Choose your Goal
Select a Sub-goal
You will automatically land on the Design page.
What You Can Customize
1. Template and Style
At the top of the Design panel, you can:
- Switch between available templates
- Click Shuffle to try different style variations
Tip
If you are unsure, start with the default template. It is already optimized for conversions.
2. Popup Type
You can choose how your popup appears on the screen:
| Type | Description |
|---|---|
| Light | Standard popup — the most common format for general campaigns. |
| Fullscreen | Covers the entire screen — best for high-impact announcements and exit-intent offers. |
| Floating | Non-intrusive scrolling banner — ideal for subtle promotions that don't interrupt browsing. |
Select the option that fits your goal and store design.
3. Popup Position
You can choose where the popup appears:
- Center
- Corners
- Side positions
Use the position grid to select placement.
4. Overlay
Overlay darkens the background behind the popup.
- Turn it on to focus attention on the popup
- Turn it off for a lighter appearance
5. Teaser
Some popup types include a teaser. A teaser is a small button that opens the popup when clicked.
You can choose to show or hide them. They are useful if you prefer not to show the popup immediately.
6. Edit Text Content
To change popup text:
Click directly on the text inside the preview
Update headlines, descriptions, or button text
Save your changes
Keep your message clear and short for better results.
Customizing Shopify Products
If your popup includes a Shopify Products element, you can control which products are shown.
Choose Product Source
| Source | Description |
|---|---|
| Cart Products | Automatically fetched from the visitor's cart. Best for "You forgot these items!" popups. |
| Collection Products | Displays products from a selected Shopify collection. |
| Manual Selection | Choose specific products yourself. |
| Product Feed URL | Use a product feed if needed. |
Choose Product Layout
You can change how products appear: Slide, Card, or Grid.
Edit Button Text and Action
You can update:
- Button text such as "View Product"
- Button action such as "Go to cart"
When Should You Use the Advanced Editor?
The Design step focuses on quick customization.
Advanced Editor
If you need to add or remove elements, create multi-step popups, apply advanced styling, or build more complex layouts — switch to the Advanced Editor.
Click the pencil icon on the middle-right side of the screen to open it.
Once your design looks good, click Save & Next to Segment and continue to publish your campaign.
How is this guide?