Follow the steps listed below:

1. Enable HTML editing on your store
2. Feedback API integration
3. Search page integration
4. Disable default quick search
5. Add our JS

Step 1: Enable HTML editing on your store

Important note: if for some reason after integration search is not working or you think your website is broken, you can revert to the unmodified theme and contact us!

In the beginning, you need to make a copy of your current theme, so that you can edit theme files directly:

• Go to Storefront Design > My Themes
• Click on Customize
• Scroll on the left to the section Edit theme files and click on make a copy
• Add with Findify to the end of your theme name and click on Save a Copy
• Go to Storefront Design > My Themes
• On the current theme select 'Advanced -> Make a copy'
• Put a name on the copy of the current theme
• On the copy of the theme select Edit theme Files
• A window showing HTML code should open

You're ready to start the integration process!

Step 2: Feedback API integration

Product tag:

Open the file templates > pages > product.html

Paste the code snippet before {{/partial}}

<div data-findify-event="view-page" data-findify-item-id="{{product.id}}"></div>
<div data-findify-filter="brand" data-findify-filter-value="{{product.brand.name}}"></div>
<div data-findify-filter="id" data-findify-filter-value="{{product.id}}"></div>

Order tag:

Open the file templates > pages > order-complete.html

Paste the code snippet before {{/partial}}

<div class="findify_purchase_order" style="display:none">
   <span class="order_number">{{ order.id }}</span>
</div>

🚧

If you're using BigCommerce Optimized Page Checkout

Please, follow the instructions below for the Optimized Page Checkout flow!

Open the file templates > pages > order-confirmation.html

Paste the code snippet before the second {{/partial}} (it refers to the {{#partial "page"}})

<div class="findify_purchase_order" style="display:none">
   <span class="order_number">{{ checkout.order.id }}</span>
</div>

Get our script tag during the onboarding or in the Merchant Dashboard and paste it before the first {{/partial}} (it refers to the {{#partial "head"}})

Cart content tag:

Open the file templates > layout > base.html
Paste the code snippet before </body>

<div data-findify-event="update-cart">
  {{#each cart.items}}
    {{#if type '===' 'Item' }}
      <div data-findify-item-id="{{product_id}}" data-findify-unit-price="{{ price.value }}" data-findify-quantity="{{ quantity }}"></div>
    {{/if}}
  {{/each}}
</div>

Step 3: Search page integration

Open the file templates > pages > search.html

Paste the following code snippet after {{#partial "page"}}

<style>.findify-component-spinner{margin:60px auto 0 auto!important;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:findify-component-spinner-animation 0.7s infinite cubic-bezier(.67,.35,.7,.8);animation:findify-component-spinner-animation 0.7s infinite cubic-bezier(.67,.35,.7,.8);border-radius:50%;width:60px;height:60px;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.findify-component-spinner:after{border-radius:50%;width:60px;height:60px}@-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)}}.findify-component-spinner{border-top:3px solid #eaeaea;border-right:3px solid #eaeaea;border-bottom:3px solid #eaeaea;border-left:3px solid #c6c6c6}}</style>

<div data-findify-attr="findify-search-results" style="min-height: 400px;">
   <div class="findify-component-spinner">
      <div style="display:none;">

Paste the following code snippet before {{/partial}}

</div>
</div>
</div>

Step 4: Disable default quick search

To disable the default BigCommerce quick search, you need to comment out the content of quick-results.html file that you can find in the Templates -> Components -> Search folder

Step 5: Add our JS

Please, follow this guide to see how you can add our JS snippet to your store Adding Custom Scripts to Stencil Themes

If you want to make the search work even faster you can follow these steps, but things can break upon theme update
Open the file templates > layout > base.html

Paste the code snippet containing our script before </body>

You can get the script tag during the onboarding or in the Merchant Dashboard