> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-greatstore/get-started/installation/shopify.md).
# Shopify
Add GreatStore to a Shopify online store, on Online Store 2.0 or vintage themes.
This guide covers both kinds of Shopify theme:
* **Online Store 2.0 themes**: Horizon, Dawn, and every theme in the Shopify Theme Store released since 2021.
* **Vintage themes**: older themes such as Debut, Brooklyn, and Narrative.
Adding the script is the same for both. Adding buttons and product-page questions differs, so those steps are split by theme type. If you're not sure which you have, open **Online Store → Themes → Customize**: if you can add sections to your product page, it's an Online Store 2.0 theme.
{% hint style="info" %}
**Before you edit code, duplicate your theme** (**Online Store → Themes → ⋯ → Duplicate**). Shopify can drop code changes when a theme is updated, so the copy is your backup.
{% endhint %}
## Add the script
{% stepper %}
{% step %}
#### Open the code editor
In your Shopify admin, go to **Online Store → Themes**. Next to your live theme, click **⋯ → Edit code**.
{% endstep %}
{% step %}
#### Open `theme.liquid`
In the **Layout** folder, open `theme.liquid`. It holds the `` shared by every page of your store.
{% endstep %}
{% step %}
#### Paste the script above ``
Find the closing `` tag and paste this on the line just above it:
```html
```
Click **Save**.
{% endstep %}
{% endstepper %}
The assistant loads on every storefront page, hidden until something opens it. Next, give shoppers a way to open it.
## Add a way to open the chat
### Online Store 2.0 themes
{% stepper %}
{% step %}
#### Open the theme editor
Go to **Online Store → Themes → Customize**.
{% endstep %}
{% step %}
#### Add a Custom Liquid section or block
For a button on every page, add a **Custom Liquid** section to the **Header** or **Footer** group. For a single page, add it to that page's template instead.
{% endstep %}
{% step %}
#### Paste the button
```html
```
Click **Save**.
{% endstep %}
{% endstepper %}
**On product pages**, a question about the product being viewed gets shoppers talking faster than a generic button. In the theme editor, switch to the **Default product** template, add a **Custom Liquid** block under the buy buttons, and paste:
```liquid
```
The button sends the question on the shopper's behalf, and the script tells the assistant which product they're looking at, so "does this run small?" gets an answer about the right item.
### Vintage themes
Vintage themes have no Custom Liquid sections, so buttons go into the theme code, in the same **Edit code** screen you used for the script.
* **On every page:** open `header.liquid` or `footer.liquid` in the **Sections** folder and paste the `Chat with us` button from above where you want it to appear.
* **On product pages:** open `product-template.liquid` in the **Sections** folder (on some themes it's `product.liquid` in **Templates**), find the add-to-cart form, and paste the product-page snippet from above just after it.
Click **Save** after each edit.
## Testing on preview links and your .myshopify.com address
The chat works on the **Website** address set under **Configure → Basic**. Your `.myshopify.com` address and Shopify's theme preview links (`…shopifypreview.com`) are separate addresses, so the chat stays closed there until you add them under [Embed origins](/maker-greatstore/configure/security.md#embed-origins).
The simplest way to try a draft theme is to preview it on your main domain instead: add `?preview_theme_id=` followed by the theme's ID to your storefront address. That keeps you on your own website address, where the chat already works.
## Checkout
Shopify doesn't run theme code on its checkout and thank-you pages, so the assistant appears on your storefront pages but not during checkout.
## Notify-me alerts
Shopify can't serve files from the root of your site, which back-in-stock and price-drop alerts rely on. Follow the Shopify note in [Browser push notifications](https://docs.maker.co/maker-greatstore/get-started/installation/pages/Mf90Eudy8wqnmesbEaFu#host-gs.js) to host the helper file elsewhere on your domain.
## Troubleshooting
The button does nothing
Open your browser's developer console. If you see **"Chat is unavailable on …"**, the page's address isn't one the chat is allowed on: add it under [Embed origins](/maker-greatstore/configure/security.md#embed-origins). If there's no message at all, check that the script is in `theme.liquid` of the theme that's actually **live**, not a duplicate.
The chat disappeared after a theme update
The update replaced your edited `theme.liquid`. Paste the script above `` again, then re-add any buttons that were in theme code.
A button clicked the moment the page loads does nothing
The script loads in the background and may not be ready yet. To show the button only once the assistant can open, see "Reveal a button once ready" in the [JavaScript API](/maker-greatstore/developer-reference/javascript-api.md#common-patterns).
---
# 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://docs.maker.co/maker-greatstore/get-started/installation/shopify.md?ask=&goal=
```
`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.