> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify.md).

# Integrate as Floating Button to Shopify

This page describes how to integrate the Consumer App as widget, available across all pages of 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 Consumer App integrated as Floating Button.

{% embed url="<https://drive.google.com/file/d/1MO4RpfBTs-VHufMxwcw3nstMcbmodp3v/view?usp=drive_link>" fullWidth="false" %}

***

## Integrating step-by-step

1. Navigate to [Consumer Apps](https://saas.haut.ai/app/skin-consultant/dashboard) tab on the menu of SaaS platform.
2. Navigate to your Consumer App details by clicking on name of your app in the list of apps.
3. Open the `Integration` tab.
4. Select `Shopify` as a platform.
5. Select `Floating button` as Type of integration.

   <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2FvR1jvAmns0RiDNIozMFN%2FSkin%20Consultant%20App%20%E2%80%93%20Shopify%20-%20Floating%20Button.png?alt=media&amp;token=046f9c05-3751-4ea2-8354-a10352d5b91f" alt=""><figcaption></figcaption></figure>
6. Open your Shopify store public link and navigate to the cart page .
7. Copy the cart page URL. Usually, it looks like this: `yourdomain/cart`.
8. Paste a link to your shopping cart and click `Next`.

   <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2FFp0liZlzq8SH2gdupnKi%2FSkin%20Consultant%20App%20%E2%80%93%20Shopify%20-%20Floating%20Button%20%E2%80%93%20Cart.png?alt=media&amp;token=942ffcd8-b57a-400d-aec5-e4917809783b" alt=""><figcaption></figcaption></figure>
9. Copy the integration code.

   <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2F27n95kVUSnG0CTp2zapw%2FSkin%20Consultant%20App%20%E2%80%93%20Shopify%20-%20Floating%20Button%20%E2%80%93%20Integration%20code.png?alt=media&amp;token=22d3c9ff-b0d3-4d84-bba3-77f1b29997f7" alt=""><figcaption></figcaption></figure>
10. Open your Shopify account and click `Online Store` in the left menu.

    <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2FkCJ2br8Ol8MEK1y6Eflr%2FFloating%20button%20%E2%80%93%20Online%20store.png?alt=media&amp;token=7acac24d-5540-4756-87eb-89ba4d99024e" alt=""><figcaption></figcaption></figure>
11. Click the `···` button and then click `Edit code`.

    <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2FVkZrgOcOOdCdOsr6gF8d%2FFloating%20button%20%E2%80%93%20Edit%20code.png?alt=media&amp;token=57fe972e-bdc2-46a4-bf34-a7e077734a40" alt=""><figcaption></figcaption></figure>
12. Select the file `header.liquid` in the left sidebar. It's usually placed inside the `Snippets` folder.

    <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2FHunZ5tL4qL12lNPZ47KY%2FFloating%20button%20%E2%80%93%20HeaderLiquid.png?alt=media&amp;token=2386def4-5ad3-47e9-a3a5-717068f2e6d2" alt=""><figcaption></figcaption></figure>
13. Paste the copied code on the first line and click `Save`.

    <figure><img src="https://245161714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MWxBX_zB4FnflOpyBGO%2Fuploads%2F5Q0tI2lNmgodoUvUpp0K%2FFloating%20button%20%E2%80%93%20Save.png?alt=media&amp;token=330a161b-6463-4336-b7ad-394daedd323f" alt=""><figcaption></figcaption></figure>
14. **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.

***

## Customization options

You can customize the color, text and position of the Floating Button. To do so, follow the guides below:

* [Customize the color of the Floating Button](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify/customize-the-color-of-the-floating-button.md)
* [Customize the text of the Floating Button](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify/customize-the-text-of-the-floating-button.md)
* [Customize the position of the Floating Button](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify/customize-the-position-of-the-floating-button.md)

## Limitations

You can read about the current limitations of the Consumer App on the [Know Limitations Page](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/known-limitations.md).

***

{% hint style="warning" %}
Not a Haut.AI client yet?
{% endhint %}

<a href="https://haut.ai/book-a-demo?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button primary" data-icon="user-vneck">Book a demo</a> <a href="https://haut.ai/product/ai-skin-analysis?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button secondary" data-icon="external-link">Platform overview on haut.ai</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.