Overlay
Controls the appearance of the overlay backdrop that appears behind drawers, modals, and popups.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Overlay
Settings
General
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Click to close | Lets visitors close the overlay (and its associated drawer, modal, or popup) by clicking anywhere on the backdrop. | Checkbox | On |
| Overlay opacity | Sets how transparent or opaque the overlay backdrop appears. | 0 – 100 % (step 5) | 40 % |
| Enable blur | Turns the background blur effect on or off behind the overlay. | Checkbox | On |
| Blur strength | Controls how strongly the background behind the overlay is blurred. | 0 – 20 px (step 1) | 6 px |
Light mode
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Overlay color | Picks the overlay backdrop color used when the store is displayed in light mode. | Color picker | #000000 |
Dark mode
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| Overlay color | Picks the overlay backdrop color used when the store is displayed in dark mode. | Color picker | #000000 |