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".