Skip to main content

​
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 Settings > Branding.
  2. Click Edit in the Theme card.
  3. Select Visibility.
  4. In the Launcher stack order section:
    • Check Use custom z-index.
    • Enter your desired z-index value.
    • (Optional) Enable Add !important rule if needed.
  5. 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.