> 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/magento.md).

# Magento

Add GreatStore to a Magento Open Source or Adobe Commerce store, on 2.4.7 and later or earlier 2.4 releases.

This guide is for **Magento Open Source and Adobe Commerce 2.4**, with the default Luma theme or a theme based on it. Installing the chat is the same on every 2.4 release; what differs is checkout, so that section is split by version. To check yours, look at the bottom-right of any admin page.

## Add the script

{% stepper %}
{% step %}

#### Open design configuration

In your Magento admin, go to **Content → Design → Configuration**. Click **Edit** on the row for your store view, or on **Global** to cover every store view at once.
{% endstep %}

{% step %}

#### Paste the script into HTML Head

Expand **Other Settings → HTML Head**, and paste this at the end of **Scripts and Style Sheets**:

```html
<script src="https://{your-address}.greatstore.ai/embed.js" async></script>
```

Click **Save Configuration**.
{% endstep %}

{% step %}

#### Flush the cache

Go to **System → Cache Management** and click **Flush Magento Cache**. If your store sits behind Varnish or Fastly, purge that too, or pages keep showing their old copy without the script.
{% endstep %}
{% endstepper %}

## Add a way to open the chat

For a button on every page, use the same configuration screen: expand **Other Settings → Footer** and paste this into **Miscellaneous HTML**:

```html
<button type="button" class="action primary" onclick="GreatStore.open()">Chat with us</button>
```

Save, then flush the cache again. To place the button inside a CMS page or block instead, add an **HTML Code** element in Page Builder and paste the same button.

## Ask about a product

A button that asks about the product being viewed needs a small theme change, so it's one for your developer. In your theme, create `Magento_Catalog/layout/catalog_product_view.xml`:

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.extrahint">
            <block class="Magento\Catalog\Block\Product\View"
                   name="greatstore.ask"
                   template="Magento_Catalog::product/view/greatstore-ask.phtml"/>
        </referenceContainer>
    </body>
</page>
```

And the template it points to, `Magento_Catalog/templates/product/view/greatstore-ask.phtml`:

```php
<?php
/** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
$message = 'Tell me more about ' . $product->getName();
$context = sprintf(
    'Viewing: %s, %s, %s.',
    $product->getName(),
    strip_tags($block->getProductPrice($product)),
    $product->isSalable() ? 'in stock' : 'out of stock'
);
?>
<button type="button" class="action secondary"
        onclick="<?= $block->escapeHtmlAttr('GreatStore.sendMessage(' . json_encode($message) . ')') ?>">
    <?= $block->escapeHtml(__('Ask about this product')) ?>
</button>
<script>
    window.addEventListener('load', function () {
        GreatStore.updateModelContext(<?= json_encode($context) ?>);
    });
</script>
```

Deploy the theme change and flush the cache. The button sits under **Add to Cart**, and the assistant knows which product the shopper is looking at, so "is this waterproof?" gets an answer about the right item.

{% hint style="info" %}
Hyvä and other non-Luma themes lay out the product page differently. The same button and script work there; your developer places them where that theme renders add-to-cart.
{% endhint %}

## Checkout

### 2.4.7 and later

Magento protects checkout and payment pages with a strict security policy by default, and it blocks scripts from outside your store there. The chat therefore appears everywhere **except** checkout. For most stores that's the right outcome: nothing competes with the payment form. Your storefront pages are unaffected.

If your developer has switched the strict policy on for your **whole storefront** (under **Stores → Configuration → Security**, or in code), the chat is blocked on every page. They need to allow your store's GreatStore address, `https://{your-address}.greatstore.ai`, for scripts and connections in your store's `csp_whitelist.xml`, then check the browser console for anything still blocked.

### 2.4.6 and earlier

These releases only report security-policy issues rather than blocking scripts, so the chat loads on every page, checkout included.

## Staging stores

The chat works on the **Website** address set under **Configure → Basic**. A staging or development store has its own address, so add it under [Embed origins](/maker-greatstore/configure/security.md#embed-origins) before testing there.

## Troubleshooting

<details>

<summary>The chat doesn't appear after saving</summary>

Flush the cache (and Varnish or Fastly, if you use them). Check you edited the store view your storefront uses: a store-view setting overrides **Global**. Then open your browser's developer console. If you see **"Chat is unavailable on …"**, add that address under [Embed origins](/maker-greatstore/configure/security.md#embed-origins).

</details>

<details>

<summary>The browser console shows "Refused to load the script" or "Refused to connect"</summary>

Your store's security policy is blocking the chat on that page. On checkout in 2.4.7 and later this is expected; anywhere else, see **Checkout → 2.4.7 and later** above.

</details>

<details>

<summary>The script disappears from the page source</summary>

Some JavaScript bundling and minification extensions move or merge scripts from **HTML Head**. Exclude `greatstore.ai` in that extension's settings, then flush the cache.

</details>


---

# 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/magento.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.
