Automated Order Lookup Chatbot

Build a chat widget that lives on the storefront and retrieves order history and product details from Shopify in real time. When a customer asks "where's my order," the bot pulls that data, generates an answer, and logs the conversation. Route unresolved or complex inquiries to the support team via tags and Klaviyo events. Keep agent handoff clean and contextual.

A DTC merchant handling high message volume needed a way to answer common customer-service questions—particularly order status and tracking—without manual agent intervention. The solution retrieves live order data from Shopify and product information to answer inquiries directly, with graceful escalation for complex cases that need human review.

Four pieces

Customer Service

Order Data Sync

Pulls customer orders and shipping status from Shopify on a schedule so the bot always has current tracking data to reference.

Backend service + Shopify Admin

Customer Service

Chatbot Interface & Retrieval

A chat widget on the storefront that listens for customer messages, retrieves matching orders and products, and generates answers without routing to an agent.

Custom Shopify app + React frontend

theme/snippets/support-chatbot.liquid liquid

{% comment %}
  Minimal chatbot embed snippet for storefront.
  Paste into theme/snippets/support-chatbot.liquid and render it in your theme.
{% endcomment %}

<div id="support-chatbot-root" data-shop="{{ shop.permanent_domain }}" data-customer-id="{{ customer.id | default: 'anon' }}"></div>

<style>
  #support-chatbot-root {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-height: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
  }
</style>

<script src="https://your-app-domain.com/chatbot.js" defer></script>

Replace your-app-domain.com with your Heroku or custom domain. The app reads customer ID from Liquid so it auto-loads their order history when they click the widget.

Customer Service

Klaviyo Event Trigger

When a chat ends, send the summary and customer details to Klaviyo so support context is visible in one place.

Shopify Flow + Klaviyo API

Shopify Flow editor: When → Then flow

Trigger: Chatbot conversation marked as resolved (webhook from your app)

Condition: If escalation_flag = true, skip; otherwise proceed

Then:
  1. Call Shopify Flow HTTP action to POST to Klaviyo
  2. Send payload:
     - customer email
     - conversation summary
     - products mentioned (SKUs)
     - order numbers referenced
     - timestamp
  3. Klaviyo receives event 'support_chat_resolved'
  4. Your team sees message in Klaviyo customer profile

Requires Klaviyo API key in Flow custom action; set up the Klaviyo event in their segment builder so your team gets alerts for unresolved chats.

Customer Service

Escalation & Agent Handoff

When the bot cannot answer a question, tag the conversation and route it to your support team in Shopify or email for review.

Custom Shopify app + Gorgias or email

Admin GraphQL explorer graphql

# Admin GraphQL
mutation TagCustomerForSupport($customerId: ID!, $tags: [String!]!) {
  customerUpdate(input: { id: $customerId, tags: $tags }) {
    customer {
      id
      email
      tags
    }
    userErrors {
      field
      message
    }
  }
}

query FetchEscalatedCustomers($query: String!) {
  customers(first: 50, query: $query) {
    edges {
      node {
        id
        email
        firstName
        lastName
        orders(first: 5) {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    }
  }
}

Changed variable from $tag to $query and used it in the customers query filter. Allows dynamic tag queries like query: "tag:support-escalation".

Got a similar problem?

Sketch your build in 30 seconds — voice, type, or attach a screenshot.

Sketch the build →