Width.ai

The Exact Steps to Implement Custom Ai Shopify Chatbots for Customers

A common problem with modern online stores is that potential customers are unable to find the exact products they are looking for, especially when they don’t have a clear idea already of what products solve a specific issue. This leads to constant searching around, reading descriptions, or talking to support about how to solve their specific problem, and what products are needed for that.

However, using ai chatbots trained specifically on helping customers navigate through your store based on varying levels of understanding you can help customers find what they want quicker and easier, reducing churn and click aways.

In this article, find out how AI-powered Shopify chatbots can help discover shopping intent and improve customer satisfaction.

What Shopify Problems Are We Trying to Solve?

The Shopify App Store shows almost 200 chatbot apps that you can add to your store to help your customers with sales and/or customer support. But we found problems with most of the popular chatbot apps, including the ones claiming to be powered by AI:

  • Their product results were often irrelevant to the given customer queries. Especially when the queries aren’t product specific. A great example of this is someone unfamiliar with woodworking and looking to buy specific tools they need. They don’t have enough domain knowledge to know specific parts or products they need to buy. So they spend a ton of time searching around, reading blogs, and gaining knowledge just to buy your product.  
  • In some cases, the products shown weren't even in the category we had in mind.
  • Important criteria that were mentioned earlier in the conversation were often ignored. This is a key issue we saw. In examples where the customer is less familiar with your store, or doesn’t have a great idea of what they’re looking for, the conversations they have with the chatbot will be longer. They have more questions, need more help, and generally have more context for the conversation to understand. These bots struggled with this.

To solve these common problems, we created our own framework for building and deploying AI-powered chatbots on Shopify e-commerce stores. This framework is based on the iterations we've built over the years implementing question-answering chatbots for a variety of medium and small businesses, often with enterprise data that are far more complex than e-commerce products.

Our framework integrates with multiple business systems to help customers as well as store administrators and staff with:

  • Accurate product search: By incrementally specifying all their criteria over multiple rounds of querying the chatbot and previewing the search results, users can iteratively refine the search results to get close to the actual search intents in their minds. Moreover, unlike traditional filtered search, LLMs enable users to specify abstract criteria, like "cardigans for formal occasions."
  • Product recommendations: Our chatbot framework is a two-way street that not only responds to customer instructions but also intelligently guides them by recommending products and offering suggestions, much like a helpful store assistant. For example, if a user types a vague query like "cardigan for gifting," our chatbot framework can guide them toward refining their query through suggestions like, "Are you looking for cardigans for casual wear or office wear?" at every step. After each step, the relevant products are recommended.
  • Order status: The chatbots can answer fine-grained questions from customers and staff about all aspects of single and bulk orders, including real-time processing status, current shipping status, estimated delivery dates, details of backordered items, and more.
  • Inventory queries: The chatbots can provide detailed real-time status of inventory levels in any distribution center and estimate availability of items across centers to administrators and staff. Such real-time information is very helpful for accurately answering questions from your valuable bulk and B2B buyers.

Additionally, our chatbots incorporate the best practices in human-computer interaction and its related psychology where research has shown that users prefer chatbots over traditional menu-based user interfaces but only when their cognitive load is lower and perceived autonomy is higher.

In the sections below, we explain the design and implementation of our framework for AI-powered Shopify chatbots.

Custom Framework for AI-Powered Shopify Chatbots

Here’s our field-tested framework for integrating custom LLM-powered chatbots with Shopify.

Our chatbot platform and chatbots support the following capabilities out of the box:

  • It adapts its behavior to any product category.
  • Using reasoning and dynamic data fetching, find the products that match your customer's intent. The customer's intent is the product they actually want to buy, and they can possibly even visualize it in their mind, but are not able to express it clearly in their search queries or find it in the catalog browser due to unfamiliarity with that shopping category's lingo.
  • Provide the same product querying capabilities in the admin dashboard to help your shop's administrators be more productive. This is particularly helpful for shops with large catalogs.
  • Include real-time dynamic data like product prices, availability, and order status in the chat, either as product criteria or as additional information. Such data is fetched from your Shopify backend or any other external database.

High Level Shopify Chatbot System Architecture

The overall Shopify chatbot integration architecture is shown below.

