Step 1. Go to Code Editor
Step 2. Click Add a new snippet inside the Snippets folder
Step 3. Set the file name as easysearch_fitment and click Done
Step 4. An empty snippet will be created and opened in the editor.
Copy and paste the following code into the snippet you just created:
<![CDATA[
{%- comment -%} DO NOT EDIT THIS SNIPPET - it's generated automatically and may be overwritten at any time {%- endcomment -%}{%- if product -%}<div class="easysearch-fitment-widget easysearch-hidden">
<div class="easysearch-fitment-loader">
<div class="easysearch-fitment-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewbox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="13" width="4" height="5" fill="#bbb">
<animate attributename="height" attributetype="XML" values="5;21;5" begin="0s" dur="0.6s" repeatcount="indefinite"></animate>
<animate attributename="y" attributetype="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatcount="indefinite"></animate>
</rect>
<rect x="10" y="13" width="4" height="5" fill="#bbb">
<animate attributename="height" attributetype="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatcount="indefinite"></animate>
<animate attributename="y" attributetype="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatcount="indefinite"></animate>
</rect>
<rect x="20" y="13" width="4" height="5" fill="#bbb">
<animate attributename="height" attributetype="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatcount="indefinite"></animate>
<animate attributename="y" attributetype="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatcount="indefinite"></animate>
</rect>
</svg></div>
</div>
<div class="easysearch-fitment-search-widget easysearch-hidden">
<h4 class="easysearch-fitment-header"></h4>{%- render 'easysearch' -%}
</div>
<div class="easysearch-fitment-holder easysearch-hidden">
<div class="easysearch-fitment-results">
<div class="easysearch-fitment-icon-holder">
<div class="easysearch-fitment-icon">
<svg class="easysearch-fitment-icon-success" width="18px" viewbox="0 0 18 18">
<path d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"></path></svg><svg class="easysearch-fitment-icon-fail" width="32px" viewbox="0 0 512 512">
<path d="M289.94,256l95-95A24,24,0,0,0,351,127l-95,95-95-95A24,24,0,0,0,127,161l95,95-95,95A24,24,0,1,0,161,385l95-95,95,95A24,24,0,0,0,385,351Z"></path></svg>
</div>
</div>
<div class="easysearch-fitment-details">
<h4 class="easysearch-fitment-header"></h4>
<div class="easysearch-fitment-params-holder easysearch-fitment-text">
<span class="easysearch-fitment-params easysearch-fitment-text"></span><span class="easysearch-fitment-change"></span>
</div>
</div>
</div>
<div class="easysearch-fitment-other-results easysearch-fitment-text"></div>
</div>{% capture esfpc %}{% for c in product.collections %}{{ c.handle }},{% endfor %}{% endcapture %}<script>
document.addEventListener('easysearch_loaded', function() { easysearch.initFitmentWidget({ allProductTags: { { product.tags | json } }, allProductCollections: { { esfpc | split: ',' | json } } }); });
</script>
</div>{%- endif -%}
]]>
Step 5. Click Save.
