# Install cookie widget

{% hint style="warning" %}
This courtesy guide is **no longer actively tested** by Openli, although it might still work.

Our cookie-consent widget intentionally uses a highly-compatible, highly-generic approach to integration. In most cases, it will be possible for your developers to adapt this guide's steps to any changes that might have been made to the target platform, in combination with their own general documentation. **Our** [**consent-state events**](/docs/documentation/legaljs-widget/collecting-cookie-consent/consent-state-api.md#listening-for-consent-change-events) **might be useful for this.**
{% endhint %}

## Before you start:

Before following these steps, please be sure that you have:

* [ ] Added your website's URL (*either during the signup process or in the settings page*)
* [ ] [Created cookie providers and categorised all cookies](/docs/cookie-consent-management/get-started-with-legal-monster.md#step-2-create-your-cookie-providers)
* [ ] [Created a cookie policy](/docs/cookie-consent-management/cookie-widget/how-to-create-a-cookie-policy.md)
* [ ] [Created a cookie widget](<  https://docs.legalmonster.com/how-to-guides/how-to-create-a-cookie-widget>)
* [ ] [Block Cookies](#undefined)

Check step 1 - 4 in the [Get started with Openli](/docs/cookie-consent-management/get-started-with-legal-monster.md) guide to creating all of the above.&#x20;

## Step 1: Code snippet

To install your widget, you'll need your cookie widget code snippet.

![](/files/7vCIbCTDoOpDiPK6jAFj)

To find your code snippet, go to the Openli dashboard and select "**Widgets**" in the side menu. Click on the cookie widget you previously created and copy the code.&#x20;

It will look like this:

```javascript
<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "cookie",
        widgetPublicKey: "xxxxxxxxxxxxxxxxx",
    });
</script>

```

{% hint style="info" %}
Notice that the value for `widgetPublicKey` will be different in your code snippet
{% endhint %}

## Step 2: Add custom code&#x20;

To insert the code snippet on your page, go to your Shopify dashboard and select "Online store" in the side menu. From the dropdown menu select "Themes".&#x20;

To add custom code to your theme, you must select "**Edit code**" from the actions menu:&#x20;

![Select Edit code from the dropdown menu](/files/-MIroTuTxr9YuaVvgj2J)

You'll now enter Shopify's code editing interface.&#x20;

## Step 3: Edit theme.liquid

To correctly install the cookie widget, you must enter the widget code snippet in the file name "theme.liquid".&#x20;

Select "theme.liquid" from the list of files in the editor:

![The editor screen when "theme.liquid" is selected](/files/-MIrpSumuUD5L4rq8kYj)

The cookie widget code snippet will need to go right before the **closing** \<body>-tag of your code. Navigate to the bottom of the code and insert your code snippet.&#x20;

![The highlighted code is your cookie widget code snippet. ](/files/-MIrqpnpw5Ydj6d1NNpD)

Remember to save once you've added the code snippet.&#x20;

## Block Cookies

Finally it is important that you don't forget to block any non-necessary cookies. It is extremely important to do this as you would otherwise be setting cookies before you collect consent.\
\
You can block cookies in two different ways. Either manually or via GTM if you use that to set the cookies.\
\
Guides can be found here for GTM:\
[Blocking Cookies with GTM](https://docs.legalmonster.com/system-specific-integration-guides/how-to-use-google-tag-manager-with-legal-monster/block-cookies-with-gtm)\
\
And here for manual blocking:\
[Blocking Cookies Manually](https://docs.legalmonster.com/documentation/legaljs-widget/collecting-cookie-consent/blocking-cookies)

## Done!

Congratulations on completing your first step towards collecting compliant cookie consent. Pad your self on the back and know that our mascot Li is proud of you.

&#x20;&#x20;

![](/files/zs6pyohoGPpemrZGhYeD)


---

# 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.openli.com/docs/legacy-integrations/shopify/install-cookie-widget.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.
