Skip to main content

​
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

1

Access Theme Editor

In your Shopify admin, go to Online Store → Themes and click Customize on your active theme.
2

Edit Theme Code

Click the three dots menu and select Edit code.
3

Open theme.liquid

In the Layout folder, click on theme.liquid.
4

Add Before Closing Body Tag

Scroll to the bottom and find the closing </body> tag. Add this code just before it:
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
Replace ast_YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.
5

Save Changes

Click Save and the bubble will appear on all pages of your store.

​
Customization

​
Match Your Store Branding

<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/button.js" async defer></script>

​
Show Only on Specific Pages

Use Shopify Liquid to control where the bubble appears: 
{% if template == 'product' or template == 'collection' %}
  <invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
  <script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
{% endif %}

​
Customer Authentication

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.
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. 
{% 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/button.js" async defer></script>

​
Pass Product Context

Provide product information to your assistant on product pages: 
<invent-assistant assistant-id="ast_YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.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

Product Support

Answer product questions in real-time

Order Tracking

Help customers track their orders

Cart Recovery

Assist with abandoned cart recovery

Size & Fit Help

Provide sizing and fit guidance

​
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
<invent-assistant
  assistant-id="ast_YOUR_ASSISTANT_ID"
  theme-appearance="light"
/>
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

​
Troubleshooting

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
Solutions:
  • Check if other chat/help apps are installed
  • Adjust z-index in theme CSS if needed
  • Contact support for app compatibility
✅ Works with Klaviyo, Yotpo, Judge.me, and other popular Shopify apps