# Adding Maker to your site

***

### Squarespace

#### Embed on a single page

1. Edit the target page → hover and click **➕ Add Block**.
2. Select **Code**, set **HTML** mode.
3. Paste your Maker `<script>` → **Apply** → **Save**. [Squarespace Help](https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site?utm_source=chatgpt.com)

#### Site-wide load

1. **Settings → Advanced → Code Injection**.
2. Paste the script in **Header** (or **Footer**) field.
3. Click **Save**. It now runs on every page. [Squarespace Help](https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection?utm_source=chatgpt.com)

<figure><img src="/files/S4XCWSa51EKP8axMglji" alt=""><figcaption></figcaption></figure>

***

### Wix

#### Embed in a specific section

1. In the **Editor**, click **Add (+) → Embed → Embed HTML**.
2. Drag the frame where Maker should appear, then **Enter Code**.
3. Paste the script → **Update** → **Publish**. [Wix Support Center](https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site?utm_source=chatgpt.com)

#### Global or selected pages

1. From your **Dashboard**, go to **Settings → Custom Code**.
2. Click **+ Add Custom Code**.
3. Paste the script, name it, choose **All pages** or specific pages & location (Head / Body), then **Apply**. [Wix Support Center+1](https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site?utm_source=chatgpt.com)

<figure><img src="/files/Bj5M7xkibMxRL0C1ubRK" alt=""><figcaption></figcaption></figure>

***

### Webflow

#### Exact spot in a design

1. Open **Designer → Add panel**.
2. Drag an **Embed** element onto the canvas.
3. Paste the Maker `<script>` → **Save & Close** → **Publish**. [help.webflow.com](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed?utm_source=chatgpt.com)

#### Template-wide or site-wide

*Page only:* **Pages panel → ⚙ Page Settings → Custom Code** → paste in **Head** or **Before \</body>** → **Save**.\
\&#xNAN;*Entire site:* **Site Settings → Custom Code** → paste in **Head** or **Footer** → **Publish**. [help.webflow.com](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed?utm_source=chatgpt.com)

<figure><img src="/files/4Mvdg7g6meRCpFHUtRIg" alt=""><figcaption></figcaption></figure>

***

### WooCommerce (WordPress)

#### Single product or page

1. Edit the product/page in Gutenberg.
2. Click **➕ → Custom HTML** block.
3. Paste the script → **Preview** → **Update/Publish**.

#### Theme-wide

1. **Appearance → Editor** (or header-footer plugin).
2. Paste the script in `header.php`, `footer.php`, or a global template part → **Save**. *(Requires admin permissions.)*

<figure><img src="/files/9msQqmdoGNRp9jgJynqq" alt=""><figcaption></figcaption></figure>

***

### Shopify

#### Exact placement on a template

1. **Online Store → Themes → Customize**.
2. Open the template (e.g., *Products*).
3. **Add block/section → Custom liquid** → paste the script → **Save**. [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks?utm_source=chatgpt.com)

#### Site-wide

1. **… → Edit code**.
2. Open `layout/theme.liquid` (or the relevant template).
3. Paste the script before `</body>` → **Save**. [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks?utm_source=chatgpt.com)

<figure><img src="/files/wZ485raPrnFb9dBAcQKA" alt=""><figcaption></figcaption></figure>

***

### BigCommerce

#### One page only

