faq-home-and-collection-pages

You can show LensAdvisor buttons for any product on any page. To do this:

  1. Go to your Sales Channel > Online Store Theme > Customize
  2. Click on App Embeds in the far left icon menu
  3. Turn on "LensAdvisor Quick Buy"
  4. Modify your theme code wherever you would like the button and inject the following:
5. For products assigned directly (not by product collection): 
    <lensadvizor-quick-buy
        class="la-select-lenses-btn"
        data-la-quick-buy
        data-la-product-id="{{ product.id }}"
        data-la-variant-id="{{ product.selected_or_first_available_variant.id }}"
        data-la-product-json="{{ product | json | escape }}"
        data-la-flow-id=""
    >
    </lensadvizor-quick-buy>
5. For products assigned by product collection: 
    {% liquid
        assign lacollectionId = ""
        unless request.page_type == "collection"
            for collection in product.collections
                if collection.metafields.lensadvisor.collection_id  != blank
                    assign lacollectionId = collection.metafields.lensadvisor.collection_id
                endif
            endfor
        else
            assign lacollectionId = collection.metafields.lensadvisor.collection_id
        endunless
    %}
    <lensadvizor-quick-buy
      class="la-select-lenses-btn"
      data-la-quick-buy
      data-la-product-id="{{ product.id }}"
      data-la-variant-id="{{ product.selected_or_first_available_variant.id }}"
      data-la-product-json="{{ product | json | escape }}"
      data-la-flow-id="{{ lacollectionId }}"
      >
    </lensadvizor-quick-buy>

---

NOTE: Replace product and collection variables with the product and collection variables used in your theme code.

---

If this code is dynamically loaded

(e.g. using the section-rendering concept of Shopify), please also add  data-la-quick-view="1" to <lensadvizor-quick-buy> or call LensAdvizor.init()

---

Advanced

If the product object is not immediately available:

1. You can replace data-la-product-json with data-la-product-handle, and provide the product handle instead.

2. If you are loading the product data from another source, you can omit data-la-product-json and instead load it in javascript, for example: 

    <script type="application/json" data-lensadvizor-product="{{ product.id }}">{{ product | json }}</script> 

 

The Problem

"Processing the orders manually took so much time that I simply couldn't scale." It's 2019. Ming, one of our co-founders and owner of Rocket Eyewear, has just hit his first million in e-commerce sales. He's projecting a significant increase in profit for 2020...ifhe can scale his prescription lenses sales for the higher demand. But as it was, it was impossible to keep processing prescriptions manually- there were too many emails and too long of a lead time. Poor feedback was common, since people hated waiting weeks for their prescription to clear and their glasses shipped.

Enter: LensAdvizor.