# Status Bar Customization

## Overview

The Status Bar Customization feature allows you to personalize how your Shopify store's mobile app appears on native devices. By customizing the status bar, you can create a cohesive brand experience throughout your mobile application.

## Accessing Status Bar Customization Settings

#### Step 1: Navigate to Theme Customization

1. Log in to your Shopify admin panel
2. Go to **Online Store > Themes**
3. Click **Customize** next to your current theme

#### Step 2: Access App Embeds Section

1. In the theme editor, locate and click on the **App Embeds** section
2. Find and enable the **Status Bar Customization** block

## Configuring Status Bar Settings

The Status Bar Customization panel offers several options to personalize how the status bar appears on mobile devices:

<figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FWDdydSwlrgVPFYswtEBL%2FScreenshot%202025-03-20%20at%2011.23.29%E2%80%AFAM.png?alt=media&#x26;token=ab5bba53-b374-419d-a17b-0aab0cbc46a2" alt="" width="316"><figcaption></figcaption></figure>

#### Status Bar Style

Choose between two display modes:

* **Light**: Shows dark status bar elements (clock, battery, signal icons) on a light background
* **Dark**: Shows light status bar elements on a dark background

Select the option that provides the best contrast with your chosen status bar color.

#### Status Bar Color

Set the background color of the status bar:

1. Click on the color picker
2. Select a color that matches your brand (e.g., #000000 for black)
3. You can either:
   * Click on the color wheel to select a color visually
   * Enter a specific hex code in the #000000 format

For best results, choose a color that complements your app's header and overall design.

#### Overlay Status Bar

This toggle determines how the status bar interacts with your app content:

* **ON**: The status bar overlays your app content at the top of the screen
* **OFF**: The status bar remains separate from your app content

Enable this option if you want your app content to extend to the top edge of the device screen.

## Saving Your Status Bar Customization

1. After configuring your status bar settings, click **Save** to apply your changes
2. The changes will be reflected in your mobile app once the theme is published

## Testing Your Status Bar Customization

To verify your status bar customization:

1. Open your mobile app on different devices
2. Check how the status bar appears on various screen sizes
3. Ensure text and icons are clearly visible against your chosen background color

## Managing Your Status Bar Settings

If you need to make changes to your status bar configuration:

1. Return to **Online Store > Themes > Customize**
2. Navigate to the **App Embeds** section
3. Click on the **Status Bar Customization** block
4. Adjust your settings as needed
5. Click **Save** to apply the changes

## Best Practices for Status Bar Customization

1. **Brand Consistency**: Choose a status bar color that aligns with your brand identity
2. **Readability**: Ensure the status bar style (Light/Dark) provides adequate contrast with your selected color
3. **Testing**: View your customization on multiple device types to ensure proper appearance
4. **Simplicity**: Keep the design clean and unobtrusive to avoid distracting from your app content

By properly configuring your status bar customization, you can enhance the visual appeal and professional look of your mobile application while maintaining a consistent brand experience.