---
title: "Customize Drawer"
slug: "customize-drawer"
updated: 2026-08-13T12:02:57Z
published: 2026-08-13T12:02:57Z
canonical: "support.whatfix.com/customize-drawer"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Drawer

After creating a Drawer, customize it based on your requirements.

Whatfix enables you to customize the following in a Drawer:

- Add Body and Header content
- Add images and GIFs
- Add buttons and attach external and deep links

> [!NOTE]
> Info:
> 
> The customization options differ based on the Drawer template you choose.

On the Whatfix Mobile Studio, choose a Drawer template, and then click the Drawer to configure the following: ![2022-11-23_17-10-27](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2022-11-23_17-10-27.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

Expand the following accordions for more details:

**Header**

- Under the **Header** section, edit the Header text, font, font size, font weight, text alignment, text color, and bottom margin. [Add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![header_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)
- Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar. ![header_action_bar_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_action_bar_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

**Body**

- Go to the **Body** section. Edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. [Add a user property](/mobile/docs/personalization) to personalize the experience for your end user. ![body_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)
- Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar. ![drawer_body](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/drawer_body.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

**Divider**

Align the Divider to the top or bottom, add any content block, or delete the Divider using the action bar. ![divider_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/divider_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

**Media**

- Under the **Media** section, click the **Edit** icon to add images to your Drawer from your local drive and then configure the image size, alignment, and bottom margin. ![media_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

> [!NOTE]
> Info:
> 
> Whatfix Mobile only supports image formats including .jpg, .png, and .gif. GIF files are supported up to 500 KB, while all other formats are supported up to 100 KB.
  - Enable the **CLICK ACTION** toggle to link any action to your image. Clicking the image triggers the action that you configure. ![click_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_action.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)
  - Align the **Media** to the top or bottom, add any content block, or delete the Media section using the action bar. ![media_action_bar_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_action_bar_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

**Buttons**

- Customize the button that appears on your Drawer. You can choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin. ![button_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)
- Click the **BUTTON** dropdown to customize the individual buttons. Change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. [Add a user property](/mobile/docs/personalization) to personalize the experience for your end user. ![customize_button_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/customize_button_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

The following are the Button Actions you can configure:

| Button Action | Description |
| --- | --- |
| Dismiss | When the user clicks the button, the Drawer is dismissed from the app screen |
| External Link | When the user clicks the button, they are routed to the URL that is attached to the button |
| Deep Link | When the user clicks the button, they are routed to the app screen within the same app that is attached to the button |

- Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar. ![button_action_bar_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_action_bar_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

**Layout**

1. Click **Layout** to customize the position of the Drawer to the left or right of your app screen and enable **OVERLAY** toggle and the **Close** icon to dismiss the Drawer. ![2023-02-06_16-48-23](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-02-06_16-48-23.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

> [!NOTE]
> Info:
> 
> Click **Edit** to do the same. ![editiconmobile.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/editiconmobile.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

- Change the **Fill Color** of the Overlay and enable your end user to dismiss the Drawer by clicking the Overlay.
- Change the color of the Drawer template and also customize the position of the **Close** icon, the button size, the background color, and the color of the icon.

![Mobile_layout config_drawer.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_layout%20config_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A21%3A30Z&se=2026-10-29T17%3A21%3A30Z&sr=c&sp=r&sig=kShbo4RniknJRCIB9%2BmDYd5AWjXGIMU6Xwb%2FKuVwCu8%3D)

> [!NOTE]
> Info:
> 
> - [Preview projects on a device](/mobile/docs/preview-projects-on-a-device) before making it live for your end users.
> - After creating and designing the Drawer, click **Publish** to make the Drawer live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).