Embed floating button in Shopify

The best way to integrate the Skin Consultant App into your Shopify store is with a floating button. This method has the advantage that users can start an AI skin analysis on any site page (except checkout).

How it works

How to embed Haut.AI's widget as a floating button on all pages of your shop

  1. Login into your Haut.AI SaaS account and go to the "Skin Consultant" section.

  2. Open the app that you want to embed into your Shopify store.

  3. Click "Integration."

  4. Select "Shopify" and then select "Floating button."

  5. Open your Shopify store and go to the cart page. Copy the page URL.

  6. Paste a link to your shopping cart and click "Next". Usually, it looks like this: yourdomain/cart.

  7. Copy the integration code.

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

  9. Click the "···" button and then click "Edit code."

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

  11. Paste the copied code on the first line and click "Save."

  12. You are all set, congratulations! Now, open the home page, product page or any other page of your Shopify store and check if the button is in the bottom-right corner of your website.

Changing the colour of the floating button

By default, the floating button uses your app's "Accent" colour as the button colour. There are two options for changing the button colour:

  • Change the accent colour if you want the floating button to use the same colour as your app.

  • Change only the colour of the floating button if you don't want the floating button to use the same colour as the rest of the app.

Change the accent colour

To change the accent colour, do the following:

  1. Open your app settings ("General").

  2. Scroll down to "Color theme."

  3. Change the accent colour.

  4. Save the changes by clicking "Save change" on the toolbar.

Change only the colour of the floating button

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

To change the colour of 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.

  • Find the integration code.

  • Change the current colour with the new one and click "Save." Important! It should be a HEX colour code.

Changing the text of the floating button

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

To change the colour of 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.

  • Find the integration code.

  • Change the current text with the new one and click "Save."

Using the floating button along with the widget

You might also want to mix this integration with integration as an iframe if you want a separate dedicated page with skin analysis.

To achieve this, follow this page to embed the Skin Consultant as a floating button and then integrate the same Skin Consultant as an iframe to another page. Both integrations will work in parallel, and you will have a floating button available on all pages and a separate page with the Skin Consultant as part of it.

Last updated