---
title: "Customize Carousels"
slug: "customize-carousels"
updated: 2026-08-13T11:56:42Z
published: 2026-08-13T11:56:42Z
canonical: "support.whatfix.com/customize-carousels"
---

> ## 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 Carousels

After you have [created a Carousel](/mobile/docs/create-a-Carousel) and chosen a template, design and configure the Carousel.

Click a Carousel Slide to configure the following: 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. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)
- Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_actionbar_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

**Body**

- Go to the **Body** section. Edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. Also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)
- Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_actionbar_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)
- Align the Divider to the top or bottom, add any content block, or delete the Divider using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/divider_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

**Media**

- Under the **Media** section, click the **Edit** icon to add images to your Carousel Slide from your local drive and then configure the image size, alignment, and bottom margin. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

> [!NOTE]
> Info
> 
> Whatfix Mobile 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-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

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

> [!NOTE]
> Info
> 
> Provide a name for the action you add to your media using which you track the analytics on how many users are clicking the media. ![click_events](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_events.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

- Align the **Media** to the top or bottom, add any content block, or delete the Media section using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_actionbar_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

**Button**

- Customize the button that appears on your Full Screen. Choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%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. Also [add 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-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

Configure the following button actions:

| Button Action | Description |
| --- | --- |
| Dismiss | When the user clicks the button, the Carousel is dismissed from the app screen |
| Next | When the user clicks the button, the Carousel moves to the next slide |
| Previous | When the user clicks the button, the Carousel moves back to the previous slide |
| External Link | When the user clicks the button, they are routed to the URL that is attached to the media |
| Deep Link | When the user clicks the button, they are routed to the app screen within the same app that is attached to the media |

- Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_actionbar_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

**Layout**

1. Click the **Layout** option on the left, or the **Edit** icon. ![edit_icon_drawer](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/edit_icon_drawer.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

In the Layout section, do the following:

- Add a **Background Color** to your Carousel Slide. ![carousel_layout_bg colour.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel_layout_bg%20colour.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)
- Add a **Close** button to dismiss the entire Carousel. ![carousel_layout_close button.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel_layout_close%20button%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)
- Add or remove **Swipe** ability, **Arrows**, and **Progress dots** in your Carousel. ![carousel layout.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel%20layout%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

1. Click **Done**. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_fullscreen.png?sv=2026-02-06&spr=https&st=2026-10-29T20%3A36%3A54Z&se=2026-10-29T21%3A36%3A54Z&sr=c&sp=r&sig=ZoZ6NOal0cFiccICiM7tKPhfbM1%2BbHf7QiVz5Su3ujI%3D)

The Carousel you create is automatically saved.

> [!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 Full Screen, click **Publish** to make the Full Screen live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).