> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Add your Invent assistant to Shopify stores

## Overview

Add your Invent AI assistant to your Shopify store with a floating bubble. Perfect for providing product support, answering customer questions, and boosting conversions.

## Installation

<Steps>
  <Step title="Access Theme Editor">
    In your Shopify admin, go to **Online Store** → **Themes** and click **Customize** on your active theme.
  </Step>

  <Step title="Edit Theme Code">
    Click the three dots menu and select **Edit code**.
  </Step>

  <Step title="Open theme.liquid">
    In the **Layout** folder, click on `theme.liquid`.
  </Step>

  <Step title="Add Before Closing Body Tag">
    Scroll to the bottom and find the closing `</body>` tag. Add this code just before it:

    ```html theme={"system"}
    <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
    ```

    Replace `ast_YOUR_ASSISTANT_ID` with your actual assistant ID from the Invent dashboard.
  </Step>

  <Step title="Save Changes">
    Click **Save** and the bubble will appear on all pages of your store.
  </Step>
</Steps>

## Customization

### Match Your Store Branding

```liquid theme={"system"}
<invent-assistant
  assistant-id="ast_YOUR_ASSISTANT_ID"
  theme-button-background-color="{{ settings.color_primary }}"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

### Show Only on Specific Pages

Use Shopify Liquid to control where the bubble appears:

```liquid theme={"system"}
{% if template == 'product' or template == 'collection' %}
  <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
  <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
{% endif %}
```

## Customer Authentication

<Warning>
  **Security Requirement:** When using any `user-*` attributes (`user-id`, `user-name`, `user-email`), you **must** also provide `user-hash`. Both `user-id` and `user-hash` must be provided together, or neither should be provided. The `user-hash` must be generated on your backend using HMAC-SHA256 with your assistant's secret key. Never expose the secret key to the client.
</Warning>

Pass Shopify customer data to Invent for personalized shopping assistance.

**Important:** Shopify Liquid cannot generate HMAC hashes securely. You'll need to use a Shopify app or custom backend endpoint to generate the `user-hash` before passing it to the frontend. Without proper hash generation, omit all `user-*` attributes and let the assistant create an anonymous session.

```liquid theme={"system"}
{% if customer %}
  {%- comment -%}
    Note: user-hash must be generated by a Shopify app or backend service.
    Do not use customer data without a valid hash.
  {%- endcomment -%}
  <invent-assistant
    assistant-id="ast_YOUR_ASSISTANT_ID"
    user-id="{{ customer.id }}"
    user-name="{{ customer.name }}"
    user-hash="{{ customer.metafields.custom.invent_hash }}"
  />
{% else %}
  <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
{% endif %}
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

## Pass Product Context

Provide product information to your assistant on product pages:

```liquid theme={"system"}
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

{% if template == 'product' %}
<script>
  window.inventContext = {
    page: 'product',
    product: {
      id: {{ product.id }},
      title: {{ product.title | json }},
      price: {{ product.price | money }},
      available: {{ product.available }}
    }
  };
</script>
{% endif %}
```

## E-commerce Features

<CardGroup cols={2}>
  <Card title="Product Support" icon="headset">
    Answer product questions in real-time
  </Card>

  <Card title="Order Tracking" icon="truck">
    Help customers track their orders
  </Card>

  <Card title="Cart Recovery" icon="cart-arrow-down">
    Assist with abandoned cart recovery
  </Card>

  <Card title="Size & Fit Help" icon="ruler">
    Provide sizing and fit guidance
  </Card>
</CardGroup>

## Shopify Plus Features

For Shopify Plus stores, you can use Scripts or Checkout Extensions:

### Add to Checkout Pages

1. Go to **Settings** → **Checkout**
2. Scroll to **Additional scripts**
3. Add the bubble code

```html theme={"system"}
<invent-assistant
  assistant-id="ast_YOUR_ASSISTANT_ID"
  theme-appearance="light"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Bubble not appearing">
    **Solutions:**

    * Verify code is before closing `</body>` tag in theme.liquid
    * Clear browser cache and reload
    * Check for JavaScript errors in browser console
    * Ensure theme doesn't have conflicting chat apps
  </Accordion>

  <Accordion title="Conflicts with other apps">
    **Solutions:**

    * Check if other chat/help apps are installed
    * Adjust z-index in theme CSS if needed
    * Contact support for app compatibility
  </Accordion>
</AccordionGroup>

## Popular Shopify App Compatibility

✅ Works with Klaviyo, Yotpo, Judge.me, and other popular Shopify apps