Customize the position of the Floating Button

This page describes how to customize the position of the Floating Button.

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

Default position

By default, the position of the Floating Button is the following:

• Aligned to the right-bottom corner

• 20px padding from the right side of the page

• 20px padding from the bottom side of the page

Available options for positioning

In general, there is no limitations of positioning of the Floating Button. Below, we shared some typical examples.

Place the Floating Button on the bottom-right but with different paddings

Use the following code to keep the position of the Floating Button, but change the paddings:

.haut-floating-open-iframe {
    bottom: 20px; /* Change "20px" to the desired value */
    right: 20px; /* Change "20px" to the desired value */
  }

Place the Floating Button on the bottom-left corner

Use the following code to put the Floating Button to bottom-left corner:

.haut-floating-open-iframe {
    right: auto; 
    bottom: 20px; /* Change "20px" to the desired value */
    left: 20px; /* Change "20px" to the desired value */
  }

Place the Floating Button on the bottom-center

Use the following code to put the Floating Button to bottom-center, but change the paddings:

.haut-floating-open-iframe {
    bottom: 20px; /* Change "20px" to the desired value */
    left: calc(50% - 96px); /* This calculation is based on the button with the text "Free AI Skin Analysis" */
    right: auto;
  }

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 copied code on the next row after the <style> tag.

• Click Save.

---

Not a Haut.AI client yet?

Talk to sales