Integrate as Floating Button to Shopify
This page describes how to integrate the Skin Consultant app as widget, available across all pages of your Shopify web store.
Floating Buttun is the best way to integrate the Haut.AI Skin Consultant App into your Shopify web store. This option provides you with the advantage that your users can start an AI skin analysis and get product recommendations from any page of your web store, except the checkout web page.
How it works?
See our video showing the example Shopify webstore with Skin Consultant app integrated as Floating Button.
Integrating step-by-step
Navigate to Skin consultant tab on the menu of SaaS platform.
Navigate to your Skin Consultant App details by clicking on name of your app in the list of apps.
Open the (3) Integration tab.
Select "Shopify" as a platform.
Select "Floating button" as Type of integration.
Open your Shopify store public link and navigate to the cart page .
Copy the cart page URL. Usually, it looks like this:
yourdomain/cart.Paste a link to your shopping cart and click "Next."
Copy the integration code.
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.
Paste the copied code on the first line and click "Save."
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.
Customizing 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:
Open your app settings ("General").
Scroll down to "Color theme."
Change the accent colour.
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.
Customizing 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."
Last updated
