> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/magecomp-mobile-app-builder/maintainance.md).

# Maintainance

The **Maintenance Mode Settings** allow you to design and personalize the screen shown to customers when your mobile app is temporarily offline or under maintenance.

You can customize the **icon, maintenance message, support information, exit button, card design, and screen background** to match your app's branding.

The Maintenance Mode section includes:

* **Icon Settings**
* **Message & Support Settings**
* **Exit Button Settings**
* **Card Settings**

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F4kRPRggjXv4unkTbY4Ip%2Fimage.png?alt=media&amp;token=4747bff5-3860-4528-85b8-449c337bfe92" alt=""><figcaption></figcaption></figure>

### Icon Settings

The **Icon Settings** section allows you to choose and customize the icon displayed on the maintenance screen.

#### Icon Selection

You can choose between:

* **Preset Icon Picker** – Select from the available preset icons.
* **Custom Image Upload** – Upload your own custom image or icon.

Available preset icons include options such as:

* Construction
* Gear
* Clock
* Alert
* Shield
* Safety
* Mobile

**Example:**\
Use the **Gear** icon for a general maintenance message or the **Alert** icon for an important service interruption.

#### Icon Color

Select the color of the selected icon.

#### Icon Width

Set the width of the icon in pixels.

#### Icon Height

Set the height of the icon in pixels.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FUBUctduf3ycsIquebQKr%2Fimage.png?alt=media&amp;token=d58649c9-f568-45af-8183-4135dfb8da33" alt=""><figcaption></figcaption></figure>

## Message & Support Settings

The **Message & Support Settings** section allows you to configure the main maintenance message and provide customers with support contact information.

#### Title

Enter the main heading displayed on the maintenance screen.

**Example: Under Maintenance**

#### Title Font Size

Set the font size of the maintenance title in pixels.

#### Title Font Color

Choose the color of the maintenance title.

#### Message

Enter the message you want customers to see while the app is under maintenance.

&#x20;**Example:** We are sorry for the inconvenience. Our app is currently under maintenance. Please check back soon.

#### Support Type

Choose how customers can contact your support team.

Available options:

* **Email Address**
* **Mobile Number**
* **None**

Select **None** if you do not want to display support contact information.

#### Support Label

Enter the label displayed above or alongside the support contact information.

**Example: Contact Us:**

#### Support Email

Enter the email address that customers can use to contact your support team.

**Example: <support@gmail.com>**

#### Description Font Size

Set the font size of the maintenance message.

#### Description Font Color

Choose the color of the maintenance message.

#### Support Font Size

Set the font size of the support information.

#### Support Font Color

Choose the color of the support information.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FSeLd0w0lhqzHr0hgNjgd%2Fimage.png?alt=media&amp;token=b16c9d28-419c-4e7b-a898-a69f38de0930" alt=""><figcaption></figcaption></figure>

## Exit Button Settings

The **Exit Button Settings** allow you to customize the button customers can use to exit the maintenance screen.

#### Enable Exit Button

Enable or disable the exit button.

When enabled, customers will see the configured exit button on the maintenance screen.

1. **Button Text** : Enter the text displayed on the button.

**Example:** Exit or Close

2. **Text Size**: Set the font size of the button text.
3. **Text Color**: Choose the color of the button text.
4. **Border Width**: Set the width of the button's border in pixels.
5. **Border Radius:**

* Adjust the roundness of the button corners.
* A higher value creates more rounded corners.

6. **Border Color**: Choose the button border color.
7. **Padding Block**: Set the vertical spacing inside the button.
8. **Padding Inline**: Set the horizontal spacing inside the button.
9. **Background Color**: Select the exit button's background color.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fuy6CSAhdufcLdQo3uagW%2Fimage.png?alt=media&amp;token=bb5ef004-2c6b-4191-b4c7-701ffa53e551" alt=""><figcaption></figcaption></figure>

## Card Settings

The **Card Settings** section allows you to customize the appearance and positioning of the maintenance message card.

Enable or customize the appearance and positioning of the maintenance card.

1. **Background Color**: Choose the background color of the maintenance card.
2. **Border Color**: Choose the color of the card's border.
3. **Border Width**: Set the width of the card border in pixels.
4. **Border Radius**:
   * Adjust the roundness of the card corners.
   * A higher value creates more rounded corners.
5. **Padding Inline**: Set the horizontal spacing between the card content and its edges.
6. **Padding Block**: Set the vertical spacing between the card content and its edges.
7. **Margin Inline**: Set the horizontal margin around the card.
8. **Alignment**: Choose how the content inside the maintenance card should be aligned.

   * **Left**
   * **Center**
   * **Right**

   **Example:** Select **Center** to display the icon, title, message, and support information in the center of the card.
9. **Screen Background**: Select the background color of the screen behind the maintenance card.

   This allows you to create a visual contrast between the maintenance card and the overall app screen.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FVFgMVI4PZwQ6m074ErrT%2Fimage.png?alt=media&amp;token=ef4de4aa-8892-4f8f-b48e-9d9f4e09ff57" alt=""><figcaption></figcaption></figure>

### Example Maintenance Screen

A simple maintenance configuration could be:

**Icon:** Gear\
**Title:** Under Maintenance\
**Message:** Our app is temporarily unavailable while we perform some updates. Please check back soon.\
**Support Type:** Email Address\
**Support Email:** <support@example.com>\
**Button Text:** Exit\
**Alignment:** Center

This creates a clear and informative maintenance screen while giving customers an option to contact support if needed.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FZdUc9eAcBcVrxwQfnipJ%2Fimage.png?alt=media&amp;token=30c5180a-7753-479c-92c2-3576933c782e" alt=""><figcaption></figcaption></figure>