...
This step is only required if you are leveraging Hawksearch for category pages or browse pages. If you are using Hawksearch to replace the BigCommerce search only, the following steps do not need to be completed.
Hawksearch by default uses the JavaScript client-side integration to power the search page for Bigcommerce sites.
Once the app is installed and approved, the search and autocomplete feature from Hawksearch are turned on by default.
However, to turn on drive the category products listing feature from Hawksearchthrough Hawksearch for even on other pages ono your site - such as landing pages that are based on categories or brands, the steps below are required to be completed on your admin portal.
Update Theme Files
The default theme’s category.html template will need to be customized to allow for results from Hawksearch to display properly and power the category pages from Big Commerce.
...
If you have your BigCommerce storefront theme running locally, simply open the following file in your text editor of choice if you’re running your storefront locally, or by the theme editor section in the control panel (instructions follow).
templates > pages > category.html
Replace the HTML between {{#partial "page"}} and {{/partial}} with the following code:
| Code Block | ||
|---|---|---|
| ||
<style>
.sitebody, .hawkmpp, .hawksortby, .hawk-guidedNavWrapper .hawk-groupHeading, .hawk-guidedNavWrapper .hawk-navGroup li a { color: #000; }
</style>
<div class="page">
<aside class="page-sidebar">
<div id="hawkbannerlefttop"></div>
<div id="hawkfacets"></div>
<div id="hawkbannerleftbottom"></div>
</aside>
<main class="page-content">
<div id="hawkbreadcrumb"></div>
<div id="hawkpagecustomhtml"></div>
<div id="hawktitle"></div>
<div id="hawkbannertop"></div>
<div id="hawktoptext"></div>
<div id="hawkrelated"></div>
<div id="hawktabs"></div>
<div id="hawktoppager"></div>
<div id="hawkitemlist"></div>
<div id="hawkbottompager"></div>
<div id="hawkbannerbottom"></div>
<div id="hawkbannerbottom2"></div>
<div id="hawkfirstitem"></div>
<div id="hawklastitem"></div>
<div id="hawkexplain"></div>
<div id="hawksmartbug"></div>
</main>
</div> |
...
| Code Block | ||
|---|---|---|
| ||
<style>
.sitebody, .hawkmpp, .hawksortby, .hawk-guidedNavWrapper .hawk-groupHeading, .hawk-guidedNavWrapper .hawk-navGroup li a { color: #000; }
</style>
<div class="page">
<aside class="page-sidebar">
<div id="hawkbannerlefttop"></div>
<div id="hawkfacets"></div>
<div id="hawkbannerleftbottom"></div>
</aside>
<main class="page-content">
<div id="hawkbreadcrumb"></div>
<div id="hawkpagecustomhtml"></div>
<div id="hawktitle"></div>
<div id="hawkbannertop"></div>
<div id="hawktoptext"></div>
<div id="hawkrelated"></div>
<div id="hawktabs"></div>
<div id="hawktoppager"></div>
<div id="hawkitemlist"></div>
<div id="hawkbottompager"></div>
<div id="hawkbannerbottom"></div>
<div id="hawkbannerbottom2"></div>
<div id="hawkfirstitem"></div>
<div id="hawklastitem"></div>
<div id="hawkexplain"></div>
<div id="hawksmartbug"></div>
</main>
</div> |
...