{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"NOTE ","type":"text","marks":[{"type":"strong"}]},{"text":"- Requires Web Development expertise","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"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. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Hawksearch by default uses the ","type":"text"},{"text":"JavaScript client-side integration","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"/wiki/spaces/HSKB/pages/3462485343"}}]},{"text":" to power the search page for Bigcommerce sites. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Once the app is installed and approved, the search and autocomplete feature from Hawksearch are turned on by default. ","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Update Theme Files","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"The default theme’s","type":"text"},{"text":" category.html","type":"text","marks":[{"type":"strong"}]},{"text":" template will need to be customized to allow for results from Hawksearch to display properly and power the category pages from Big Commerce. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The DIVs will be initially empty, but the inner HTML of these div tags will be injected automatically by Hawksearch on page render.","type":"text"}]},{"type":"paragraph","content":[{"text":"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).","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"templates > pages > category.html","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"Replace the HTML between ","type":"text"},{"text":"{{#partial \"page\"}}","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"{{/partial}}","type":"text","marks":[{"type":"code"}]},{"text":" with the following code: ","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" \n

\n \n

","type":"text"}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"You can also add this HTML to your theme files without running your theme locally via the BigCommerce Storefront section.","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":20.0},"content":[{"type":"media","attrs":{"width":557,"id":"b05a440c-4b8f-4d65-a72f-b51a4a2ba291","collection":"contentId-3468468937","type":"file","height":441}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"On the Edit Theme Files page, navigate to the category.html template: ","type":"text"},{"text":"templates > pages > category.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"In the template file, replace the HTML between ","type":"text"},{"text":"{{#partial \"page\"}}","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"{{/partial}}","type":"text","marks":[{"type":"code"}]},{"text":" with the following code:","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" \n

\n \n

","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"hardBreak"},{"text":"Following are the functions of the ","type":"text"},{"text":"div","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":" tags:","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"

Browser not supported