Shopify Integration

Add the Maison concierge chat to your Shopify store by editing a single theme file — no coding experience needed. Shopify official site ↗

Before you start

Owner or staff account access with Theme permissions in your Shopify admin
Your Client UUID — find it in the Business Console under Settings

Steps

Open Online Store > Themes in your Shopify admin
Log into your Shopify admin at yourstore.myshopify.com/admin. In the left sidebar, click Online Store, then click Themes.
Click Actions > Edit code on your current theme
Find your current active theme (it will be labelled Current theme). Click the Actions dropdown button next to it and choose Edit code. This opens Shopify's built-in code editor.
Open theme.liquid
In the left panel of the code editor, find the Layout folder and click theme.liquid. This is the master template file used on every page of your store.
4
Paste the script tag before </head>
Use the editor's search (Ctrl+F or Cmd+F) to find </head>. Click just before it and paste this line on a new line above it.
html
```
<script src="https://agent.maison-labs.com/agent-inject.bundle.js"></script>
```

Paste the init script before </body>

Still in the same file, search for </body>. Paste the following snippet on a new line just above it. Replace YOUR_CLIENT_UUID with the UUID from your Business Console.

html

<script>
  function getQueryParam(param) {
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    return urlParams.get(param);
  }
  var sessionId = getQueryParam('mcbsid');
  var mcbs = window.initMcbs({
    clientId: 'YOUR_CLIENT_UUID',
    sessionId: sessionId,
    // locale: 'en-US',                     // Override browser locale
    // iconPosition: { top: 0, bottom: 20, left: 0, right: 20 },  // Chat icon position (px)
    // onSessionUpdate: function(id) { console.log('Session:', id); },
    // onLocaleUpdate: function(locale) { console.log('Locale:', locale); },
  });
  mcbs.showIcon();
</script>

Click Save
Click the Save button at the top-right of the code editor. Your changes are live immediately — no separate publish step is needed.
Visit your store and verify
Open your live storefront in a new browser tab. The Maison chat icon should appear in the bottom-right corner. To confirm, open your browser DevTools (press F12), switch to the Elements tab, and look for #maison-chat-icon in the DOM.

Content Security Policy. If the chat icon does not appear after saving, your store's Content Security Policy (CSP) may be blocking external scripts. Ask your developer or theme provider to add agent.maison-labs.com to the script-src allowlist in your store's CSP header.

For the full list of configuration options, control methods, and callbacks, see the Widget SDK Reference.

Common mistakes

Editing a theme that is not active. Shopify lets you have multiple themes. Make sure you are editing your current active theme, not a theme that is unpublished or in preview.

Forgetting to replace YOUR_CLIENT_UUID. The widget will not load without a valid Client UUID. Copy it exactly from your Business Console — it looks like xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.

Using string values for iconPosition. Write bottom: 20, not bottom: '20px'. Values are plain numbers representing pixels — do not include units.

Not sure if it's set up correctly? Use the Site Diagnostic tool.