width.ai shopify chatbot framework
  • The custom chat widget is available as a Javascript and CSS snippet you can drop into your shop's theme.
  • It sends queries to the chatbot backend API hosted on Width.ai's servers and gets back responses.
  • The chatbot backend talks to the Shopify Admin API to get product details and product updates.

The chatbot backend that is responsible for all the AI-powered smart answers is shown below:

Width.ai chatbot framework

Instead of a custom architecture, we could have relied on the OpenAI Assistants API. However, it has some drawbacks that make it unsuitable for this use case as of March 2024:

  • It doesn't support fine-tuned models. We’ll see why this is critical down the road.
  • It doesn't support function calling which is essential for our product search and retrieval pipelines. We can’t leverage external tools or APIs that are needed for things like live inventory, order status etc.
  • It suffers much higher latencies than regular GPT-4 API calls. This is a usability drawback for our customer-facing interactive chatbots.
  • The lack of image support built into the base GPT-4 model means that we can’t take images and text into account. We’ll also see below why this matters.

For these reasons, we use our own custom architecture. In the following sections, we go into more detail on the components shown above.

LLMs With Reasoning and Problem-Solving Capabilities

The conversational AI powering our chatbots must be able to:

  • Reason about a complex product or other query step-by-step, including queries with abstract criteria (e.g.: "cardigans that go well with sky blue shirts") that don't fit the traditional search filters with their deterministic values (like colors and sizes).
  • Find relevant products, orders, or inventory details and fetch their information from Shopify.
  • Combine all that information into a coherent, accurate, comprehensive answer along with product previews and recommendations.
  • Guide the users by suggesting aspects and criteria they might have missed.
  • Understand complex sets of product attributes: One of the use cases we’ve seen struggle with implementing chatbots is industries like industrial and manufacturing where the product data has so many attributes that embedding based search has a hard time understanding the relevancy of each one specific to the query. We solved this by implementing a more complex query generation system that augments our initial natural language query provided by the customer into a more searchable one that works better with products that have a lot of fields.

We equip the GPT-4 LLM to do all this using our advanced prompting framework described below.

Width.ai's Advanced Reasoning-Capable Prompting Framework

Our prompting framework is designed to help the LLM plan on how to answer a complex question by combining reasoning with the ability to decide what external information it needs and requesting the controller to fetch that information on its behalf from external data sources (like Shopify).

Under this framework, the LLM is able to reason that in order to answer a complex question comprehensively and accurately, it must break down the question into distinct actions that require interfacing with external systems.

Our prompting framework powers use cases like product searches with multiple criteria:

  • It starts by executing a high-level product search.
  • It then uses reasoning to examine each product against the user's criteria.
  • It guides the user down a dynamically inferred decision tree of criteria where each step in the tree is determined on the fly based on all the complex criteria given by that particular user.
  • It eliminates any products that don't match some of the criteria.
  • It verifies if the remaining products satisfy each of the other criteria.
  • It zeroes in on the product that best satisfies all the criteria.

Implementing Custom Data Integration Actions With LLMs

We implement custom actions using a custom LLM based tooling framework. The advantage of the framework is that it provides a much more structured and reliable way to specify actions and receive action requests compared to the ad hoc approaches of most LLMs. In this use case these are normally external APIs to inventory data, CRMs, or support APIs. The system will treat these as “actions” they can interact with to improve the data it can use.

OpenAI's API enables you to specify actions and their information in great detail as shown below:

OpenAI function calling API example (Source: OpenAI)

GPT-4 uses that semantic information and metadata — the function description, parameter property descriptions, parameter units, and so on — to make better decisions on when to invoke your actions based on your queries.

GPT-4 also enables the structured invocation of actions and transmission of action responses back to the LLM.

Let's explore how our chatbot, with its advanced prompting framework driving GPT-4, integrates deeply with Shopify.

Importing Your Shopify Store Data Into the Chatbot

The first step in the workflow is to import all the product details into the chatbot backend to facilitate product search. Our framework sets up a completely automated data sync system that automatically pulls the data and also updates itself whenever there is any change in product details done from the Shopify dashboard or from another system.

All this is configured for the first time from your admin dashboard.

