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>