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

# Customize widgets on Branded App screens

> Add and configure widgets including products, buttons, images, galleries, text, videos, and embed codes on Branded App screens.

**Widgets** let you customize Branded App screens with various content types including products, buttons, images, galleries, text, videos, and embed codes. This page covers adding, editing, and managing widgets on app screens.

## What is a screen?

The screens are like pages in a Branded App that members will see after they log into the app via the [welcome screen](/articles/mobile-apps/branded-app/how-to-set-up-a-branded-app-welcome-screen-where-new-users-can-create-an-account) or login screen (after viewing the [welcome carousel](/articles/mobile-apps/branded-app/how-to-add-an-onboarding-carousel-to-your-branded-app), if that feature has been added). If a member is already logged in, this will be the first thing they see when they reopen the app. You can learn more about custom screens [here](/articles/mobile-apps/branded-app/how-to-create-custom-screens-for-your-branded-mobile-app).

There are a variety of widgets you can use to customize these screens and enhance the experience of your customers.

## Add a widget to a screen section

To add a section to an app screen:

1. Select **Branded Mobile App** from your Kajabi dashboard.
   If you've fully completed your [app setup](/articles/mobile-apps/branded-app/how-do-i-get-started-creating-my-own-branded-app), you should see your app Design settings.
2. Select the **Design** tab.
3. Click **Customize**:

<img src="https://mintcdn.com/kajabi-support/ozJszuNKO84dmc_i/articles/images/46c020f7_35745526428571.png?fit=max&auto=format&n=ozJszuNKO84dmc_i&q=85&s=ddb0cce1a35dc7993e76c2cf6a79d7cc" alt="Design settings" width="1600" height="462" data-path="articles/images/46c020f7_35745526428571.png" />

4. Make sure that you are open to the **Widgets** editor and select the appropriate screen from the drop down:

<img src="https://mintcdn.com/kajabi-support/3C7Vui-NnfT9lLL-/articles/images/d2c3c0be_37733449112475.png?fit=max&auto=format&n=3C7Vui-NnfT9lLL-&q=85&s=9cea13d0ffda0ddf91cdf8114ef0b7cc" alt="Widgets editor" width="1600" height="788" data-path="articles/images/d2c3c0be_37733449112475.png" />

### Available widgets

* **Product** widgets allow you to feature courses, coaching, product and community products members own, even if they are not included in an [app offer](/articles/mobile-apps/branded-app/how-to-create-app-offers-for-your-branded-app)
* **Button** can be used to link to pages, blog posts, or URLs
* **Image** can add further customization while also acting as a button that links to pages, blogs or URLs
* **Gallery** enables you to upload and display multiple images as a gallery
  * It is recommended that the uploaded image dimension matches the selected ratio. For example -1260x720 for 7:4, 1080x1080 for 1:1, and 720x960 for 3:4
* **Text** sections can be added throughout the home screen
* **Video** widgets allow you to add videos directly to the home screen with customizable cover images
* **Embed Code** widgets give you the opportunity to paste in any HTML code to display additional content

### Drag and drop widgets

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/3awr5006a1" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

The widget editor will open on the page's right side, allowing you to further customize the widget's title, text, images, etc.

A carousel section will automatically rotate each image or course into view, while a horizontal scrolling section will allow app members to scroll through images or courses at their own pace.

For most of the widgets, you can toggle on or off the Section's title and select the desired alignment.

<Note>
  **Note:**
  The Product Widget can be used to display courses, coaching, podcast and community products. If a displayed product is not part of an app offer or is not owned by the member, then it will not appear on their screen.
</Note>

## Edit a screen section

Customize section titles and content for each widget added to a screen.

**To edit a widget on a screen:**

1. Select **Branded Mobile App** from your Kajabi dashboard.
   If you've fully completed your [app setup](/articles/mobile-apps/branded-app/how-do-i-get-started-creating-my-own-branded-app), you should see your app Design settings.
2. Select the **Design** tab.
3. Click **Customize**:

<img src="https://mintcdn.com/kajabi-support/ADlD5UQgkduQhvui/articles/images/a9df43b5_35745549475483.png?fit=max&auto=format&n=ADlD5UQgkduQhvui&q=85&s=11fdd03150a424d5f697fd4e0eed7d0e" alt="Design settings" width="1600" height="462" data-path="articles/images/a9df43b5_35745549475483.png" />

4. Make sure that you are open to the **Widgets** editor and select the appropriate screen from the drop down:

<img src="https://mintcdn.com/kajabi-support/0-YPsbfqtWW6JQNQ/articles/images/fcb673d6_37733434304027.png?fit=max&auto=format&n=0-YPsbfqtWW6JQNQ&q=85&s=5d0b962447d08816321a8957084772ed" alt="Widgets editor" width="1600" height="788" data-path="articles/images/fcb673d6_37733434304027.png" />

5. Select the widget section that you wish to edit on the home screen:

<img src="https://mintcdn.com/kajabi-support/4Tq1KxWrCeOGslKH/articles/images/16f04e6d_37733449117083.png?fit=max&auto=format&n=4Tq1KxWrCeOGslKH&q=85&s=e81f1364423a1a6b9e998f184ad1ed59" alt="Select widget" width="1600" height="743" data-path="articles/images/16f04e6d_37733449117083.png" />

Reorder images and products you've added to a widget by pressing and holding the **six dots to the left** of each in the widget editor, then dragging and dropping as desired:

<img src="https://mintcdn.com/kajabi-support/AIdS_N2hx9dBLwx9/articles/images/382604ea958c6c1d53d405fcadf6fb0e.png?fit=max&auto=format&n=AIdS_N2hx9dBLwx9&q=85&s=f55f5167c501c5ab1ee7dc261173054d" alt="Reorder widgets" width="1600" height="1117" data-path="articles/images/382604ea958c6c1d53d405fcadf6fb0e.png" />

If you change your mind about including a widget, click the **x** icon to the right to remove it.

When you're done, click **Save & Publish** at the top right to publish screen updates to the live app.

### Reorder screen sections

Change the order of screen sections on a Branded App page.

To reorder screen sections, select the widget section that you wish to rearrange and click the up or down arrow to move to the desired location:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/0ktr2iee6m" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Delete a screen section

To delete a screen section, select the widget section that you wish to delete and click the trash icon:

<img src="https://mintcdn.com/kajabi-support/gPLd9epPHl3pyPMl/articles/images/d9912f92_35745549484443.png?fit=max&auto=format&n=gPLd9epPHl3pyPMl&q=85&s=bf2f1f5dc8cd060c7141360dc2d13d7d" alt="Delete widget" width="1600" height="752" data-path="articles/images/d9912f92_35745549484443.png" />
