To integrate Findify Smart Collection follow these steps:

Add a div tag
Add extra content to Findify's Smart Collections
Create a fallback for Findify's Smart Collections

1. Add a div tag

All you need to do is add one div tag to anywhere you'd like to include your Findify Smart Collection[s]

<div data-findify="search"></div>

2. Add extra content to Findify's Smart Collections

The Findify Smart Collection results can be easily decorated with any content from your store (like custom banners, reviews, recommendations. etc).
All you need to do is put the content before and/or after the Findify Smart Collection div, for example

<div class="banner"> 
    <a href="#"><img src="mybanner.png"/></a>
</div>

<div data-findify="search"></div>

<div class="text">
    <p>Some extra text</p>
</div>

<div id="home-findify-rec-1"></div>

3. Create a fallback for Findify's Smart Collections

Please note: if you will not add a fallback, nothing will be displayed on the page in case our servers go down

For the cases when Findify servers are not responding, you can add a fallback to display custom markup instead of Findify Smart Collections.

To do this, you need to add a div to the page with the following class and style, which should reside inside of the data-findify="search" div

<div data-findify="search">
  <div class="findify-fallback" style="display:none;">
    ..... default collection code goes here....
  </div>
</div>

Anything that you will put inside the div will be rendered as a fallback.

4. Shopify Integration

As you are a Shopify customer, you should put the Findify Smart Collection HTML div code into your collection.liquid template.
This way you can use liquid template variables to easily extend the collection page's content.

Replacing all your Shopify collections with Findify Smart Collections

Don't forget to include the current collection code in the fallback div

Put this code in your collection.liquid template file (or another collection template file)

<style>.findify-component-spinner,.findify-component-spinner:after{border-radius:50%;width:60px;height:60px}.findify-component-spinner{margin:60px auto 0!important;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:findify-component-spinner-animation .7s infinite cubic-bezier(.67,.35,.7,.8);animation:findify-component-spinner-animation .7s infinite cubic-bezier(.67,.35,.7,.8);-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;border-top:3px solid #eaeaea;border-right:3px solid #eaeaea;border-bottom:3px solid #eaeaea;border-left:3px solid #c6c6c6}@-webkit-keyframes findify-component-spinner-animation{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}100%{-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes findify-component-spinner-animation{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}100%{-webkit-transform:rotate(450deg);transform:rotate(450deg)}}</style>
<div data-findify="search" style="min-height: 400px;">
  <div class="findify-component-spinner"></div>
  <div class="findify-fallback" style="display:none;">
    ..... default collection code goes here....
  </div>
</div>