Overlays Overview

Theme: Multipurpose Fashion Theme

Overview

This theme uses dialogs, modals, popups, and drawers to layer content over the page. All use a backdrop/overlay, are accessible (role="dialog", focus trap, Escape), and support keyboard and screen readers. This guide covers every overlay in the theme for merchants, prospective merchants, and theme reviewers.

Overlay Types

Type	Description	Examples
Modal	Centered dialog with overlay; blocks interaction until closed	Search modal, Quick View, Localization
Popup	Small contextual panel, often anchored to a trigger	Image Hotspots product popup, Predictive search
Drawer	Slide-out panel from left or right	Cart, Mobile menu, Mega menu, Filter
Lightbox	Full-screen or large image viewer	Product zoom, Quick View image zoom

All Overlays in This Theme

Modals

Overlay	File(s)	Trigger	Theme setting
Search Modal	`snippets/header-search-modal.liquid`	Header search icon	-
Quick View Modal	`snippets/quick-view-modal.liquid`, `assets/quick-view.js`	"Quick view" on product cards	Theme settings > Enable quick view
Localization Modal	`snippets/localization-modal.liquid`	Language/Country selector in announcement bar	Multiple languages/countries in store

Lightboxes

Overlay	File(s)	Trigger	Section/theme setting
Product Image Lightbox	`snippets/product-media-gallery.liquid`	Click image on product page (when zoom enabled)	Product section > Enable zoom
Quick View Image Lightbox	`snippets/quick-view-modal.liquid` (nested)	Click image inside Quick View modal	-

Popups

Overlay	File(s)	Trigger	Section setting
Image Hotspots Popup	`sections/image-hotspots.liquid`	Tap hotspot on mobile	Image Hotspots > Enable mobile tap
Predictive Search	`snippets/predictive-search.liquid`	Type in search input	Theme settings > Enable predictive search

Drawers

Overlay	File(s)	Trigger	Theme/section setting
Cart Drawer	`snippets/cart-drawer.liquid`	Cart icon (when cart type = drawer)	Theme settings > Cart type = Drawer
Mobile Menu Drawer	`snippets/header-mobile-drawer.liquid`	Hamburger icon (mobile)	Header (default on mobile)
Mega Menu Drawer	`snippets/mega-menu-drawer.liquid`	Nav menu icon (desktop)	Header > Enable mega menu drawer
Filter Drawer	`sections/main-collection-product-grid.liquid`, `snippets/collection-filter-drawer.liquid`	"Filter" button on collection page (mobile)	Collection section > Filters enabled

Common Behavior

Accessibility

role="dialog" (or aria attributes) for screen readers
aria-modal="true" where appropriate
Focus trap when open (Tab cycles within overlay)
Escape closes overlay
aria-hidden toggled on open/close

Closing

Overlay/backdrop click - closes most overlays
Close button - explicit close
Escape key - standard close
Navigate away - drawers close on link click where applicable

Where Overlays Live

Location	Overlays
Layout (theme.liquid)	Quick View modal, Predictive search
Header	Search modal, Mobile drawer, Mega drawer
Cart section	Cart drawer (when enabled)
Product page	Product image lightbox (in gallery)
Collection page	Filter drawer
Image Hotspots section	Product popup
Announcement bar	Localization modal

Enabling / Disabling

Overlay	How to enable	How to disable
Search modal	Header layout with search icon	Use inline search layout instead
Quick View	Theme settings > Enable quick view	Turn off in Theme settings
Localization modal	Multiple languages or markets	Single language/market (no selector)
Product image lightbox	Product section > Enable zoom	Turn off zoom
Image Hotspots popup	Section > Enable mobile tap	Turn off mobile tap
Predictive search	Theme settings > Enable predictive search	Turn off in Theme settings
Cart drawer	Theme settings > Cart type = Drawer	Cart type = Page
Mega menu drawer	Header > Enable mega menu drawer	Turn off in Header

Multipurpose theme documentation