Generate Popup/Modal Section

Create a popup/modal section for my Shopify theme:

Features:

  Centered modal with overlay backdrop
  Close button (X) and click-outside-to-close
  Support for image + text + CTA button layout
  Email capture form option (integrates with Shopify customer list)
  Cookie-based frequency control (show once per session/day/week)


Settings:

  Popup delay (seconds before showing)
  Show frequency (every visit, once per day, once per week, once ever)
  Heading text, body text, button text, button URL
  Image upload
  Background color, text color, button color
  Enable/disable toggle
  Show only on homepage option


Requirements:

  Smooth fade-in animation
  Mobile responsive (full-width on small screens)
  Accessible: focus trap, ESC to close
  No impact on page load speed (lazy loaded)


Please generate the Liquid, CSS, and JavaScript for this popup/modal as code I can paste into my own theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/popup-modal.liquid), and paste the generated code in. Since a popup needs to appear on every page, add it to your theme’s global section group — either through theme.liquid (include the section there) or by adding it to a JSON section group like sections/header-group.json that renders app/theme-wide — then save and preview in the theme editor to confirm it triggers correctly.