BigCommerce: Blueprint Integration

Integrating Findify with BigCommerce Blueprint style themes

To integrate Findify into your shop you'll need to follow steps listed below:

  • Install Findify Search & Recommendations
  • Disable quick search
  • Add the Findify tracking tags
  • Add Findify to your search results page
  • Add the Findify Javascript to <head> section

Important note: If you're using Stencil you might need extra integration work, so please, feel free to contact us!

Install Findify Search & Recommendations app

Go to our app Findify Search & Recommendations and add it to your store.

Disable quick search

  1. Go to you store settings ([store_url]/manage/settings/store)
  2. Choose the display tab
  3. Scroll down until you fine Enable Quick Search? section and uncheck the box

Add Findify tracking tracking tags

Adding the tag to product.html page

  1. Go to the product.html page ([store_url]/admin/designmode.php?ToDo=editFile&File=product.html&f=a)
  2. Paste the code snippet before </body> tag
<div data-findify-event="view-page" data-findify-item-id="%%GLOBAL_ProductId%%"></div>

Adding the tag to order.html page

  1. Go to the order.html page ([store_url]/admin/designmode.php?ToDo=editFile&File=order.html&f=a)
  2. Paste the code snippet before the </body> tag
<div class="findify_purchase_order" style="display:none">
   <span class="order_number">%%GLOBAL_OrderId%%</span>
</div>

Add Findify to your search page

This is the trickiest part as it may very for different shops.

You need to put the tag at the place where you want the search results to be displayed and you may need to create a new <div> wrapper around the default BigCommerce element that shows search results.

  1. Go to the search.html page ([store_url]/admin/designmode.php?ToDo=editFile&File=search.html&f=a)

_If you're using facted search from BigCommerce, please use this search_with_facets.html page or this link ([store_url]/admin/designmode.php?ToDo=editFile&File=search_with_facets.html&f=a)
2. Paste data-findify-attr="findify-search-results" inside the <div> tag that wraps %%Panel.SearchPage%%
3. If there is no wrapper <div>, you should create it yourself and tag it with the tag above

Add JS Script to header

Go to the Findify Integration section of the Merchant Dashboard and copy the script.

  1. Go to the Panels/HTMLHead.html page ([store_url]/admin/designmode.php?ToDo=editFile&File=Panels/HTMLHead.html&f=a)
  2. Paste the script copied from the Merchant Dashboard before the </head> tag

After following these steps the search should be live in your store!


What’s Next