Knowledge Base

Merchandising Cloud

Smart Collection Integration (Custom)

What are Findify Smart Collections?

Findify Smart Collections are an intelligent way to present specific product segments to your users.
The added value with Findify Smart Collections is that you will have all the features you love in Findify search, now on a collection level:

Dynamic filtering
Trend based product ordering (using our Machine Learning platform)
Lightning fast response time

Findify Smart Collections can be used to replace specific category pages on your site, create dedicated landing pages, or as the complete collection engine for your store. Smart Collections are also SEO friendly, so they are indexed by search engines to make sure you make the best of your product data.

How can I create a Findify Smart Collection?

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

HTML

</code></pre>
<div class="cm-s-neo" style="box-sizing: border-box;display: inherit;"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"search"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span></div>
<pre style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: var(--font-size);margin-bottom: 15px;margin-top: 0px;overflow-wrap: normal;color: var(--md-code-text, inherit);line-height: 1.45;overflow: hidden;padding: 0px;display: block;word-break: normal;"><code class="rdmd-code lang-html theme-light" style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: 13.5px;background: inherit;border-radius: 3px;color: var(--md-code-text);margin: 0px;padding: 1em;border-width: 0px;white-space: pre;word-break: normal;line-height: inherit;overflow: auto;overflow-wrap: normal;max-height: 90vh;display: block;">

How can I add extra content to my Findify Smart Collection pages?

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

HTML

</code></pre>
<div class="cm-s-neo" style="box-sizing: border-box;display: inherit;"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">class</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"banner"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">a</span> <span class="cm-attribute" style="box-sizing: border-box;">href</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"#"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">img</span> <span class="cm-attribute" style="box-sizing: border-box;">src</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"mybanner.png"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">/></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">a</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"search"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">class</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"text"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span>Some extra text<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">id</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"home-findify-rec-1"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span></div>
<pre style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: var(--font-size);margin-bottom: 15px;margin-top: 0px;overflow-wrap: normal;color: var(--md-code-text, inherit);line-height: 1.45;overflow: hidden;padding: 0px;display: block;word-break: normal;"><code class="rdmd-code lang-html theme-light" style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: 13.5px;background: inherit;border-radius: 3px;color: var(--md-code-text);margin: 0px;padding: 1em;border-width: 0px;white-space: pre;word-break: normal;line-height: inherit;overflow: auto;overflow-wrap: normal;max-height: 90vh;display: block;">

How can I add a fallback for Findify 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

HTML

</code></pre>
<div class="cm-s-neo" style="box-sizing: border-box;display: inherit;"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"search"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"><</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span> <span class="cm-attribute" style="box-sizing: border-box;">class</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"findify-fallback"</span> <span class="cm-attribute" style="box-sizing: border-box;">style</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"display:none;"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> ..... default collection code goes here.... <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;"></</span><span class="cm-tag" style="box-sizing: border-box;color: #9c3328;">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span></div>
<pre style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: var(--font-size);margin-bottom: 15px;margin-top: 0px;overflow-wrap: normal;color: var(--md-code-text, inherit);line-height: 1.45;overflow: hidden;padding: 0px;display: block;word-break: normal;"><code class="rdmd-code lang-html theme-light" style="box-sizing: border-box;font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size: 13.5px;background: inherit;border-radius: 3px;color: var(--md-code-text);margin: 0px;padding: 1em;border-width: 0px;white-space: pre;word-break: normal;line-height: inherit;overflow: auto;overflow-wrap: normal;max-height: 90vh;display: block;">

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