> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Electro How to Use Electro Popup Section

**Theme:** Electro · **Section type:** Store-wide section

The Popup section shows a small window on top of your store pages. Use it to collect newsletter sign-ups, announce a sale with a countdown, or send customers to a page with up to 2 buttons.

> **Note:** There is one Popup for the whole store. It isn't added with **Add section**: it sits at the bottom of the section list on every template. A popup holds up to 10 blocks, with 1 Countdown timer, 1 Newsletter form, and 2 Buttons at most.

![A centered Electro popup with an image, newsletter form, and overlay (Nextron preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/popup-1_l2e1i1.jpg)

**What you can do**
- Turn on the popup and choose where and when it appears
- Add the popup content
- Add a newsletter form or buttons
- Add a countdown timer
- Show a sticky label after customers close the popup
- See what customers see
- Change the popup settings
- Fix common problems

## Turn on the popup and choose where and when it appears
1. In the theme editor, scroll to the bottom of the section list in the left sidebar and click **Popup**.
2. Under **General**, select **Enable popup**.
3. Choose a **Popup position**: Left, Center, or Right.
4. In **Visibility**, choose the pages where the popup can appear.
5. In **When to show**, choose what opens the popup.
6. If you chose **Time on page**, set **Show after**.
7. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Visibility | Shows the popup on All pages, Home page only, Product page only, Collection page only, or Cart page only. |
| When to show | Opens the popup when the customer scrolls to the footer (Reaching the footer), after a set time on the page (Time on page), or after the customer adds a product to the cart and closes the cart notification (After closing cart notification). |
| Show after | Sets how long the customer stays on the page before the popup opens, from 0 to 30 seconds in steps of 5. Applies only to Time on page. |

> **Tip:** Center works best with an **Overlay color**, so the popup stands out from the page. Left and Right sit in a bottom corner and don't block the page.

## Add the popup content
1. In the left sidebar, under **Popup**, click **Add block** and choose **Subheading**, **Heading**, or **Description**.
2. Enter the **Text**. For a Heading, choose a **Heading size** from H2 to H6.
3. Drag the blocks to change their order. The popup shows them from top to bottom in the same order.
4. Optional: under **Image**, select an **Image**. Then choose the **Image position** (Top, Bottom, Left, or Right) and the **Image ratio**.
5. Click **Save**.

> **Tip:** Keep the popup short: a heading, one line of text, and one action. Customers close long popups without reading them.

## Add a newsletter form or buttons
**Newsletter form**
1. Click **Add block** > **Newsletter form**.
2. Enter a **Submit button label** and choose a **Submit button style**.
3. Click **Save**.

Customers who sign up are added automatically to the **Email subscribers** customer list in your Shopify admin, under **Customers**.

**Buttons**
1. Click **Add block** > **Button**. You can add up to 2 buttons.
2. Enter a **Label** and a **Link**.
3. Optional: select **Open in new tab**. This appears after you add a link.
4. Choose a **Style**: Primary, Secondary, or Tertiary.
5. Click **Save**.

## Add a countdown timer
1. Click **Add block** > **Countdown timer**. A popup holds 1 countdown timer.
2. Select **Enable countdown timer**.
3. Enter an **End date** in the format YYYY-MM-DD.
4. Optional: enter an **End time (optional)** in the format HH:MM (24-hour clock). If you leave it empty, the countdown ends at 23:59 on the end date.
5. Optional: under **Button**, enter a **Label**, choose a **Style**, and add a **Link**. The button appears below the countdown.
6. Click **Save**.

When the countdown ends, the popup shows the **End text**. Select **Hide the countdown when it ends** to remove the numbers at that point.

> **Note:** The countdown timer block's button also shows when **Enable countdown timer** is turned off. To show only a button, you can also use a **Button** block.

## Show a sticky label after customers close the popup
1. Under **Sticky**, select **Enable sticky heading when dismissing**.
2. Enter a **Sticky heading label**, for example "Get 10% off".
3. Choose a **Sticky heading size**.
4. Click **Save**.

After a customer closes the popup, the label stays in a bottom corner of the screen. Customers click the label to open the popup again.

## What customers see
- **When the popup opens:** it opens on the pages you chose in **Visibility**, at the moment you chose in **When to show**. Left and Right popups appear in a bottom corner. Center popups appear in the middle of the screen, with the overlay color behind them.
- **Closing the popup:** customers click **×** in the top-right corner. The popup then doesn't open again during the same browsing session.
- **Sticky label:** if it's turned on, the label appears in the bottom-left or bottom-right corner after the popup is closed. A Center popup shows its label on the right. Customers can open the popup again from the label, or close the label with **×**.
- **Image on the left or right:** the popup is wider, with the image beside the content. On screens up to 768 px wide, the image moves above the content.
- **Phones:** the popup fills the screen width, with a small margin on each side.
- **Newsletter form:** after customers subscribe, the page reloads and the form shows a confirmation message.
![A popup in the bottom-left corner with a countdown timer and button, opened on reaching the footer (Gizmo preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/popup-2_9znbnv.jpg)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Enable popup | Turns the popup on or off for the whole store. |
| Popup position | Places the popup in the bottom-left corner (Left), in the middle of the screen (Center), or in the bottom-right corner (Right). |
| Overlay color | Adds a color layer behind the popup while it is open. Use the transparency slider to make it lighter. Leave it empty to show the popup without an overlay. |
| Color scheme | Sets the background, text, and button colors of the popup and the sticky label. You edit color schemes in Theme settings > Colors. |
| Visibility | See "Turn on the popup and choose where and when it appears" above. |
| When to show | See "Turn on the popup and choose where and when it appears" above. |
| Show after | Sets the delay for Time on page, from 0 to 30 seconds. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | Adds an image to the popup. A 1600 x 730 px .jpg is recommended. |
| Image position | Places the image at the Top or Bottom of the popup, or on the Left or Right of the content. Appears after you select an image. |
| Image ratio | Crops the image to Square, Portrait, Landscape, or Wide (16:9), or keeps its Original shape. With the image on the left or right, Original stretches the image to the popup height. Appears after you select an image. |
| Border radius | Rounds the image corners, from 0 to 40 px. Appears after you select an image. |

### Padding
| Setting | What it does |
| ---- | ---- |
| Top, Bottom, Left, Right | Sets the space inside the popup edges, from 0 to 100 px. |
| Enable padding mobile | Lets you set separate padding for phones. |
| Top (mobile), Bottom (mobile), Left (mobile), Right (mobile) | Sets the padding on phones, from 0 to 100 px. Appears when Enable padding mobile is on. |

### Sticky
| Setting | What it does |
| ---- | ---- |
| Enable sticky heading when dismissing | Shows a sticky label after a customer closes the popup for the first time. |
| Sticky heading label | Sets the label text. The label doesn't appear if this is empty. |
| Sticky heading size | Sets the label text size, from H2 to H6. |

### Subheading, Heading, and Description blocks
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text of the block. The Description block supports bold, italic, and links. |
| Heading size | Sets the heading size, from H2 to H6. Heading block only. |

### Countdown timer block
| Setting | What it does |
| ---- | ---- |
| Enable countdown timer | Shows the countdown in the popup. |
| Hide the countdown when it ends | Hides the countdown numbers when the time runs out. |
| End date | Sets the end date in the format YYYY-MM-DD. If it's empty, the countdown ends tonight. |
| End time (optional) | Sets the end time in the format HH:MM (24-hour clock). If it's empty, the countdown ends at 23:59. |
| End text | Shows a message when the countdown ends. Leave it empty to show nothing. |
| Label | Sets the text of the button below the countdown. The button is hidden if this is empty. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. |
| Link | Sets the page the button opens. |
| Countdown background | Sets the background color of the countdown numbers. |
| Countdown number | Sets the color of the countdown numbers. |
| End text | Sets the color of the end text. |

### Button block
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text. The button is hidden if this is empty. |
| Link | Sets the page the button opens. |
| Open in new tab | Opens the link in a new browser tab. Appears after you add a link. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. |

### Newsletter form block
| Setting | What it does |
| ---- | ---- |
| Submit button label | Sets the text of the subscribe button. |
| Submit button style | Sets the subscribe button style: Primary, Secondary, or Tertiary. |

You can also add app blocks to the popup, for example a form from an email marketing app.

## Troubleshooting
**The popup doesn't appear on my store.**
Check that **Enable popup** is selected and that **Visibility** includes the page you are on. If you already closed the popup, it stays closed for the rest of your browsing session. Open the store in a private window to see it again.

**The popup opens only at the bottom of the page.**
**When to show** is set to **Reaching the footer**. Choose **Time on page** to open it after a delay instead.

**The sticky label doesn't show after I close the popup.**
Select **Enable sticky heading when dismissing** and enter a **Sticky heading label**. The label doesn't show when the label field is empty.

**The countdown shows zeros or the end text right away.**
Check that the **End date** is in the format YYYY-MM-DD and is in the future, and that **End time (optional)** uses the 24-hour format HH:MM.

**I can't add another button.**
A popup holds up to 2 Button blocks. You can add one more button with the Countdown timer block.

## Related articles
- [Electro How to Use Electro Newsletter](https://help.ecomx.co/en/article/electro-how-to-use-electro-newsletter-ddpw8v/)
- [Electro Countdown Timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)
- [Electro Theme Settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)
- [Electro How to Use Electro Footer Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-footer-section-1og04vg/)