Integrating on your store
There are a view simple steps that you need to do to integrate the widget
-
You need to choose which widget you want to show and where.
We offer home page, product page, cart page and category page widgets, but you can mix and match them and put them wherever you want on the website.
-
Enable the widget in the Merchant Dashboard.
As soon as you enable the widget it will become active and will start work and collecting data.
-
Add the widget code to the desired location on your website.
The widget code will look like the following code
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;">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;">
You should put this code into your store theme where you want it to appear.
That's it, now you are using Findify Recommendations on your store, which will help you increase the customer base and gain more revenue!
Recommendation filtering
Each filter is a rule that is applied to an array of products. Each rule has 5 <span class="cm-s-neo" style="box-sizing: border-box;">actions</span> available: pin, exclude, include, push to top, push to bottom. For each action, you define product attribute values that will be used to identify products. Almost all product attributes are available (there are some exceptions like <span class="cm-s-neo" style="box-sizing: border-box;">description</span>) as well as custom fields.
If there are multiple filters defined, they are executed in the following order sequentially:
- pin
- exclude
- push to the bottom
- push to the top
- include
After the initial filtering, the products are bucketed into a set of groups for each action in the following order:
- pinned
- pushed to top
- included
- pushed to bottom
Inside of buckets 2-4, the products are sorted according to their search relevancy. Pinned products are sorted according to the pinned order, ignoring their relevancy.
This means that if you define both <span class="cm-s-neo" style="box-sizing: border-box;">exclude</span> and <span class="cm-s-neo" style="box-sizing: border-box;">include</span> actions, from the resulting array of products, products that fall under exclude action will be removed first and then the ones that fall under include action will be left.
Here are examples of rules that can be applied:
- Include products only from certain brand
- Include products only from certain category
- Exclude products of certain brand
- Exclude products by ID
- Push to top products of certain brand and with quantity > 10 to top
'Current value' integration
When using the <span class="cm-s-neo" style="box-sizing: border-box;">current value</span> option, a specific integration needs to be done on the frontend in order to capture the current value of a custom field.
This is done by applying extra tags on the recommendation container, the generic structure looks like this
Generic Example
</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-filter</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"FIELD_NAME"</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify-filter-value</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"FIELD_VALUE"</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;">
For the <span class="cm-s-neo" style="box-sizing: border-box;">FIELD_NAME</span> you need to put the name of the field to filer, e.g. <span class="cm-s-neo" style="box-sizing: border-box;">brand</span>, <span class="cm-s-neo" style="box-sizing: border-box;">category</span>, <span class="cm-s-neo" style="box-sizing: border-box;">custom_fields.width</span>. The value inside <span class="cm-s-neo" style="box-sizing: border-box;">data-findify-filter-value</span> tag contains a JSON object in the form of <span class="cm-s-neo" style="box-sizing: border-box;">VALUE</span>.
The full example will look similar to this one
Brand Example
</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-filter</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"brand"</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify-filter-value</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"Adidas"</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;">
If you want to add multiple values for brands, you would need to wrap it up with stringified json:
Multiple Brand Values
</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-filter</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"brand"</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify-filter-value</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">'[{"value":"addidas"},{value:"nike"},...]'</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;">
Let's say that you have a custom field called 'Gender'. You can setup a tag using this custom field as well (make sure that the name of the filter is the same as it is stored internally in Findify):
Custom Fields Example
</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-filter</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"custom_fields.Gender"</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify-filter-value</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"Men"</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;">
For the <span class="cm-s-neo" style="box-sizing: border-box;">category</span> if the current item is part of a nested category, you need to pass multiple items inside the <span class="cm-s-neo" style="box-sizing: border-box;">value</span> array
Category Example
</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-filter</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"category"</span> <span class="cm-attribute" style="box-sizing: border-box;">data-findify-filter-value</span>=<span class="cm-string" style="box-sizing: border-box;color: #b35e14;">"CategoryParent > CategoryChild"</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;">