Add Reesponder to your active theme, then test a conversation on the store itself. Your products stay on the page. The answers are right beside them.
Follow the setup
ShopifyStart in Reesponder and open the installation route for your Shopify website.
In Reesponder, open Websites, enter your store name and public domain, then click Start automatic setup. Use your custom domain if that is where customers shop.
Use the storefront domain linked to the website you are adding. If customers use a custom domain, start with that address. You will need access to the Shopify store that serves it and permission to edit the active theme.
The Installation tab shows the instructions for the detected platform. Continue here to prepare the snippet for your store.
The Shopify route keeps the installation instructions beside the website they belong to. It provides the generated code and a link to your themes. This walkthrough installs the storefront widget through the theme layout.
The generated code identifies the website and its authorised installation. Copy it from your own panel.
Click Generate & copy code. The snippet is prepared for this domain. You can expand Your installation code to select it manually if your browser blocks clipboard access.
Use the full snippet exactly as generated, including its site identifier and installation token. Do not copy the example values visible in a screenshot. If automatic copying is blocked, expand the code and copy it manually.
Work in the active theme and preserve the existing Liquid code. The before-and-after screenshots show exactly where the snippet goes.
Click Open Shopify themes and choose the correct store if Shopify asks. On your active theme, open the three-dot menu and select Edit code.
Check the store name and the active theme before editing. This matters if your account manages several stores or you have unpublished theme copies. Keep a theme backup through your usual Shopify workflow before changing the shared layout.
The shared layout is the file used by your storefront pages. Select layout/theme.liquid before pasting any code.
The search may also show other Liquid files. Choose the result under layout/theme.liquid. Adding code to the correct shared layout makes it available across the storefront pages that use that layout.
Find the closing </body> tag in layout/theme.liquid and paste the snippet on a new line immediately above it. Keep the existing code and click Save.
The screenshot shows the file before the snippet is added. Locate the closing </body> tag near the bottom. Insert a new line above it, keeping the existing scripts, Liquid expressions and closing tags in place.
Keep the existing theme code in place. Save your change, then open the public storefront to check the installation.
The next screenshot shows the complete code in position. Save the file before opening the storefront. Add the snippet once; repeating it in several theme components is unnecessary.
Open the public store to load the widget, confirm detection and send your first test question.
Open the public store and reload it. When the widget loads, Reesponder detects the installation. Send a message to check the conversation as well.
The panel can detect the widget only after it loads on the public store. Open the storefront, reload it, then return here and use Refresh detection status if the status has not updated yet.
Visitors can open the chat while they browse. This example uses a demonstration store.
Check an ordinary storefront page as a visitor, rather than relying only on the theme editor preview. The launcher should be visible without covering an important control on your page.
Try a question about the store or the page you are viewing. The conversation should use the knowledge connected to this website.
Ask about a product or information already available in the connected Knowledge. For private account or order information, configure an authorised Action separately. Installing the storefront widget alone does not grant access to those records.
Take a few minutes to check the details that turn a visible chat into useful customer support.
Check what the assistant knows about your website. Add missing details such as delivery rules, support hours and service information in the panel. Use questions your visitors would actually ask.
Explore the workspaceKnowledge answers questions. Actions can connect the conversation to your systems for tasks such as an order lookup, a basket update or a service request.
See Actions in practiceConfigure human escalation for your website, then review incoming conversations. Give your team a clear route to follow up when a visitor needs help beyond the assistant.
Open your workspacePractical answers for the person connecting your website.
No. This walkthrough uses the generated storefront snippet in your Shopify theme. Follow the steps shown here in the Reesponder panel and your active theme.
The snippet belongs to the theme you edited. Add it to the new active theme when you change themes, and check the public storefront again.
This guide adds the widget to storefront pages using the edited theme layout. It does not add the widget to Shopify checkout.
The snippet installs the chat. Private customer or order information requires a separately configured, authorised integration through Actions. Website Knowledge alone does not provide that access.
Confirm that you edited the active theme for the correct store, pasted the complete snippet above the closing body tag and saved the file. Open the matching public domain, reload it and check installation detection in Reesponder.
Connect the domain, complete the installation and try the experience yourself.
