Change the stack of the order (z-index) of the Floating Button

This page describes how to change the z-index of the Floating Button.

This option requires editing the code. Please carefully follow the instructions.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Default z-index

By default, the z-index of the Floating Button is set to 2147483647.

How to customize the position of the Floating Button

To change the position on the floating button, do the following:

• Open your Shopify account and click Online Store in the left menu.

• Click the ··· button and then click Edit code.

• Select the file header.liquid in the left sidebar. It's usually placed inside the Snippets folder.

• Copy the code sample above or prepare your own.

• Find the <style> tag

  
• Paste the following code on the next row after the <style> tag.

.haut-floating-open-iframe { 
    z-index: 10; /* Change "10" to the desired value */
}

• Click Save.

---

Not a Haut.AI client yet?

Talk to sales