Skip to main content

Modal Section Guide

The Modal section is a reusable popup you can trigger from any link or button using a hash (#trigger-id).

Quick Setup​

  1. Go to Online Store -> Themes -> Customize.
  2. Add the Modal section.
  3. Set a Trigger ID (example: promo-modal).
  4. Add your content blocks inside the Modal section.
  5. Create a link/button anywhere with URL #promo-modal.
  6. Save and test.

Trigger Behavior​

In Modal settings:

  • Trigger ID: unique ID used in links (#your-id)
  • Auto-open on page load: show automatically on load
  • Auto-open delay: delay before auto-open
  • Show on exit intent: show when user leaves browser window
  • Show only once per session: limits repeat popups
  • Show in editor: preview open inside Theme Editor

Layout and Size​

  • Direction: row or column layout for modal content
  • Width: small, medium, large, extra large, full, or custom
  • Custom width: available when width is custom
  • Max height and Padding

Appearance​

  • Color scheme
  • Overlay opacity
  • Close button position
  • Animation: fade, slide-up, or scale
  • Border/shadow controls

If your Trigger ID is holiday-promo, use:

  • #holiday-promo

Example button link target:

#holiday-promo

Notes​

  • Trigger links work anywhere in theme content that supports links.
  • Make sure each modal has a unique Trigger ID.