NOTE - Requires Web Development expertise

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 drive the products listing feature through 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.

The DIVs will be initially empty, but the inner HTML of these div tags will be injected automatically by Hawksearch on page render.

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:

    <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>

You can also add this HTML to your theme files without running your theme locally via the BigCommerce Storefront section.

Navigate to your BigCommerce control panel and select “Storefront” from the left menu. On that menu, select “My Themes”. On the My Themes page, click the “Advanced” button that appears on your Current Theme and then select “Edit Theme Files” from the dropdown:

On the Edit Theme Files page, navigate to the category.html template: templates > pages > category.html

In the template file, replace the HTML between {{#partial "page"}} and {{/partial}} with the following code:

    <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>

Following are the functions of the div tags:

<div id="hawkbannerlefttop"></div>

This <DIV> represents a placeholder for the banner above the navigation area on the page.

<div id="hawkbannerleftbottom"></div>

This <DIV> represents a placeholder for the banner below the navigation area on the page.

<div id="hawkbannertop"></div>

This <DIV> represents a placeholder for the banner in the main search area usually placed above the search results.

<div id="hawkfacets"></div>

This <DIV> represents a placeholder for the narrow by or the facets area on the page. The facets will be used to narrow down the search results and the layout of each facet list can be controlled by logging into the administration area of the website.

<div id="hawkbreadcrumb"></div>

This <DIV> represents a placeholder for the area on the page where the breadcrumb for the search page will be inserted.

<div id="hawkpagecustomhtml"></div>

This <DIV> is used as a container for content from Custom HTML field from the Landing Pages.

<div id="hawktoptext"></div>

This <DIV> represents a placeholder on the page where custom messages for events such as spell checking suggestions, expanding the search to perform the "OR" operation will be displayed. This should be usually placed above the search results on the page.

<div id="hawktabs"></div>

This <DIV> represents a placeholder on the page where tabs could be utilized, if needed.

<div id="hawktoppager"></div>

This <DIV> represents the area on the page where the paging, sorting links and other options for the search will be displayed. This should be usually placed above the search results on the page.

<div id="hawkitemlist"></div>

This <DIV> represents the area on the page where the search results (including tabs for content, product or any custom searches) will display.

<div id="hawkbottompager"></div>

This <DIV> represents the area on the page where the paging, sorting links and other options for the search will be displayed. This should be usually placed below the search results on the page.

<div id="hawkbannerbottom" ></div>

This <DIV> represents a placeholder for the banner in the main search area usually placed below the search results.

<div id="hawkbannerbottom2" ></div>

This <DIV> represents a placeholder for the banner in the main search area usually placed below the search results and below 'hawkbannerbottom'.

Connectors

Installing Category Pages

Update Theme Files

templates > pages > category.html

Following are the functions of the div tags: