> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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 on Shopify

*Add the Crisp live chat widget to your Shopify store so shoppers can ask questions while browsing and your team can answer from the Inbox.*

This guide connects the Shopify app and enables the widget on your storefront. Once installation is working, the linked guides help you bring customer and order context into support or let Hugo handle routine lookups.

---

# ${color}[#1575dd](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. You can also open **🧩 Plugins** in the Crisp sidebar and search for **Shopify**.

Use a desktop browser for the steps below. The person installing the app needs permission to install Shopify apps and edit the online store theme. You can learn more from Shopify’s guide on [installing and setting up apps](https://help.shopify.com/en/manual/apps/installing-apps).

Before installing, check whether your theme, tag manager or another app already adds Crisp. Remove the duplicate installation when switching to the app embed.

If you do not have a Crisp account yet, [create one first](https://app.crisp.chat/initiate/signup/).

__Connect the store:__
1. In Crisp, open **Settings → Workspace Settings → Setup & Integrations** and select **Shopify**.
2. Follow the **Get the plugin** instructions to open Crisp’s Shopify App Store listing and install the app.
3. Sign in to Shopify if needed and select the store you want to connect.
4. Review the requested permissions and confirm installation from your Shopify admin.
5. Complete the Crisp connection flow for the workspace that should receive this store’s conversations.
6. Return to **Plugins → Shopify** in that workspace and confirm the connected store. If setup opens the Shopify theme editor, continue with the app embed steps below.

![The Crisp Shopify plugin showing the connected store and the View Crisp App Block control](https://screenshots.invalid/the-crisp-shopify-plugin-showing-the-connected-store-and-the-view-crisp-app-block-control.png =800xauto)

---

# ${color}[#1575dd](Display the Crisp widget on your storefront)

The Crisp Shopify app uses a Shopify **app embed** to display the widget on your online store.

After installing the app, open **Plugins → Shopify** in Crisp and find the **Crisp App Block** section.

Click **Enable Crisp App Block** or **View Crisp App Block** to open the Shopify theme editor. The label depends on whether Crisp detects that the embed is enabled.

__From the Shopify theme editor:__
1. Check that you are editing the theme you intend to publish, then open **App embeds**.
2. Find **Crisp Chatbox**.
3. Enable the Crisp app embed.
4. Click **Save**.
5. Open your public storefront in a private browser window and confirm that the widget appears. A saved change in an unpublished theme is only visible in that theme’s preview.

![Shopify theme editor App embeds section with the Crisp app enabled and the Save button visible for the published theme](https://screenshots.invalid/shopify-theme-editor-app-embeds-section-with-the-crisp-app-enabled-and-the-save-button-visible-for-the-published-theme.png =1000xauto)

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, enable and save the Crisp app embed for that theme too.

Send a message from the published storefront and reply from Crisp to check both directions. Repeat on mobile and in each market where you expect chat to appear; app embeds can have market-specific settings. Customer and order synchronization should be tested separately, following the guide linked below.

#### ${color}[#405e80](Temporarily hide or reactivate the widget)

You can temporarily disable the widget from your Shopify theme without disconnecting the Shopify integration.

Open the Crisp Shopify plugin settings and click **View Crisp App Block**, then disable or enable the app embed from Shopify and click **Save**. This controls the storefront widget; it does not stop customer or order synchronization.

#### ${color}[#405e80](Refresh the Shopify authorization)

If Shopify permissions change or Crisp asks for new permissions, click **Re-authenticate App** from the Shopify plugin settings.

Authorize the same store, return to Crisp and test the affected feature again. Re-authentication updates the store’s authorization; it does not replace the theme’s app embed settings.

#### ${color}[#405e80](Add chat to checkout or the Thank you page)

The storefront app embed does not add chat to checkout. Crisp provides a separate chat extension for checkout and the Thank you page. Checkout customization requires **Shopify Plus**; Thank you page extensions are available on **Basic or higher**.

In Shopify, open **Settings → Checkout**, edit the relevant configuration and add the available Crisp chat extension to the supported page. Save, then test a checkout or test order on that page. Follow [Shopify’s checkout app instructions](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-apps) for the current editor steps.

#### ${color}[#405e80](Connect more than one store)

The native Shopify integration connects one Shopify store to a Crisp workspace. To keep each store’s native customer and order integration, use [a separate workspace](https://help.crisp.chat/en/article/how-to-manage-multiple-workspaces-under-the-same-account-tkdu37/) for each store.

Installing the same widget on several websites is a different setup: it shares a workspace but does not connect several Shopify backends to the native integration.

__Choose the next step for your store:__
* To give agents order and customer context while they reply, [configure Shopify synchronization](https://help.crisp.chat/en/article/sync-shopify-customers-and-orders-with-crisp-draft0002/).
* To let Hugo retrieve current order details for customers, [connect the Shopify tools](https://help.crisp.chat/en/article/how-to-use-hugo-integrations-6z9yhh/).
* If installation or the connection fails, use [Shopify troubleshooting](https://help.crisp.chat/en/article/how-to-troubleshoot-shopify-integration-issues-gluguu/).