# Manually install

## Step 1: Create a new file in snippets folder

You can name the file what ever you want, e.g lool-button.liquid

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

## Step 2: Copy and past the code below to the new file

{% hint style="warning" %}
**IMPORTANT** replace all REPLACE\_WITH\_YOUR\_LOOL\_KEY with your flow's key
{% endhint %}

```liquid
<style>
  @keyframes loolTriggerPulse {
      0% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.1);
      }
      100% {
          transform: scale(1);
      }
  }
  .lool-style-REPLACE_WITH_YOUR_LOOL_KEY {
    cursor: pointer;
    text-align: center;
  }
  .lool-hide {
    display: none;
  }
  .lool-auto-hide {
    display: none;
  }
  .lool-collection-not-found {
    display: none;
  }
  .lool-style-REPLACE_WITH_YOUR_LOOL_KEY:hover{
    outline: 1px solid red;
  }
</style>
<div class="lool-popup-trigger lool-style-REPLACE_WITH_YOUR_LOOL_KEY" lool-key="REPLACE_WITH_YOUR_LOOL_KEY">
  Select Lenses Manually
</div>
<input id="__loolKey" type="hidden" name="attributes['__loolKey']" value="REPLACE_WITH_YOUR_LOOL_KEY">
<script>
  window.autoTriggerFinished = false;
  if (!window.loolLoaded) {
      window.loolLoaded = true;
      window.lensCollections = {{ app.metafields.lool.lensCollections }};
      window.autoTriggerCollectionKey = "{{ product.metafields.lool.autoTriggerCollectionKey }}";
      window.autoTriggerVariantIds = "{{ product.metafields.lool.autoTriggerVariantIds }}";
      window.autoHideVariantIds = "{{ product.metafields.lool.autoHideVariantIds }}";
      window.loolCustomerId = "{{ customer.id }}";
      window.frameProduct = {{ product | json }};
      window.frameVariant = {{ product.first_available_variant | json }};
      window.frameVariantOldId = window.frameVariant ? window.frameVariant.id : '';

      // observe frameVariant
      const subscribeVariant = () => {
        // fetch from formData
        let addToCartForm = document.querySelector('form[action$="/cart/add"]');
        if(addToCartForm) {
          let formData = new FormData(addToCartForm);
          for (const pair of formData.entries()) {
            // console.log(`${pair[0]}, ${pair[1]}`);
            if (pair[0] === "id") {
              window.frameVariantId = +pair[1];
            }
          }
        }
        // fetch from url
        let searchArray = window.location.search.replace("?", "").split("&");
        searchArray.forEach((kv) => {
          let kvArray = kv.split("=");
          if (kvArray[0] === "variant") {
            window.frameVariantId = +kvArray[1];
          }
        });
        // default
        if (!window.frameVariantId && window.frameVariant) {
          window.frameVariantId = window.frameVariant.id;
        }
        if (window.frameVariantId) {
          window.frameVariant = window.frameProduct.variants.find(v => Number(v.id) === Number(window.frameVariantId))
          if(!window.frameVariant) {
            // not found
            window.frameVariant = window.frameProduct.variants[0]
            window.frameVariantId = window.frameVariant.id
          }
          if(window.frameVariant.available) {
            let triggers = document.querySelectorAll('.lool-popup-trigger');
            triggers.forEach(t=>{
              t.classList.remove('lool-hide')
            })
          }else{
            let triggers = document.querySelectorAll('.lool-popup-trigger');
            triggers.forEach(t=>{
              t.classList.add('lool-hide')
            })
          }
        }

        // update frameVariantOldId, autoTriggerFinished
        if(window.frameVariantId !== window.frameVariantOldId) {
          window.frameVariantOldId = window.frameVariantId;
          window.autoTriggerFinished = false;
        }
      }

      // 500ms update
      setInterval(() => {
        subscribeVariant();
      }, 500)

      if(frameVariant && frameVariant.available) {
        const script = document.createElement('script');
        script.defer = true;
        script.type = 'module';
        script.crossOrigin = '';
        script.setAttribute('src', "https://lool-manually-test.myshopify.com/cdn/shop/t/2/assets/lool-button.js?v=131157183616206819251749266571");
        document.head.appendChild(script);
      }else{
        console.log('lool current frame product is not available');
      }

      // preload images
      let preloadImages = new Array()  
      if(window.loolResponsiveImages) {
        Object.keys(window.loolResponsiveImages).forEach(fvid=>{
          Object.keys(window.loolResponsiveImages[fvid]).forEach(lvid=>{
            let i = new Image();
            i.src = window.loolResponsiveImages[fvid][lvid];
            preloadImages.push(i)
          })
        })
      }
  }
  const autoTriggerInterval = setInterval(() => {
    if(window.autoTriggerCollectionKey && window.autoTriggerVariantIds) {
      if(window.autoTriggerVariantIds.includes(window.frameVariantId)) {
        const trigger = document.querySelector(".lool-style-"+window.autoTriggerCollectionKey)
        if(trigger && !window.autoTriggerFinished) {
          trigger.click();
          window.autoTriggerFinished = true;
        }
      }
    }
  }, 500);

  const autoHideInterval = setInterval(() => {
    if(window.autoTriggerCollectionKey && window.autoHideVariantIds) {
      const trigger = document.querySelector(".lool-style-"+window.autoTriggerCollectionKey)
      if(window.autoHideVariantIds.includes(window.frameVariantId)) {
        if(trigger) {
          trigger.classList.add('lool-auto-hide')
        }
      }else{
        if(trigger) {
          trigger.classList.remove('lool-auto-hide')
        }
      }
    }
  }, 500);
</script>

```

## Step 3: add the code below to your product.liquid(or main-product.liquid), the file name depends on your theme

```liquid
{% render 'lool-button' %}
```

e.g

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

That's all!


---

# 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://pb-apps.gitbook.io/lool/get-started/manually-install.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.