# 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="/files/HX3xsU3342p2PyEEmgWy" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/shopify/status-bar-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.