Shopify

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

Access Theme Editor

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

Edit Theme Code

Click the three dots menu and select Edit code.

Open theme.liquid

In the Layout folder, click on theme.liquid.

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

Replace ast_YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.

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/embed.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/embed.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/embed.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/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

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

Go to Settings → Checkout
Scroll to Additional scripts
Add the bubble code

<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

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

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

Popular Shopify App Compatibility

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

Getting Started

Assistants

Features

Broadcasts

Workspace Management

Overview

Installation

Customization

Match Your Store Branding

Show Only on Specific Pages

Customer Authentication

Pass Product Context

E-commerce Features

Product Support

Order Tracking

Cart Recovery

Size & Fit Help

Shopify Plus Features

Add to Checkout Pages

Troubleshooting

Popular Shopify App Compatibility

​Overview

​Installation

​Customization

​Match Your Store Branding

​Show Only on Specific Pages

​Customer Authentication

​Pass Product Context

​E-commerce Features

Product Support

Order Tracking

Cart Recovery

Size & Fit Help

​Shopify Plus Features

​Add to Checkout Pages

​Troubleshooting

​Popular Shopify App Compatibility

Overview

Installation

Customization

Match Your Store Branding

Show Only on Specific Pages

Customer Authentication

Pass Product Context

E-commerce Features

Shopify Plus Features

Add to Checkout Pages

Troubleshooting

Popular Shopify App Compatibility