> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/popups/popups.md).

# Popups

Overlay

Add **Flyout popups** for promotions and campaigns. The **Signup flyout** includes an email signup form for customers.

## Add popup

***

In the editor side panel, click the arrow next to **Popups** and click **(+) Add block**. Select **Flyout** or **Signup flyout**.

Click the new block to start customizing your popup.

## Choose color scheme

***

Click the **Popup** block to find the color settings. Select a **Color scheme** to apply to the popup.

* Click **Edit** to change the colors of the selected color scheme. Editing a color scheme will change all sections that use this color scheme.
* To add a new color scheme, go to **Theme settings > Colors** and click **Add color scheme**.

## Change popup behavior

***

The **Behavior** options control when, where, and how often your popup appears. Choose to display the popup

* immediately,
* after a certain amount of time,
* when visitors scroll down the page

You can also specify which pages to show the popup.

`Click Signup Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Delay appearance</mark></td><td>Choose when the popup should appear</td><td><strong>Show immediately</strong><br><strong>After 3 seconds</strong><br><strong>After 10 seconds</strong><br><strong>After 30 seconds</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>After 1 minute</strong><br><strong>After 2 minutes</strong><br><strong>After scrolling 25% of the page</strong><br><strong>After scrolling 50% of the page</strong><br><strong>After scrolling 75% of the page</strong><br><strong>After scrolling 100% of the page</strong></td></tr><tr><td><mark style="color:blue;">Frequency</mark></td><td>Choose how often the popup should appear</td><td><strong>Once</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Every hour</strong><br><strong>Every 6 hours</strong><br><strong>Every 12 hours</strong><br><strong>Every day</strong><br><strong>Every 3 days</strong><br><strong>Every week</strong><br><strong>Every 2 weeks</strong><br><strong>No limit</strong></td></tr><tr><td><mark style="color:blue;">Show on exit-intent</mark></td><td>Display the popup when the user is about to leave the page</td><td></td></tr><tr><td><mark style="color:blue;">Disable for account holders</mark></td><td>Hide the popup for logged-in customers</td><td></td></tr><tr><td><mark style="color:blue;">Show on specific page</mark></td><td>Display the popup only on a specific page</td><td></td></tr><tr><td><mark style="color:blue;">Target page</mark></td><td>Enter the URL of the page where the popup should appear</td><td></td></tr></tbody></table>

## Set up content

***

Add and customize the **headings**, **text**, and **buttons** in the popup.

`Click Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overline</mark></td><td>Add small text above the heading</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter the main title for the popup</td><td><mark style="background-color:yellow;">Default: Join us</mark></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Adjust the size of the heading</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add descriptive text for the popup</td><td><mark style="background-color:yellow;">Default: Signup and get 10% off your first purchase</mark></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the text</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Enter the URL for the button</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter the text for the button</td><td><mark style="background-color:yellow;">Default: Subscribe</mark></td></tr><tr><td><mark style="color:blue;">Dismiss text</mark></td><td>Enter the text to close the popup</td><td><mark style="background-color:yellow;">Default: No thanks</mark></td></tr><tr><td><mark style="color:blue;">Footer text</mark></td><td>Add additional text at the bottom of the popup</td><td><mark style="background-color:yellow;">Default: By completing this form you are signing up to receive our emails and can unsubscribe at any time</mark></td></tr></tbody></table>

## Choose layout

***

Choose where the popup appears on the page (for desktop) and set the alignment of the content within the popup.

`Click Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Flyout position</mark></td><td>Choose where the popup appears on the screen</td><td><strong>Left side center</strong><br><strong>Left side bottom</strong><br><strong>Right side center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right side bottom</strong><br><strong>Bottom</strong><br><strong>Bottom left</strong><br><strong>Bottom right</strong><br><strong>Bottom center</strong></td></tr><tr><td><mark style="color:blue;">Content alignment</mark></td><td>Align the content within the popup</td><td><strong>Left</strong><br><strong>Center</strong><br><strong>Right</strong></td></tr></tbody></table>

## Add image

***

Display an image at the top of the popup. We recommend an image in square or landscape orientation.

`Click Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable image</mark></td><td>Show an image in the popup</td><td></td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image</td><td></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Choose the size of the image</td><td><strong>Small</strong><br><strong>Medium</strong><br><strong>Large</strong></td></tr></tbody></table>

## Add signup tag

***

When customers sign up, add a tag to the customer in your newsletter list. To support multiple tags, use a comma-separated list (eg. "newsletter, promotion").

You may want to use signup tags to track which promotion or campaign your customers have signed up for.

`Click Signup Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tags</mark></td><td>Enter tags to apply to customers in your newsletter list</td><td></td></tr></tbody></table>

## Set up signup sticky tab

***

For the **Signup Flyout**, the **Sticky tab** displays a small floating banner with text that re-opens the popup when clicked.

{% hint style="warning" %}
The popup does not automatically give 10% off. This default text is only a placeholder for your own text.

See [Shopify's discounts guide](https://help.shopify.com/en/manual/discounts) to learn how to set up discounts and offer discount codes.
{% endhint %}

`Click Signup Flyout block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable tab</mark></td><td>Show a sticky tab to open the popup</td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter text for the sticky tab</td><td><mark style="background-color:yellow;">Default: Get 10% Off</mark></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the tab text</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 4</mark></td></tr><tr><td><mark style="color:blue;">Tab position</mark></td><td>Choose where the tab appears on the screen</td><td><strong>Left side center</strong><br><strong>Left side bottom</strong><br><strong>Right side center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right side bottom</strong><br><strong>Bottom</strong><br><strong>Bottom left</strong><br><strong>Bottom left (floating)</strong><br><strong>Bottom center</strong><br><strong>Bottom right</strong><br><strong>Bottom right (floating)</strong></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a set of colors to apply to the tab</td><td></td></tr></tbody></table>