# Shopify

> Add the Quickchat AI shopping assistant to your Shopify store. Install via the Shopify App Marketplace or embed the widget manually.

In this guide, we'll show how to add Quickchat AI Widget to your Shopify store.

## What you’ll need

- A Shopify store
- The [**Shopping Agent by Quickchat AI**](https://apps.shopify.com/quickchat-ai) app installed from the Shopify App Marketplace (if you don't want to install it and you'd rather connect it manually, [scroll down to the second part of the tutorial](#how-to-manually-add-a-widget-script))
- User permission to edit themes

_Time to complete: \~2 minutes_

---

## What are Shopping AI Agents?

In this short video you will learn the basics: how to turn your Shopify store into a Shopping AI Agent using Quickchat AI and Shopify MCP.

[Watch on YouTube](https://www.youtube.com/watch?v=NPZEg4OVSRE)

## Step 1: Open your Theme Editor

There are two ways to do it:

### Option A (recommended): from Quickchat AI App

Go to [Quickchat AI App](https://app.quickchat.ai) → **Your website** → **Install** tab → click **Embed in your Shopify Store**.

This opens your store’s Theme Editor directly on the page where the app embed can be enabled.

### Option B: from Shopify Admin

Go to [Shopify Admin](https://admin.shopify.com/) → **Online Store → Themes** → on your current theme click **Customize**.

![Screenshot: Themes page with the **Customize** button highlighted](https://docs.quickchat.ai/_astro/1-Customize.kXpfCtQj.png)

---

## Step 2: Enable the app embed

Inside the Theme Editor, open the left sidebar and go to **App embeds**.

![Screenshot: App embeds panel](https://docs.quickchat.ai/_astro/2-App_embeds.DKD14wCr.png)

Find **Quickchat AI Widget** and toggle it **on**.

![Screenshot: Enable Quickchat AI in the Theme Editor](https://docs.quickchat.ai/_astro/3-Enable_Quickchat_AI.D1FqUroH.png)

Then click **Save** (top-right).

![Screenshot: Save button in the Theme Editor](https://docs.quickchat.ai/_astro/4-Save_changes.DSUh2_7g.png)

---

## Step 3: Confirm on your storefront

Open your storefront (preview or live site) and look for the Quickchat AI chat bubble in the bottom-right corner of the page.

That’s it!

**Quickchat AI Agent is live on Shopify Store 🎉**

---

## How to manually add a widget script

If you don't want to install our Shopify App because you already have an AI Agent built in Quickchat AI App, you can add a simple script that displays it on your Shopify Store.

:::note[Have you connected your AI to Shopify data already?]

To connect your AI Agent to your Shopify store's data such as product catalog and cart, please do the following:

1. Paste your store link on this page: [quickchat.ai/shopify](https://quickchat.ai/shopify)
2. Claim it, customize, and embed on your site
   :::

### 1. Open the theme code editor

1. Go to your [Shopify Admin Panel](https://admin.shopify.com/).
2. In the left menu, click **Online Store → Themes**.

![Edit theme code](https://docs.quickchat.ai/_astro/step1.D2A2jU3m.webp)

3. In the “Current theme” section, click the **three dots (⋯)** next to the **Customize** button.
4. Select **Edit code** from the dropdown.

![Open theme.liquid](https://docs.quickchat.ai/_astro/step2.DTegQpNx.webp)

### 2. Find `theme.liquid`

1. In the code editor, expand the **layout** folder on the left.
2. Click on `theme.liquid` to open the main layout file of your theme.

![Open theme.liquid](https://docs.quickchat.ai/_astro/step3.f8kBmP3p.webp)

### 3. Paste the script

1. In the [Quickchat App](https://app.quickchat.ai), navigate to **Your Website → Install**.
2. Copy the generated script.
3. Paste it just **above the `</body>` tag** at the bottom of the `theme.liquid` file.

```html
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_AI_ID_HERE");
</script>
```