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

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

IMPORTANT replace all REPLACE_WITH_YOUR_LOOL_KEY with your flow's key

<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

{% render 'lool-button' %}

e.g

That's all!