---
title: "Customize Bottom Sheet"
slug: "customize-bottom-sheet"
updated: 2026-08-13T11:40:43Z
published: 2026-08-13T11:40:43Z
canonical: "support.whatfix.com/customize-bottom-sheet"
---

> ## 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 Bottom Sheet

After you have [created the Bottom Sheet project](/mobile/docs/create-bottom-sheet) and chosen a template, design and configure the Bottom Sheet.

Click the Bottom Sheet to configure the following:

**Header**

- Under the **Header** section, edit the Header text, and 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.

![2022-12-02_17-37-44](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2022-12-02_17-37-44.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)
- Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar ![header_bar_spacer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_bar_spacer.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

**Body**

- On the Body of the Highlight, edit the 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. ![design_body](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/design_body.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)
- Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar ![body_bar_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_bar_bs.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)
- Increase, decrease, or delete the Topspacer using the action bar ![spacer_bar_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/spacer_bar_bs.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)
- Customize the button that appears on your Highlight. Choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin ![button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_config.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

**Button**

- 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 user property](/mobile/docs/personalization) to personalize the experience for your end user.

![individual_button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/individual_button.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

The following are the Button Action configurations:

| Button Action | Description |
| --- | --- |
| Dismiss | When the user clicks the button, the Pop-up 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_bar_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_bar_bs.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

**Layout**

1. In the navigation panel, click **Layout** to enable Overlay, change the Bottom Sheet color, and add Ripple Effect.

![2023-02-06_16-48-23.png](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-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

> [!NOTE]
> Info
> 
> Click the **Edit** icon to do the same.
> 
> ![edit_icon_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/edit_icon_bs.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

![layout_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_layout_bottom%20sheet.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

1. Click **Done**. ![done_bs](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_bs.png?sv=2026-02-06&spr=https&st=2026-10-29T14%3A04%3A40Z&se=2026-10-29T15%3A04%3A40Z&sr=c&sp=r&sig=GuX%2BzpT2e7kzy00Q8TqI4YeO4uTHWbSDstApJXsWGis%3D)

The Bottom Sheet you create is automatically saved.

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