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.