MivoChat
Start free

Website setup/MivoChat field guide

Add website chat to Shopify

Shopify merchants — You want the support widget on a Shopify storefront and can edit its active theme settings.

By MivoChat product team · Add website chat to Shopify · Published and updated October 12, 2026

Quick answer

Add MivoChat to Shopify manually: open the active theme’s `layout/theme.liquid`, paste the complete snippet from your MivoChat Install page immediately before `</body>`, and save. The Shopify app embed is coming soon. Allow your storefront domains, then test a published storefront page; chat does not load in checkout or thank-you pages.

A useful setup for shopify merchants begins with the information visitors need and the handoff the team can reliably cover.

your-business.com / support

Add website chat to Shopify: setup in practice

Test the add website chat to shopify experience

A rental-equipment store can answer questions about published delivery areas and link to its current policy.

Source and next step for add website chat to shopify

The add website chat to shopify workflow should cite approved information and identify who can confirm an open detail.

Add website chat to Shopify launch owner

Your chosen reply channel

A named teammate owns the add website chat to shopify install and reply path.

Check Slack beta access before routing add website chat to shopify requests there.

The add website chat to shopify workflow uses business information and gives visitors a human next step.

Installation steps

  1. 1

    Open the active theme code

    In Shopify Admin, open Online Store → Themes. On the active theme, open ⋯ → Edit code.

    Shopify dashboard illustration showing Online Store, Themes, and Edit code.
    Illustration — your screen may look slightly different.
  2. 2

    Add the snippet to theme.liquid

    Open `layout/theme.liquid` and paste the complete MivoChat snippet immediately before `</body>`.

    Shopify code editor illustration showing the MivoChat script before the closing body tag in layout/theme.liquid.
    Illustration — your screen may look slightly different.
  3. 3

    Save the theme changes

    Click Save. Manual `theme.liquid` installation is the supported path today; the Shopify app embed is coming soon.

    Shopify code editor illustration showing the saved manual theme change and app embed coming soon.
    Illustration — your screen may look slightly different.
  4. 4

    Allow the storefront domains

    In MivoChat, allow both the store's `*.myshopify.com` domain and its custom domain, if it has one.

    MivoChat settings illustration showing the myshopify.com and custom storefront domains allowed.
    Illustration — your screen may look slightly different.
  5. 5

    Test a published storefront page

    Test on the published storefront, not the theme editor preview. The widget runs on storefront pages, not checkout or thank-you pages; confirm the launcher, visitor message, and team reply.

    Shopify storefront illustration showing the live chat launcher on a published product page.
    Illustration — your screen may look slightly different.

Before you start on Shopify

The Shopify app has not been published. Use the manual `theme.liquid` method; the app embed is coming soon. The widget is for storefront pages, not checkout.

In Shopify, identify the active storefront theme and the live domains customers use before editing theme code.

  • You have collaborator or owner access to the Shopify store and active theme.
  • You know which MivoChat site key belongs to this storefront.
  • The storefront's product, delivery, return, and contact information is accurate.
  • You can save the active theme’s `layout/theme.liquid` and test a published storefront page.

Step-by-step Shopify setup

Make these changes in the active storefront theme, then test a published product or collection page.

  • In Shopify Admin, open Online Store → Themes. On the active theme, open ⋯ → Edit code.
  • Open `layout/theme.liquid` and paste the complete MivoChat snippet immediately before `</body>`.
  • Click Save. Manual `theme.liquid` installation is the supported path today; the Shopify app embed is coming soon.
  • In MivoChat, allow both the store's `*.myshopify.com` domain and its custom domain, if it has one.
  • Test on the published storefront, not the theme editor preview. The widget runs on storefront pages, not checkout or thank-you pages; confirm the launcher, visitor message, and team reply.

Domains and content security policy for Shopify

Allow both `*.myshopify.com` and your custom domain.

Test on your published Shopify site

The Shopify storefront theme editor is framed by `admin.shopify.com`, so the widget is blocked there. The manual snippet loads on storefront pages, not checkout or thank-you pages.

Troubleshooting Shopify installation

If the Shopify widget is missing, confirm the snippet is in the active theme's `layout/theme.liquid` and the storefront domains are allowed.

Frequently asked questions

Does MivoChat install automatically on every platform?

For Shopify, use the installation path described above and check the platform’s current settings if labels change.

Can MivoChat confirm bookings or availability?

For shopify merchants, MivoChat can show an external booking link or collect a request, but it does not sync calendars or confirm availability; staff must review the request.

How do I know the installation worked?

On Shopify, test the published site from a private browser window. Check the launcher, send a visitor message, confirm it reaches the chosen team inbox, and reply to verify both directions.

Keep exploring