> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to Install Crisp Live Chat on Shopify Stores and Connect Hugo AI Agent *This article explains how to install Crisp Live Chat and knowledge base on Shopify, synchronize ecommerce data, and connect Shopify tools to Hugo AI Agent and Copilot.* The [Crisp Shopify integration](https://crisp.chat/en/integrations/shopify/) connects your online store to [Crisp](https://crisp.chat/fr/) so your team can talk with shoppers, access customer and order context, and automate ecommerce support from one shared Inbox. Once the Shopify app is installed, you can also connect it to Hugo so your AI Agent and support operators can retrieve or update selected Shopify information during customer conversations. | You can install Crisp from the [Shopify App Store](https://apps.shopify.com/app10199) or start the installation directly from your Crisp workspace. __In this guide, you will learn how to:__ * [Watch the Shopify installation walkthrough](#1-watch-the-shopify-installation-walkthrough) → follow the complete setup in video format * [Understand what the Shopify integration adds](#2-what-the-shopify-integration-adds) → see how Crisp connects support and ecommerce data * [Install Crisp on Shopify](#3-install-crisp-on-shopify) → connect your store to your Crisp workspace * [Display the Crisp chatbox on your storefront](#4-display-the-crisp-chatbox-on-your-storefront) → activate the Crisp app block in your Shopify theme * [Configure Shopify contact and order synchronization](#5-configure-shopify-contact-and-order-synchronization) → control which ecommerce events are synchronized * [Use Shopify data in the Crisp Inbox](#6-use-shopify-data-in-the-crisp-inbox) → give operators useful customer and order context * [Automate support with Shopify data](#7-automate-support-with-shopify-data) → build workflows and personalized support processes * [Connect Shopify to Hugo AI Agent and Copilot](#8-connect-shopify-to-hugo-ai-agent-and-copilot) → let Hugo use selected Shopify tools * [Troubleshoot the Shopify integration](#9-troubleshooting) → fix common installation, synchronization, and AI issues * [Review frequently asked questions](#10-frequently-asked-questions) → find answers to common Shopify setup questions --- # ${color}[#0080dd](Watch the Shopify installation walkthrough) This video shows how to install Crisp on a Shopify store, display the chatbox, and connect your ecommerce data to Crisp. ${youtube}[How to install Crisp Live Chat on Shopify](yTfTWe6qGDs) --- # ${color}[#0080dd](What the Shopify integration adds) The Crisp Shopify app brings your support conversations and ecommerce context together. Instead of switching between Crisp and Shopify whenever a customer asks about an account, cart, or order, your team can access supported store information directly from Crisp. | Feature | What it adds | | ---- | | **Crisp Live Chat** | Display the Crisp Chatbox on your Shopify storefront | | **Customer synchronization** | Create or update Crisp contacts using Shopify customer information | | **Order activity** | Add supported Shopify order events to customer profiles | | **Inbox context** | Give operators access to customer and ecommerce information during conversations | | **Workflows and automation** | Use synchronized data to personalize and automate customer support | | **Hugo AI Agent tools** | Let Hugo retrieve or update selected Shopify information | | **Hugo Copilot tools** | Help operators investigate Shopify requests from the Crisp Inbox | You can learn more about the overall integration on the [Crisp Shopify integration page](https://crisp.chat/en/integrations/shopify/). --- # ${color}[#0080dd](Install Crisp on Shopify) You can start the installation from Crisp or directly from the [Crisp app listing on the Shopify App Store](https://apps.shopify.com/app10199). The steps below start from your Crisp workspace. __To install Crisp on Shopify:__ 1. Open [**Crisp**](https://app.crisp.chat) or create an account from the [Crisp signup page](https://app.crisp.chat/initiate/signup/). 2. Go to **Settings → Workspace Settings → Setup & Integrations**. 3. Select **Shopify**. 4. Click **Get the plugin**. 5. On the Crisp Shopify plugin page, click **Install**. 6. Continue to the Shopify App Store and confirm the installation. You can also start from **Plugins** in the Crisp sidebar and search for **Shopify**. ![Searching for Shopify in Crisp plugins](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/install-crisp-shopify-plugin-i_85h8ls.png =1000x584) ![Installing Crisp from Shopify](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-121919_16j6sil.png =1000xauto) 7. Log in to your Shopify account if needed. 8. If you manage several stores, select the store you want to connect. ![Choosing the Shopify store to connect](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-103905_bwhknp.png =1000xauto) 9. Review the requested permissions and install the app from your Shopify admin. ![Confirming the Crisp app installation in Shopify](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-103921_1h287j6.png =1000xauto) 10. Choose whether the Crisp Chatbox should be displayed on your storefront. ![Choosing whether to display the Crisp widget on Shopify](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-103933_zc2cel.png =1000xauto) 11. Return to Crisp and confirm that the Shopify plugin is connected. ||| Shopify app installation is easier from a desktop browser. The person installing the app must also have the required Shopify permissions. You can learn more from Shopify’s guide on [installing and setting up apps](https://help.shopify.com/en/manual/apps/installing-apps). --- # ${color}[#0080dd](Display the Crisp chatbox on your storefront) The Crisp Shopify app uses a Shopify app block to display the chatbox on your online store. After installing the app, open **Plugins → Shopify** in Crisp and find the **Crisp App Block** section. Click **View Crisp App Block** to open the Shopify theme editor. __From the Shopify theme editor:__ 1. Open the **App embeds** section. 2. Find the Crisp app. 3. Enable the Crisp app embed. 4. Click **Save**. 5. Open your public storefront and confirm that the chatbox appears. Shopify app embeds are designed for elements that appear across the storefront, such as a chat bubble. You can learn more from Shopify’s guide on [extending themes with apps](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/apps). || If you publish a different Shopify theme later, you may need to enable the Crisp app embed again for the new theme. #### ${color}[#445055](Temporarily hide or reactivate the chatbox) You can temporarily disable the chatbox from your Shopify theme without disconnecting the complete integration. Open the Crisp Shopify plugin settings and click **View Crisp App Block**, then disable or enable the app embed from Shopify. #### ${color}[#445055](Refresh the Shopify authorization) If Shopify permissions change or Crisp asks for new permissions, click **Re-authenticate App** from the Shopify plugin settings. This refreshes the connection without requiring you to rebuild your complete setup. ||| The Crisp widget can only be displayed on Shopify checkout pages if your store supports the required checkout customization through [Shopify Plus](https://help.shopify.com/en/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan). On other plans, the widget can still appear across supported storefront pages. --- # ${color}[#0080dd](Configure Shopify contact and order synchronization) The Shopify plugin includes several preferences that control how contacts and order activity are synchronized with Crisp. Open **Plugins → Shopify** and review the **Shopify Preferences** section. ![](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/configure-shopify-contact-and-_1gvigcl.png =1000xauto) #### ${color}[#445055](Automatically Sync Shopify Contacts) When this setting is enabled, Shopify contacts that are created or updated are automatically synchronized with Crisp. This helps keep customer profiles up to date and reduces the need to recreate contact information manually. #### ${color}[#445055](Automatically Create Contact on Order Events) When an order is created or updated in Shopify, Crisp can automatically create a contact if no matching Crisp profile exists. This is useful when the first known interaction with a customer comes from an order rather than a support conversation. #### ${color}[#445055](Sync Shopify Order events to Crisp Contact) When a matching contact already exists in Crisp, supported Shopify order events can be attached to that contact. This gives your team more context about the customer’s ecommerce activity while handling a support request. | Enable only the synchronization options that match your support workflow and data management preferences. --- # ${color}[#0080dd](Use Shopify data in the Crisp Inbox) Once the integration is connected, Shopify context can become available from customer profiles and conversations in the Crisp Inbox. Depending on the available data and your configuration, operators can access information such as: * Customer identity and contact details * Previous Shopify orders * Order status * Shipping and tracking information * Cart or ecommerce context * Shopify events connected to the customer profile #### ${color}[#445055](Synchronized Shopify details) ![Shopify data synchronized in Crisp](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-103956_1pm84ng.png =1000xauto) #### ${color}[#445055](Shopify context inside the Crisp Inbox) ![Shopify context inside the Crisp inbox](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/view-shopify-customer-order-da_1u5qwn3.png =1000x586) This helps agents understand the customer’s situation without repeatedly asking for information that is already available in Shopify. For broader advice on organizing ecommerce customer support, read [Getting started for the ecommerce industry](https://help.crisp.chat/en/article/getting-started-for-the-e-commerce-industry-tr8p0p/). --- # ${color}[#0080dd](Automate support with Shopify data) Shopify customer and order information can also support more personalized workflows and routing inside Crisp. __Common use cases include:__ * **Customer segmentation** → organize customers using synchronized ecommerce information * **Order-related workflows** → trigger support processes around order activity * **Personalized replies** → use available customer context when preparing a response * **Conversation routing** → direct billing, shipping, or VIP requests to the right team * **Multichannel support** → keep Shopify context available when customers contact you from different channels * **Proactive support** → respond to ecommerce activity with relevant messages or campaigns ![Shopify automation data in Crisp](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-104032_1b97ude.png =600x962) Useful guides: * [**Understanding and mastering Crisp Workflows**](https://help.crisp.chat/en/article/getting-started-with-workflows-hrmysb/) * [**Getting started with segments**](https://help.crisp.chat/en/article/getting-started-with-segments-88hhzw/) * [**Getting started with custom data**](https://help.crisp.chat/en/article/getting-started-with-custom-datas-43jgi3/) * [**How to route and assign conversations to operators in Crisp**](https://help.crisp.chat/en/article/how-to-route-and-assign-conversations-to-operators-in-crisp-qjl2d2/) --- # ${color}[#0080dd](Connect Shopify to Hugo AI Agent and Copilot) After connecting the Shopify plugin, you can also make selected Shopify tools available to Hugo AI Agent and [Hugo Copilot](https://help.crisp.chat/en/article/how-to-use-hugo-copilot-as-an-ai-assistant-for-customer-support-teams-own9cp/). This allows [Hugo](https://hugo.ai/en/) to use current Shopify information during customer conversations instead of relying only on static training resources. Go to **AI Agent → Automate → Integrations & MCP → Shopify**. ![](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/enable-shopify-integration-hug_ztbpih.png =1000x590) #### ${color}[#445055](Enable the Shopify integration) Turn on **Enable the Shopify integration**. When enabled, Hugo can use the integration when a customer request matches one of the available Shopify tool descriptions. #### ${color}[#445055](Choose where Shopify tools are available) You can decide whether Shopify tools should be available to: * **Customers** → Hugo AI Agent can use them while handling customer conversations * **Copilot** → support operators can use them while working with Hugo Copilot You can enable one option or both, depending on whether you want customer-facing automation, operator assistance, or both. #### ${color}[#445055](Select the Shopify tools Hugo can use) The Shopify integration includes tools that can retrieve or update specific store information. You can enable each tool individually. | Shopify tool | What it allows Hugo to do | | ---- | | **Get Order Details** | Retrieve information about a specific order, including its status, shipping details, and tracking information | | **Get Customer Address** | Retrieve the current default address associated with a Shopify customer | | **Update Order Shipping Address** | Update selected shipping address fields while the order is still eligible for modification | Only enable tools that are useful for your customer support process. For example: * Enable **Get Order Details** when customers frequently ask about shipping or order status * Enable **Get Customer Address** when operators need to confirm the address attached to a Shopify account * Enable **Update Order Shipping Address** when you want Hugo to help customers correct an address before fulfilment | Tools that modify Shopify data should be enabled carefully. Review the tool description, parameters, and identity verification requirements before making them available to customers. #### ${color}[#445055](Configure tool parameters) Some Shopify tools need parameters such as an order ID or customer email address. Open the **Parameters** section of a tool to configure how Hugo should obtain each value. ![](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/configure-shopify-order-detail_17ymq2q.png =800x457) When a parameter is set to **Let Hugo decide**, Hugo can obtain the required information from: * The customer’s current message * The conversation history * Information already available in Crisp * A direct question to the customer * The result returned by another connected tool For example, if a customer asks about order `#1033`, Hugo can use that order number when calling **Get Order Details**. #### ${color}[#445055](Require user identity verification) Shopify tools may access personal information or modify an order. Enable **Require user identity verification** when Hugo should confirm that the person requesting the action is authorized to access the Shopify account or order. Identity verification can be configured for the integration and for supported individual tools. This is especially important for actions such as: * Retrieving private customer information * Viewing detailed order data * Accessing a saved customer address * Updating an order shipping address #### ${color}[#445055](Review tools before enabling them) Before using Shopify tools with customers: 1. Enable only the tools your support workflow needs. 2. Review their descriptions and parameters. 3. Configure identity verification for sensitive actions. 4. Test the integration with realistic customer questions. 5. Review how Hugo uses the tools from [AI Observability](https://help.crisp.chat/en/article/how-to-monitor-and-debug-hugo-ai-agent-conversations-with-observability-1q79tp1/). For more details about AI integrations, read [**How to use Hugo Integrations**](https://help.crisp.chat/en/article/how-to-use-hugo-integrations-6z9yhh/). --- # ${color}[#0080dd](Troubleshooting) If the chatbox does not appear, Shopify data is missing, or Hugo cannot use a tool, review the relevant part of your setup. #### ${color}[#445055](The chatbox does not appear) Check that: * The Crisp app embed is enabled in the Shopify theme editor * Your theme changes were saved * You are testing the currently published Shopify theme * The widget display option is enabled in Crisp * The page supports Shopify app embeds * You enabled the app embed again after changing themes #### ${color}[#445055](Shopify contacts or order events are missing) Check that: * The relevant synchronization preference is enabled * The correct Shopify store is connected * The app still has the required permissions * The customer information matches an existing Crisp contact * The app has been re-authenticated after permission changes #### ${color}[#445055](Hugo cannot use a Shopify tool) Check that: * The Shopify integration is enabled in **AI Agent → Automate → Integrations & MCP** * The required tool is selected * The tool is available to **Customers**, **Copilot**, or both * Hugo can obtain every required parameter * Identity verification has been completed when required * The requested action is still allowed, such as updating an order before fulfilment | Read [How to troubleshoot Shopify integration issues](https://help.crisp.chat/en/article/how-to-troubleshoot-shopify-integration-issues-gluguu/) for additional checks and fixes. --- # ${color}[#0080dd](Frequently Asked Questions) *Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.* ###### ${color}[#F08820](Can I hide the Crisp chatbox without uninstalling the Shopify app?) Yes. Open the Shopify plugin settings in Crisp, click **View Crisp App Block**, and disable the Crisp app embed from your Shopify theme. This keeps the Shopify connection in place while hiding the chatbox from the storefront. ###### ${color}[#F08820](Can Crisp appear on Shopify checkout pages?) The Crisp widget can only appear on Shopify checkout pages when the store supports the required checkout customization through Shopify Plus. Without Shopify Plus, the widget can still appear on supported storefront pages such as product, collection, and content pages. ###### ${color}[#F08820](Can Crisp create a contact when a Shopify order is created?) Yes. Enable **Automatically Create Contact on Order Events** from the Shopify plugin preferences. When an order is created or updated and no matching Crisp contact exists, Crisp can create one automatically. ###### ${color}[#F08820](Can Hugo AI Agent retrieve Shopify order details?) Yes. Enable the Shopify integration for **Customers**, then activate the **Get Order Details** tool. Hugo can use the tool when it has the required order information and the customer request matches the tool description. ###### ${color}[#F08820](Can Hugo update a Shopify shipping address?) Hugo can use the **Update Order Shipping Address** tool when it is enabled and the order is still eligible for modification. Only the address fields provided to the tool are updated. Existing values remain unchanged for omitted fields. ###### ${color}[#F08820](Why should I enable identity verification?) Identity verification helps protect private customer and order information. It is recommended before allowing Hugo to retrieve sensitive data or modify Shopify information on behalf of a customer.