# Adding the MessageBird Omnichannel Widget to a Shopify store

In this guide, you’ll learn how to add the [Omnichannel Widget](https://inbox.messagebird.com/manager/omnichannel-widget) to a [Shopify](https://www.shopify.com/) store.&#x20;

**Prerequisites**

* Be the **manager** of your MessageBird [Inbox](https://inbox.messagebird.com/) account
* Be an **admin** for your Shopify store

**Enabling the Omnichannel Widget**&#x20;

1\. Log in at [dashboard.messagebird.com](https://dashboard.messagebird.com/en/user/index) and go to **Inbox** or go directly to [inbox.messagebird.com](https://inbox.messagebird.com/).

2\. Go to [Inbox settings](https://inbox.messagebird.com/manager/overview).

3\. Click on **Channels** and open **Omnichannel Widget**.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-b6c6ec71b49da14c7b246aa43e0043471162a570%2Fimage4.png?alt=media" alt=""><figcaption></figcaption></figure>

4\. [Customize your widget](https://docs.bird.com/connectivity-platform/customizing-the-omnichannel-widget) settings to make it match the style of your Shopify store (logo, colours, agent name).

5\. Under **Location** make sure to whitelist your store’s website address (e.g. <https://myshopname.myshopify.com/>) to signal Inbox — it should accept chat requests coming from your Shopify store.&#x20;

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-e4f6f50631bedb7305f7de6e578f38a7475e10dc%2Fimage9.png?alt=media" alt=""><figcaption></figcaption></figure>

6\. Done? Awesome! Hit **Publish changes** and **activate the widget**. You can always come back and change the [Inbox settings](https://inbox.messagebird.com/manager/overview).

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-28c0b3b3fc75769122e0d5f25e28ef68f99a3fde%2Fimage5.png?alt=media" alt=""><figcaption></figcaption></figure>

7\. Now that we finished the configuration on the Inbox side, let’s copy the code snippet by clicking **Get code snippet**.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-84dd2f5d5f6355ec8739d695a9defc9b02094897%2Fimage6.png?alt=media" alt=""><figcaption></figcaption></figure>

&#x20;

**Attaching widget to your Shopify store**

Time to add the code by injecting it to all the pages via the master theme’s HTML body.

1\. Go to your Shopify store admin panel, **myshopname.myshopify.com/admin**

2\. Select **Online store** from the sidebar, and **Themes** from the submenu.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-fd34f660e753629d6a14e159ce032850d8c842d9%2Fimage1.png?alt=media" alt=""><figcaption></figcaption></figure>

3\. Choose **Customize** the current theme (or the one you want to add the widget to). This will open the theme editor.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-f0f4e629da5fddd1a3ac044f21ef31754fc16ad7%2Fimage2.png?alt=media" alt=""><figcaption></figcaption></figure>

4\. In the left-bottom corner, click **Theme actions** and select **Edit code** from the pop-up. This will open a new page with the code files of your store.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-fb601998f564fd819573cd0b1f3c1be0c2bde984%2Fimage10.png?alt=media" alt=""><figcaption></figcaption></figure>

5\. Select the file called **theme.liquid**. If you do not have this, find the main file of your store — the one containing a **\<body>** tag.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-f9406e37da65d55b5b42bb3628bdfa959baebffa%2Fimage3.png?alt=media" alt=""><figcaption></figcaption></figure>

6\. Scroll to the bottom of the page, and paste the widget’s code snippet before the closing **\</body>** tag — it should insert a single line starting with **\<script>** and ending with **\</script>**.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-cedd7b80034aeafc2a05c44292f833676b77ad0c%2Fimage8.png?alt=media" alt=""><figcaption></figcaption></figure>

7\. And that’s it! Save the changes, publish the new site version and the Omnichannel Chat Widget will be visible on your Shopify store.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-9a05c0647a40427b5ffa56feafee75f5651d084e%2Fimage7.png?alt=media" alt=""><figcaption></figcaption></figure>

\
\
\
\ <br>
