> ## Documentation Index > Fetch the complete documentation index at: https://docs.digifist.com/llms.txt > Use this file to discover all available pages before exploring further. # Interactive Popup > Configure Everest's interactive popup section and its main settings, content structure, and styling controls. The Interactive Popup section lets you control the content, layout, and presentation of this part of the Everest storefront. Most changes happen directly in the Theme Customizer, so you can adjust structure first and then refine styling, spacing, and supporting blocks with confidence. Interactive Popup overview ## What this section controls * Headings, text content, and on-page messaging * Images, videos, and other media presentation options * Layout structure, width, alignment, and spacing * Color schemes, contrast, and shared visual styling * Block types such as Heading, Text, Form Newsletter, Button Group and more ## Getting started In Shopify admin, go to **Online Store** -> **Themes** -> **Customize**. Add the **Interactive Popup** section to a compatible template or select the existing section from the left sidebar. Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details. Add, remove, or reorder blocks after the main layout feels right so content hierarchy stays easier to manage. Interactive Popup location in Theme Customizer ## Section settings ### Settings Interactive Popup Settings settings Enable or disable **Show on customizer**. **Default:** `disabled` Choose how **Popup type** behaves in the section. **Available options:** Newsletter signup, Age verification, Custom. **Default:** `custom` Sets the popup type used for its behavior and targeting. Adjust **Delay** with a slider-based control. **Range:** `1` to `20` **Default:** `10s` ### Content Interactive Popup Content settings Choose how **Vertical alignment** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** ⤒, Center, ⤓. **Default:** `start` Choose how **Horizontal alignment** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** ⇤, Center, ⇥. **Default:** `start` Enable or disable **Show interactive popup media**. Review the result on both desktop and mobile when media changes are involved. **Default:** `enabled` ### Media Interactive Popup Media settings Choose how **Show on** behaves in the section. Review the result on both desktop and mobile when media changes are involved. **Available options:** Desktop, Mobile, Both. **Default:** `both` This setting only appears when its related parent option is enabled. Choose how **Media position** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** Start, End. **Default:** `start` This setting only appears when its related parent option is enabled. Desktop and tablet only. Automatically adjusted for mobile. Choose how **Aspect ratio** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** Auto, Square, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2. **Default:** `auto` This setting only appears when its related parent option is enabled. Upload or choose an image for **image**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Choose a hosted video for **video**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Overwrites the image. Paste an external video URL for **external video**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL. Enable or disable **Enable mobile specific media**. Review the result on both desktop and mobile when media changes are involved. **Default:** `disabled` This setting only appears when its related parent option is enabled. Displays mobile-specific alternative media. Add a media before setting a mobile alternative. ### Media for mobile Interactive Popup Media for mobile settings Upload or choose an image for **image**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Choose a hosted video for **video**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Overwrites the image. Paste an external video URL for **external video**. Review the result on both desktop and mobile when media changes are involved. This setting only appears when its related parent option is enabled. Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL. ### Common settings Interactive Popup Common settings Select the color scheme used for **color scheme**. Use this to keep contrast and branding consistent with the rest of the store. **Default:** `scheme-1` ## Block settings ### Heading Interactive Popup Heading settings This block controls the **heading** content used inside the Interactive Popup section. ### Settings Interactive Popup Settings settings Choose how **Show on** behaves in the section. **Available options:** Desktop, Mobile, Both. **Default:** `both` Choose how **HTML tag** behaves in the section. **Available options:** H1, H2, H3. **Default:** `h3` Useful for SEO and accessibility. Enter the content used for **heading**. Choose how **Heading size** behaves in the section. **Available options:** XS, S, M, L, ↺. **Default:** `default` Choose how **Top spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, XL. **Default:** `0` Choose how **Bottom spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, XL. **Default:** `sm` ### Text Interactive Popup Text settings This block controls the **text** content used inside the Interactive Popup section. ### Settings Interactive Popup Settings settings Choose how **Show on** behaves in the section. **Available options:** Desktop, Mobile, Both. **Default:** `both` Adjust **Line count** with a slider-based control. **Range:** `0` to `10` **Default:** `0` Text truncate to the specified number of lines. If you set 0, the text will not be truncated. Enter the content used for **text**. Choose how **Text size** behaves in the section. **Available options:** XS, S, M, L. **Default:** `sm` Choose how **Bottom spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, XL. **Default:** `0` ### Form Newsletter Interactive Popup Form Newsletter settings This block controls the **form newsletter** content used inside the Interactive Popup section. ### Settings Interactive Popup Settings settings Enable or disable **Show label**. **Default:** `enabled` Choose how **Bottom spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, XL. **Default:** `0` ### Button Group Interactive Popup Button Group settings This block controls the **button group** content used inside the Interactive Popup section. ### Settings Interactive Popup Settings settings Choose how **Top spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, Auto. **Default:** `2` Choose how **Bottom spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, Auto. **Default:** `0` Choose how **Space between** behaves in the section. **Available options:** S, M, L, XL. **Default:** `4` Space between buttons, optimized for mobile **Supports nested blocks:** * **Button** for more granular content inside this block. ### Age Verification Actions Interactive Popup Age Verification Actions settings This block controls the **age verification actions** content used inside the Interactive Popup section. ### Confirm button Interactive Popup Confirm button settings Enter the content used for **button label**. Keep action labels short so they remain readable across devices. **Default:** `Yes` Choose how **Button style** behaves in the section. Keep action labels short so they remain readable across devices. **Available options:** Filled, Outlined, Text. **Default:** `filled` Choose how **Button width** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** Auto, ↔. **Default:** `full` ### Decline button Interactive Popup Decline button settings Enter the content used for **button label**. Keep action labels short so they remain readable across devices. **Default:** `No` Set the destination URL for **button link**. Keep action labels short so they remain readable across devices. **Default:** `/` Choose how **Button style** behaves in the section. Keep action labels short so they remain readable across devices. **Available options:** Filled, Outlined, Text. **Default:** `outlined` Choose how **Button width** behaves in the section. It has the strongest effect on layout balance and visual hierarchy. **Available options:** Auto, ↔. **Default:** `full` ### Common settings Interactive Popup Common settings Choose how **Bottom spacing** behaves in the section. This setting shapes the section container and how it sits against surrounding content. **Available options:** No, S, M, L, XL. **Default:** `2` ## Best practices * Check contrast after changing color schemes so text and controls remain easy to read. * Review media-heavy layouts on both desktop and mobile before publishing. * Start with the structural settings first, then refine decorative styling after the layout feels settled. * Preview the section with realistic content length to catch spacing and wrapping issues early. ## Related guides * [Everest Theme Overview](/themes/everest/index) * [Everest Theme Settings](/themes/everest/theme-settings/index) * [Everest Header](/themes/everest/header/header)