Skip to content
Quikly Help Center
Product Updates

Layer Quikly Components Behind Your Theme's UI

Quikly components are designed to sit on top of your storefront so they stay visible. Occasionally a component overlaps a piece of your theme’s own UI that should win instead — most commonly the cart drawer on mobile, but also sticky headers, chat widgets, and cookie banners.

You control this with the Z-Index setting. Z-index determines stacking order: a higher number sits in front, a lower number sits behind. This is a component-level styling option, so you can adjust one placement without affecting the rest of the campaign.

The Default

Section titled “The Default”

Every Quikly component defaults to a z-index of 1001, which keeps it above typical storefront content. To push a component behind a piece of theme UI, set its z-index below that element’s z-index.

Example: Teaser Behind the Mobile Cart Drawer

Section titled “Example: Teaser Behind the Mobile Cart Drawer”

When a shopper opens the cart drawer on mobile, you usually want the drawer in front and the teaser tucked behind it.

  1. Navigate to Build > Components in your Quikly campaign.

  2. Find the Teaser component and click the pencil icon to enter Edit mode.

  3. Open the Styles tab.

  4. Expand Display, then expand Layout.

  5. Set Z-Index to a value below your cart drawer’s z-index. In the example below it’s set to 999, just under the 1001 default.

Z-Index field under Styles > Display > Layout for the Teaser component
  1. Click Save, then open your storefront on mobile and open the cart drawer to confirm the teaser now sits behind it.

Finding the Right Value

Section titled “Finding the Right Value”

The number that works depends on the z-index your theme assigns to the element you’re layering against:

  • To go behind an element, set Quikly’s z-index lower than that element’s.
  • To stay in front, leave the default (1001) or raise it.

If you’re not sure what z-index your theme uses for the cart drawer or header, inspect that element in your browser’s dev tools and read its z-index value, then set the Quikly component just below it. Many Shopify themes use values in the low thousands for drawers and overlays, so a value like 999 is a safe starting point for sending a component behind them.

When to Use This vs. Hiding the Component

Section titled “When to Use This vs. Hiding the Component”

If you want the component gone entirely on certain pages or states rather than just layered behind something, use visibility controls instead — for example, hiding a placement on the cart template. Z-index is the right tool when the component should still be present, just not on top.

Section titled “Related Tutorials”