Install on Shopify

What you’ll accomplish

Choose the installation path for your project, then check the widget on the published storefront.

Finish with

A widget in the Shopify theme visitors actually receive

Native store integration

Native Shopify integration is being prepared. Use this path only when Website platforms → Shopify is enabled for your project. Availability there is the source of truth; this guide does not establish Shopify App Store listing or approval. Manual widget installation remains available.

With native integration, Shopify is one shared Knowledge source containing public products, variants, pages and policies. Shoppers can see product cards and, when enabled, confirm changes to their existing store cart. When native Shopify billing is enabled, approve the project's subscription and purchases in Shopify; review shared usage and limits in Chat4U.

See Shopify project billing.

1. Connect the right projectOpen project Integrations → Website platforms, choose Shopify, then Open Shopify.

   Choose the intended store in Shopify and install Chat4U through Shopify's installation flow. Open the Chat4U app in Shopify and continue to Chat4U. You can also begin from Shopify's Chat4U listing when available.

   Create a Chat4U account or sign in to your existing account. Registration and sign-in return you to the same store setup. Choose the workspace that will manage the store, then search its projects by name or domain. An exact storefront-domain match can suggest a project; you still confirm it. A reconnect may be reserved for its existing project.

   For an existing project, choose the Storefront assistant, make the uninstall-history choice shown, then select Connect store and assistant. This also attaches the shared store source to that assistant. A workspace owner or admin completes the connection. Do not enter a store address in Chat4U.

   No assistant is needed to connect a new project. Continue project setup and approve its subscription in Shopify when prompted. Store knowledge stays inactive until the plan permits it. Each project can have one website platform connection; other projects in the workspace can connect independently.

2. Activate the app embedIn Shopify’s theme editor, enable the Store assistant app embed and save.

   Choose the storefront assistant in Chat4U's Website platforms page. This attaches the shared store source; a deliberate Knowledge removal shows a warning and must be explicitly reconnected when wanted. The completion screen shows store connection, Knowledge availability, assistant access and storefront activation separately. Activate the embed on the theme you publish. No credentials or assistant code need to be entered in the theme block.

3. Open the published storefrontCheck the correct visitor hostname and the published theme.

   A signed storefront request shows that the native loader was reached. It does not, by itself, prove the published host or a complete visitor chat. Send a product question, check its details, and verify that the intended assistant answered. Theme previews alone are insufficient.

If an old manual Chat4U snippet is present, remove it when moving to the native app embed. Chat4U prevents duplicate initialization, so an old snippet can otherwise keep loading the manual configuration. Native installation does not edit or remove your theme code automatically.

Native cart assistance applies to supported Shopify online-store themes. Headless sites and custom storefronts should use manual widget installation; product and cart behavior depends on the supported storefront context. Subscription-only items, bundles and other unsupported purchase options use the native product or cart page.

Manual widget installation

This installs the chat widget. It does not create a native Shopify Knowledge connection or grant shopping capabilities.

1. Edit the active themeOpen the published theme’s `theme.liquid`, not an inactive draft.

   In Shopify’s theme code editor, open the active theme’s theme.liquid layout file.

2. Paste and save the exact snippetPlace the complete generated code immediately before `</body>`.

   Keep a record with the theme change; do not modify or partly copy the snippet.

3. Test the published storefrontUse an allowed visitor hostname, not only a theme preview.

   If another theme becomes active later, repeat the installation in that published theme.

Last updated on