> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-settings/overlay.md).

# Overlay

Styles every drawer, dialog, and popup — cart, search, quick view, mobile menu — so overlays match the rest of your store.

![Overlay setting panel](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-0d9cfe39d25fad0079dbd5018765b258c8799175%2Ftheme-settings-overlay-panel.png?alt=media)

***

## Overlay style

| Setting       | Description                                                                                                                                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color scheme  | Palette for all overlay backgrounds, text, and buttons. Pick a scheme different from your page sections to set overlays apart — e.g. dark overlays over a light store. |
| Title size    | Heading size for overlay titles such as the cart and search headings.                                                                                                  |
| Backdrop blur | Blurs the page behind an open overlay to draw focus to it.                                                                                                             |

![Overlay style](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-7f47bdad756f313063c9b108e354c1ff565b59ca%2Ftheme-settings-overlay-style.png?alt=media)

***

## Popovers

Small floating panels shown in context — dropdown menus, option selectors, and tooltips.

| Setting          | Description                       |
| ---------------- | --------------------------------- |
| Border thickness | Border width of popovers.         |
| Shadow           | Elevation shadow behind popovers. |

![Popovers](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-3bcefbc091565ddfb9e378465d222904b59c558d%2Ftheme-settings-overlay-popover.png?alt=media)

***

## Drawer

| Setting                           | Description                                                 |
| --------------------------------- | ----------------------------------------------------------- |
| Enable padding — Desktop / Mobile | Adds inner spacing between a drawer's edge and its content. |

![Drawer with and without padding enabled](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-c1ce885d81bde6e009d6c71fde9e379c6ad68392%2Ftheme-settings-overlay-drawer-padding.png?alt=media)

> The corner radius of drawers and bottom sheets is set under [Corner Radius](/helix/theme-settings/corner-radius.md).

***

{% hint style="info" icon="headset" %}
**Need help?**

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

<a href="https://go.crisp.chat/chat/embed/?website_id=6c25581e-794a-41b4-8552-52f3de1dd1f7" class="button secondary" data-icon="comments">Chat with us</a> <a href="https://modutheme.ticksy.com" class="button primary" data-icon="ticket">Submit a ticket</a>
{% endhint %}
