> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/integration-shops/shopify.md).

# Shopify

## Step 1: Access Your Online Store Themes

Log in to your Shopify store and navigate to **Onlineshop > Themes** in the admin panel.

<figure><img src="/files/dlz2qsogQzMY6u0FKOhC" alt=""><figcaption><p>Click on Themes</p></figcaption></figure>

## Step 2: Edit your Code

Locate your **active theme** and click on the **three dots menu**. From the dropdown, select **Edit Code** to access the theme files.

<figure><img src="/files/Am9OnYEVGxUvLqJZjqPu" alt=""><figcaption><p>Click on Edit code</p></figcaption></figure>

## Step 3: Add your mazing-integration script

* In the code editor, go to the **Assets** directory.
* Click on **Add a new asset** and create a new JavaScript file.\
  Name the file something like `mazing-integration.js`.
* In this new file, you can write your custom integration script.

{% hint style="info" %}
&#x20;You can find an example script here: [**Variant Integration Example**](/mazing-world/integration-types/gallery-integration.md).
{% endhint %}

<figure><img src="/files/8kcoD4MhBSTXFPxQZVVi" alt=""><figcaption><p>Add your custom mazing-integration script</p></figcaption></figure>

## Step 4: Integrate your script

Once your `mazing-integration.js` script is ready, you’ll need to integrate it into your Shopify theme by editing the `theme.liquid` file.

<figure><img src="/files/ORqYFj4e5zFopUMOtxEE" alt=""><figcaption><p>Open your theme.liquid file</p></figcaption></figure>

**Mazing CDN script**: Place this at the **end of the `<head>` element**.

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

{% hint style="info" %}

```
<!-- Add this to the <head> section -->
<script defer type="text/javascript" src="https://cdn.mazing.link/mzg-in.js"></script>
```

{% endhint %}

**Your `mazing-integration.js` script**: Place this at the **end of the `<body>` element**.

<figure><img src="/files/8BgbXRvekrYPpIqE4LEP" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

```
<!-- Add this to the <body> section -->
<script defer type="module" src="{{ 'mazing-integration.js' | asset_url }}"></script>
```

{% endhint %}

#### 🎉 Congrats!

You’ve successfully integrated your own customized Mazing script into your Shopify store! 🚀

Your new script will now enhance your store with the desired functionality, providing a better experience for your customers.
