Overlay Search Modal

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Overview

The Search Modal is a full-screen overlay that opens when customers tap the search icon in the header. It includes a search input, optional predictive search results, and a close button. Use it for header layouts that show a search icon instead of an inline search bar.

Where It Appears

Header — When the header layout uses the search icon (drawer toggle) instead of an inline search bar
Shown on both desktop and mobile where that layout is used

Files

File	Purpose
`snippets/header-search-modal.liquid`	Markup for modal, backdrop, form, predictive container
`sections/header.liquid`	Renders the modal via `{% render 'header-search-modal' %}`
`assets/section-header.js`	Opens/closes modal, manages focus, Escape handling

Structure

Search Modal (role="dialog", aria-modal="true")
├── Backdrop (data-search-modal-close) — click to close
├── Content wrapper
│   ├── Search form (action="/search")
│   │   ├── Input (data-predictive-input when predictive enabled)
│   │   └── Submit button
│   ├── Predictive results container (data-predictive-results) — hidden when empty
│   └── Close button (data-search-modal-close)

Data Attributes

Attribute	Element	Purpose
`data-search-modal`	Modal root	Identifies modal for JS
`data-search-modal-toggle`	Header search icon	Opens modal on click
`data-search-modal-close`	Backdrop, close button	Closes modal
`data-predictive-input`	Input	Enables predictive search (when Theme settings > Enable predictive search)

Behavior

Opening

Customer clicks the header search icon (data-search-modal-toggle)
Modal becomes visible (hidden removed, is-open class)
aria-hidden="false", aria-expanded="true" on toggle
Search input receives focus after a short delay

Closing

Backdrop click — closes modal
Close button — closes modal
Escape key — closes modal

Predictive Search

When Theme settings > Search > Enable predictive search is on:

Typing in the modal input triggers predictive search (via data-predictive-input)
Results appear in the predictive container
Uses the same predictive search logic as inline search

Customization

Via Theme Customizer

Header section — Choose layout with search icon vs inline search
Theme settings > Search — Predictive search on/off

Via Code

snippets/header-search-modal.liquid — Modal markup and classes
Header section schema — Layout options
CSS in theme — .m-header__search-modal, .m-header__search-modal-backdrop, etc.

Accessibility

role="dialog", aria-modal="true", aria-label for screen readers
Focus moves to input when opened
Escape closes modal
Close button has aria-label for "Close search"

Multipurpose theme documentation