1. **Storefront → Web Pages** → edit the page.
2. Switch to **HTML** view.
3. Paste the script → **Save**. [BigCommerce Support](https://support.bigcommerce.com/s/article/Using-Script-Manager?utm_source=chatgpt.com)

#### All or selected pages

1. **Storefront → Script Manager → Create a Script**.
2. Fill **Name**, choose **Location** (Header/Footer), **Pages**, **Script Type: Script**.
3. Paste the script → **Save/Enable**. [BigCommerce Support](https://support.bigcommerce.com/s/article/Using-Script-Manager?utm_source=chatgpt.com)

<figure><img src="/files/LIGZotWVULNYWv0qxhok" alt=""><figcaption></figcaption></figure>

***

### Magento / Adobe Commerce

#### Page Builder block

1. In Admin, edit the Page/Block/Category → **Edit with Page Builder**.
2. In **Elements**, drag **HTML Code** onto the canvas.
3. Paste the script → **Save** (clear cache). [Experience League](https://experienceleague.adobe.com/en/docs/commerce-admin/page-builder/elements/html-code?utm_source=chatgpt.com)

#### Reusable block

1. **Content → Elements → Blocks → Add New Block**.
2. Add an **HTML Code** element with the script → **Save**.
3. Place that block anywhere via Page Builder. [Experience League](https://experienceleague.adobe.com/en/docs/commerce-admin/page-builder/elements/html-code?utm_source=chatgpt.com)

<figure><img src="/files/TsU41zYlc8Z1b6VtSp4k" alt=""><figcaption></figcaption></figure>

***

### HubSpot CMS (new)

#### Site-wide header or footer

1. **Settings → Website → Pages**.
2. Open **Site Header HTML** (or **Site Footer HTML**).
3. Paste the script → **Save**. [HubSpot Knowledge Base](https://knowledge.hubspot.com/website-and-landing-pages/use-code-snippets-with-hubspot-content?utm_source=chatgpt.com)

#### Within a template

1. **Marketing → Files & Templates → Design Tools**.
2. Edit a theme/template; drag a **Custom HTML** module where Maker should appear.
3. Paste the script → **Publish** template. [HubSpot Knowledge Base](https://knowledge.hubspot.com/website-and-landing-pages/use-code-snippets-with-hubspot-content?utm_source=chatgpt.com)

<figure><img src="/files/tV4QY9O6Ja9E6UCfX8fZ" alt=""><figcaption></figcaption></figure>

### How do I make my Maker content load faster?

Paste one small block of code into the page **head** and publish. Copy‑paste this (everything goes inside `<head>`)

```
<!-- Very top of <head>: warm up & preload -->
<link rel="dns-prefetch" href="//aicdn.maker.co">
<link rel="preconnect" href="https://aicdn.maker.co" crossorigin>
</script>
```

#### Where to paste this code on different platforms?

#### Squarespace (7.0/7.1)

* **Site‑wide:** **Settings → Advanced → Code Injection → Header** → paste the whole block → **Save** → **Publish**.
* **Single page:** Open the page → **Settings → Advanced → Header** → paste → **Save**.

> Requires a Business/Commerce plan for Code Injection.

#### Wix

* **Dashboard → Settings → Custom Code → Add Custom Code** → paste → **Place Code in:** *Head* → **All pages** (or select pages) → **Apply** → **Publish**.

#### Webflow

* **Project Settings → Custom Code → Head Code** → paste → **Save** → **Publish**.
* Per‑page: **Page Settings → Inside head tag** → paste → **Publish**.

#### WooCommerce (WordPress)

* Easiest: install **“Insert Headers and Footers” (WPCode)** plugin → **Code Snippets → Header** → paste → **Save**.
* Or theme edit: **Appearance → Theme File Editor → header.php** → paste inside `<head>` → **Update file**.

> Make sure caching/CDN is cleared (e.g., WP Rocket, Cloudflare).

#### Shopify (Online Store 2.0)

* **Online Store → Themes → Edit code → layout/theme.liquid** → find `<head>` → paste the block **just after `<head>`** → **Save** → **Preview/Publish**.

#### BigCommerce (Stencil)

* **Storefront → Themes → Advanced → Edit Theme Files** → open `templates/layout/base.html` (or the head partial, e.g., `templates/components/common/html-head.html`) → paste inside `<head>` → **Save** → **Preview/Publish**.

> If you prefer not to edit files, you can add only the `<script>` via **Storefront → Script Manager** (Location: *Head*). The three `<link>` tags usually require theme file edit.

#### Magento / Adobe Commerce (Magento 2)

* **Admin → Content → Design → Configuration** → choose your **Store View → Edit** → **HTML Head → Scripts and Style Sheets** → paste → **Save Configuration** → **Flush Cache**.

#### HubSpot CMS

* **Settings → Website → Pages → (choose domain) → Templates → Site header HTML** → paste → **Save** → **Publish**.
* Or edit your theme in **Design Manager** and add the block to the global header partial.

***


---

# Agent Instructions: 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:

```
GET https://docs.maker.co/tips-and-tricks/adding-maker-to-your-site.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.