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

# Change the z-index of your Smile launcher

> Adjust how your Smile launcher or panel layers over elements on your storefront.

## How z-index works

The z-index controls which elements appear in front of or behind others on your storefront. For example, if your launcher is hidden behind a chat widget or sticky header, increasing the z-index can bring it to the front.

* A higher z-index places the launcher in front of other elements.
* A lower z-index places it behind other elements.

Smile uses a default z-index that works for most storefronts. If your layout includes elements with higher or conflicting z-index values, you can adjust this setting to resolve display issues.

## Update your launcher z-index

You can customize the z-index of your Smile launcher directly in Smile Admin.

1. In Smile Admin, navigate to **On-site content** > **[Launcher](https://app.smile.io/on-site/launcher).**
2. In the **Launcher stack order** card:
   * Check **Use custom z-index.**
   * Enter your desired z-index value.
   * (Optional) Enable **Add !important rule** if needed.
3. Click **Save.**

## Using the !important rule

The **Add !important rule** option forces your z-index value to override other styles on your site.

This can help resolve more complex conflicts. Use it only when necessary, as it can make styling harder to manage.