Docs
Header, footer and overlaysOverlay group

Modals section

The Modals section shows centered windows in Seventh: modal cards on a timer or scroll, an age verification window and an exit intent popup.

Applies to: Seventh 4.0.0 and later. Added in: Seventh 2.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.

The Modals section shows centered windows that cover the page. Each modal is a block: a general Modal card for promotions or sign-ups, an Age verification window or an Exit intent popup.

Where to find it: in the theme editor sidebar, open the Overlay group and select Modals, then select Add block.

Storefront modal card: a white newsletter modal with the heading Sign up & save 15% on your first order, an email field and a woman's photo, with a close button.

Modals and popovers

  • Use a modal when the message needs the customer's attention before they continue.
  • For a small card in the corner that does not block the page, use the Popovers section.

Media and layout

Every modal block has the same media and layout settings:

  • Image or Video sits beside the text on desktop and above or below it on mobile.
  • Media position and Media position on mobile choose the side, or hide the media.
  • Minimum media aspect ratio sets the smallest shape of the media.
  • Card width on desktop sets how wide the window is.

The Modal card is the general modal, for promotions, newsletter sign-ups and announcements. It holds any theme blocks and app blocks.

  • Visibility sets the page types that show the modal.
  • Show on selected collections and Show on selected products limit it to those pages, and then Visibility is ignored.
  • Show popup after sets the delay, from 1 to 60 seconds.
  • Enable scroll based trigger waits until the customer scrolls to Scroll position before the delay starts.

The Modal card closes with its close icon, or when the customer selects the background around it. It does not close with the Esc key.

How often a modal shows

The Modal card and the Exit intent popup have Popup frequency. Seventh remembers in the customer's browser when the customer closed the modal, and shows it again only after that period:

  • Show each day: again after 24 hours.
  • Show each week (default): again after 7 days.
  • Show each month: in Seventh 4.0.0, the modal does not show again in that browser after it has been closed.

The memory is per browser and per device, so a new device or a private window shows the modal again.

Age verification

The Age verification modal opens as soon as a page loads, on every page of the store. It covers the page with a dark background.

  • The customer confirms with its button (label: "Enter"). The button is the Button close block, which is always present.
  • It has no close icon and does not close with the Esc key.
  • In Seventh 4.0.0, selecting the dark background outside the window also closes it.
  • After it is closed, the browser remembers it for 28 days.

Add a Heading and a Text block inside the Age verification block to state the age rule, for example "You must be 18 or older to enter this store."

Seventh does not support a real age check. The modal asks the customer to confirm, but it does not verify the age or block a customer who closes the browser tab. For a legal age verification, use a dedicated age verification app.

Exit intent popup

The Exit intent popup opens when the customer moves the mouse quickly to the top edge of the browser window, as if to close the tab or type a new address. Seventh opens it once per page view, then waits for the Popup frequency period after the customer closes it.

Exit intent needs a mouse, so the Exit intent popup does not open on phones and tablets. It also never opens by itself in the theme editor: select the block in the sidebar to see it while editing.

How do I open a modal from a button?

Use the Popup button block. A Modal card from the Modals section cannot open from a button; it opens by itself, after its delay or scroll position. The Popup button shows the content of a Shopify page in a modal.

Create the page with the content

Open Shopify admin → Online Store → Pages, create a page (for example "Size guide") and save it. The page title becomes the modal heading and the page content becomes the modal text.

Add a Popup button block

In the theme editor, open the section or card where the button goes, select Add block and choose Popup button.

Connect the page

Enter the button Label and select the page from step 1 in Page. Select Save, then select the button in the preview: the modal opens with the page content.

See Popup button block for all its settings.

Why is my modal not showing?

A visibility or trigger setting stops it, or your browser already closed it. Check these in order:

  1. For a Modal card: Visibility, Show on selected collections and Show on selected products include the page you are on. Selected products or collections override Visibility.
  2. For a Modal card: Show popup after has passed, and with Enable scroll based trigger on, you scrolled to Scroll position.
  3. For an Exit intent popup: you are on a computer with a mouse, outside the theme editor.
  4. Popup frequency: your browser may already have closed it. Test in a private window.

The Age verification and Exit intent popup blocks have no Visibility settings; they apply to every page.

In the theme editor no modal opens by itself, whatever its delay. Select the modal block in the sidebar to open it in the preview.

All Modals settings

Every setting on this page, one list per section or block, with its type and default.

Popovers

The Popovers section shows small cards over the page in Seventh: newsletter, product, collection and cookie consent popovers, with timing and frequency.

Sections

Sections in Seventh: every section you can add with Add section, grouped by purpose, with the page that documents each preset.

On this page

Modals and popoversMedia and layoutModal cardHow often a modal showsAge verificationExit intent popupHow do I open a modal from a button?Why is my modal not showing?All Modals settingsRelated pages