Shopify dashboard with chatbot built in

When the import is started, it sets up product semantic search as follows:

  • Fetch products: It fetches product details from Shopify via the Shopify Admin API.
  • Product embeddings: An embedding model produces an embedding for each product. Our framework defaults to a SentenceTransformer model tuned for asymmetric search since we find that it works well for most use cases. However, the framework can also be configured to use OpenAI's Embeddings API or any alternative embedding API.
  • Vector database storage: The embeddings are stored in the configured vector database like Qdrant, Weaviate, Pinecone, or others. We love using open source Vector DBs as they provide another level of customization and filtering to optimize results.

We use Shopify Webhooks to automate our chatbot data syncing. The backend is notified of any product updates in your store automatically by Shopify through the webhook. If there's any update, the following steps run:

  • Shopify immediately notifies our backend that a certain product has been updated.
  • Our backend automatically fetches the new details and recalculates the product embeddings for the changed products.
  • It updates the vector database with the new details.

Let's now explore what happens when one of your store visitors engages with our chatbot.

Initial Product Search on User Query

When the user enters their first reply in the chat, the following steps run:

  • The query reaches the backend.
  • The backend processes the query through our LLM prompting pipeline.
  • Noticing that the query is looking for products, the LLM decides that the appropriate action for the product query must be invoked.

The coolest thing here is that our model is trained to understand “abstract” ideas specific to the store's domain. Things like “stylish”, “gothic”, “artist” etc are understood by the model due to the training. This gives our model much better results in the fashion and apparel industry, and this same fine-tuning process to domain specific queries can be done to any use case.

In the product query function callback, the backend queries the vector database for the nearest semantic match for the query.

When a customer or internal query is received, it's first converted to a query embedding using the same embedding generator that was used in the product import step.

It then searches the vector database for embeddings that are nearest neighbors of the query embedding.

The vector database returns a list of semantic matches but they're often not close to the user's shopping intent.

So we ask the LLM to reason about the matches and eliminate any product that doesn't match any criteria.

Reasoning About Product Matches Using the Buyer's Criteria

Our prompting framework now runs the reasoning step:

  • For each product result, it verifies whether all the criteria match or whether there are any outright non-matches.
  • For abstract criteria, like "something stylish," nothing is typically eliminated unless multiple product reviews are emphatic that an item does not match those criteria ("not stylish" in this example).
  • But for more concrete criteria, like specifying the brand, any non-matches are immediately eliminated.

The result of this reasoning step is a shorter list of better product recommendations that satisfy all the criteria so far, as shown below:

Repeating the Search and Reasoning Steps

After each reply from the user, the product querying and reasoning steps are repeated. Each reply from the user is treated as an additional set of criteria by the reasoning step in order to eliminate any non-matches, as shown in the customer interaction below:

Fetching Order and Inventory Details

Our prompting framework is designed to classify a query into product search queries, order status queries, inventory queries, or possibly some combination of them.

If the framework determines that order status information is required, it requests a custom action to query the Shopify Order API and send back the information to the LLM.

Similarly, if the query requires current inventory details, the prompting framework requests a custom action to fetch the details from the Shopify InventoryItem API and send back the details to the LLM.

Integrating Information from Static Documents

Often, customer product queries as well as support queries can be better answered by including information extracted from static documents like product frequently asked questions (FAQs), manuals, flyers, service guides, application notes, possibly third-party review articles, datasheets, and similar resources.

Our prompting framework's retrieval augmented generation (RAG) capabilities enable it to include such static information as well in its replies to product, support, and employee queries.

The Final Product Result from the Chatbot

By a process of incremental elimination, the our system approach enables the chatbot to zero in on the shopping intent that the customer has in mind.

Both the text and backend product images are taken into account so the model can actually look at the product images relative to the query. This helps with those “abstract” searches we talked about above.

Boosting Sales and Lifetime Value With AI Chatbots

In this article, we showed how our chatbots enable your website visitors to zoom in on their shopping intent using chat as the primary user interface instead of the more traditional catalog or filtered search interfaces.

Finding the exact product that they had in mind helps boost sales, conversion rates, customer retention, and lifetime value.

Contact us if you want such AI capabilities in your e-commerce business.