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