> For the complete documentation index, see [llms.txt](https://messagebird.gitbook.io/applications/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://messagebird.gitbook.io/applications/content/chat-widgets/how-to/build-and-install-a-chat-widget-on-a-shopify-store.md).

# Build and install a chat widget on a Shopify store

### What you'll need

* An installed [Shopify](/applications/integrations/integrations/supported-integrations/shopify.md) store integration

### Step one: Create a new chat widget

{% hint style="info" %}
Make sure you are in the **Customer Service** section of your workspace before you start.

You can check this by clicking the workspace name in the top left-hand corner of your screen and selecting **Customer Service.**
{% endhint %}

1. Go to **Preferences** > **Chat widgets**.
2. Click **Create new chat widget**.
3. Name your chat widget.
4. Select the **Default Language** from the drop-down.
5. Click **Ecommerce platforms**.
6. Select your **Shopify store** from the drop-down.
7. Click **Create new chat widget**.

### Step two: Style your chat widget

1. Add styling, branding, display rules, and additional channels to your chat widget.

<details>

<summary>Branding</summary>

In the **Branding** section, you can configure the following:

* Brand color
* Organization logo
* Dark mode organization logo
* Font
* Background type
* Desktop and mobile display

</details>

<details>

<summary>Targeting and behavior</summary>

In the **Targeting and behavior** section, you can configure the following:

* Allowed domains
* Specific page paths
* Country visibility

</details>

<details>

<summary>Content</summary>

In the **Content** section, you can configure the following:

* Logo display
* Header title
* Header description
* Footer display
* Disclosure
* Launch text and placement

</details>

<details>

<summary>Blocks</summary>

In the **Blocks** section, you can configure the following:

* Add additional channel buttons

</details>

2. Click **Publish**.

### Step three: Enable your chat widget on your Shopify store

1. Go to **Manage integrations**.
2. Find your Shopify store.
3. In the **Config** tab, click **Enable sign-up forms**. You'll be sent to Shopify.
4. In the **App embeds** panel, switch the **Bird CRM** toggle to **off** then **on**. There should be a message at the bottom of your screen that says 'Bird CRM: Marketing activated'.
5. The chat widget launcher should now be visible in the bottom right-hand side of your store preview in Shopify.
6. Click **Save** in the top right-hand corner.
7. Open your store. The chat widget should be visible.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://messagebird.gitbook.io/applications/content/chat-widgets/how-to/build-and-install-a-chat-widget-on-a-shopify-store.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.