Implementing smart collections in Neto enables automated product groupings that adapt to inventory changes. When Neto collections update dynamically based on product rules, you help improve merchandising efficiency and ensure customers see accurate, current product selections, which tends to enhance conversion rates through better-maintained collection pages and more relevant product categorization.
Automated Neto collection management reduces manual effort while improving collection accuracy. This helps you scale merchandising operations within Neto's platform more effectively, supporting better conversion performance through collections that automatically reflect current inventory and merchandising strategies without constant manual updates.
To integrate Smart Collections follow these steps:- Getting started
- Finding the Right Files to Edit
- Adding the Code
- Adding a Fallback
Step 1: Getting Started
To integrate smart-collections, you must first access your website template and asset files through an FTP client such as FileZilla using your SFTP login details. If you don’t already have FileZilla, please download FileZilla Client and access the website template of your current theme.
Step 2: Finding the Right Files to Edit
1. Once you access your website template through FileZilla, go to 'httpdocs' located on the bottom right box→ 'assets'.
2. Within assets, scroll down and click on ‘themes’ and continue to select the current theme of your website template and complete the following steps:
3. Once you open the folder of the current theme you are using, click on ‘templates’ → ‘cms’ → ‘category.template.html’
Step 3: Adding the Code
Then, open the ‘category.template.html’ file and update the file with the following code
smart collections tags
</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;">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c3328;">></span><span class="cm-qualifier" style="box-sizing: border-box;color: #047d65;">.findify-component-spinner</span>,<span class="cm-qualifier" style="box-sizing: border-box;color: #047d65;">.findify-component-spinner</span>:<span class="cm-variable-3" style="box-sizing: border-box;">after</span>{<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">border-radius</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">width</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">60px</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">height</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">60px</span>}<span class="cm-qualifier" style="box-sizing: border-box;color: #047d65;">.findify-component-spinner</span>{<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">margin</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">60px</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">auto</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">0</span><span class="cm-keyword" style="box-sizing: border-box;color: #1d75b3;">!important</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">position</span>:<span class="cm-atom" style="box-sizing: border-box;color: #75438a;">relative</span>;<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">translateZ</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">0</span>);<span class="cm-meta" style="box-sizing: border-box;">-ms-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">translateZ</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">0</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">translateZ</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">0</span>);<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">animation</span>:<span class="cm-variable" style="box-sizing: border-box;color: #047d65;">findify-component-spinner-animation</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">.7s</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">infinite</span> <span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">cubic-bezier</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.67</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.35</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.7</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.8</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">animation</span>:<span class="cm-variable" style="box-sizing: border-box;color: #047d65;">findify-component-spinner-animation</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">.7s</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">infinite</span> <span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">cubic-bezier</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.67</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.35</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.7</span>,<span class="cm-number" style="box-sizing: border-box;color: #75438a;">.8</span>);<span class="cm-meta" style="box-sizing: border-box;">-ms-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform-origin</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span>;<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform-origin</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform-origin</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span> <span class="cm-number" style="box-sizing: border-box;color: #75438a;">50%</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">border-top</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">3px</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">solid</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">#eaeaea</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">border-right</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">3px</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">solid</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">#eaeaea</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">border-bottom</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">3px</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">solid</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">#eaeaea</span>;<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">border-left</span>:<span class="cm-number" style="box-sizing: border-box;color: #75438a;">3px</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">solid</span> <span class="cm-atom" style="box-sizing: border-box;color: #75438a;">#c6c6c6</span>}<span class="cm-def" style="box-sizing: border-box;">@-webkit-keyframes</span> <span class="cm-variable" style="box-sizing: border-box;color: #047d65;">findify-component-spinner-animation</span>{<span class="cm-number" style="box-sizing: border-box;color: #75438a;">0%</span>{<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">90deg</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">90deg</span>)}<span class="cm-number" style="box-sizing: border-box;color: #75438a;">100%</span>{<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">450deg</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">450deg</span>)}}<span class="cm-def" style="box-sizing: border-box;">@keyframes</span> <span class="cm-variable" style="box-sizing: border-box;color: #047d65;">findify-component-spinner-animation</span>{<span class="cm-number" style="box-sizing: border-box;color: #75438a;">0%</span>{<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">90deg</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">90deg</span>)}<span class="cm-number" style="box-sizing: border-box;color: #75438a;">100%</span>{<span class="cm-meta" style="box-sizing: border-box;">-webkit-</span><span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">450deg</span>);<span class="cm-property" style="box-sizing: border-box;color: #1d75b3;">transform</span>:<span class="cm-variable cm-callee" style="box-sizing: border-box;color: #047d65;">rotate</span>(<span class="cm-number" style="box-sizing: border-box;color: #75438a;">450deg</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;">style</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 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-component-spinner"</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;">"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;">
After the update, the full 'category.template.html' may look like this:
category.template.html
<div class="content"> <div class="catalogue wk_catalogue"> <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" id="findify-collection-container" style="min-height: 400px;"> <div class="findify-component-spinner"></div> <div class='findify-fallback' style="display:none;"> [%SET [@page_type@]=';category'/%] [%load_template file:'cms/includes/sidebar.template.html'/%] [%breadcrumb%] [%PARAM *header%] <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="[@config:home_url@]" itemprop="item"><span itemprop="name">Home</span></a> </li> [%/PARAM%] [%PARAM *body%] <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="[@url@]" itemprop="item"><span itemprop="name">[@name@]</span></a> </li> [%/PARAM%] [%PARAM *footer%] </ul> [%/PARAM%] [%/breadcrumb%] <h1 class="page-header"> [%url_info name:'page_heading' if:'eq' value:''%] [%PARAM if_true%] [@content_name@] [%/PARAM%] [%PARAM if_false%] [%url_info name:'page_heading'%][%end url_info%] [%/PARAM%] [%end url_info%] [%IF [@keywords@] == ''%] [%FILTER ID:'keywords' if:'ne' value:''%][%NOHTML%][%FILTER ID:'keywords'%][%/FILTER%][%/NOHTML%][%/FILTER%] [%/IF%] </h1> [%if ![@form:pgnum@] OR [@form:pgnum@] eq '1'%] [%advert type:'text' template:'carousel' inherit:'n' limit:'10' ad_group:''%] [%param *header%] <div id="homepageCarousel" class="carousel slide"> [%if [@total_showing@] > 1%] <ol class="carousel-indicators"> [%site_value id:'counter' type:'load'/%] </ol> [%/if%] <div class="carousel-inner"> [%/param%] [%param *footer%] </div> [%if [@total_showing@] > 1%] <a class="left carousel-control" href="#homepageCarousel" data-slide="prev"> <span class="fa fa-chevron-left"></span> </a> <a class="right carousel-control" href="#homepageCarousel" data-slide="next"> <span class="fa fa-chevron-right"></span> </a> [%/if%] </div> <hr> [%/param%] [%param *ifempty%] [%/param%] [%/advert%] [%advert type:'product' limit:'8' template:'' inherit:'n' ad_group:''%] [%param *header%] <div class="row"> [%/param%] [%param footer%] </div> <hr> [%/param%] [%/advert%] [%if [@content_short_description1@] or [@content_short_description2@] or [@content_short_description3@] or [@content_description1@] or [@content_description2@] or [@content_description3@]%] <div class="n-responsive-content"> [@content_short_description1@] [@content_short_description2@] [@content_short_description3@] </div> <div class="n-responsive-content"> [@content_description1@] [@content_description2@] [@content_description3@] </div> <hr> [%/if%] [%/if%] [%THUMB_LIST type:'products' limit:'[@config:THUMB_LIMIT@]'%] [%PARAM template%][%VIEWBY type:'products' default:'[@templatethumb@]';%][%/VIEWBY%][%/PARAM%] [%PARAM *header%] <div class="row sort_container wk_sort_container"> <div class="col-xs-4 col-sm-7 col-md-4 wk_viewby"> <script language="javascript" type="text/javascript"> function viewtype(view) { var f=document.viewForm; f['viewby'].value=view; f.submit(); } </script> <form method="get" name="viewForm" action="[@config:CURRENT_URL@]" class="hidden"> <input name="rf" type="hidden" value="[%FILTER_CODE%][%/FILTER_CODE%]"> <input name="viewby" type="hidden" value=""/> </form> <div class="viewby btn-group"> <a href="javascript:viewtype('');" class="btn btn-default [%VIEWBY type:'products' if:'ne' value:'list' if_true:'active' if_false:''%][%/VIEWBY%]" rel="nofollow"> <i class="fa fa-th"></i> </a> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: #9c33
Related Articles
Product Recommendations:
Conversion Optimization: