Integrating Search Template in BigCommerce

This guide describes the steps to integrate ready-to-use Search templates into your BigCommerce store. Click here to learn about Search Templates.

Adding the Klevu Search template to your BigCommerce store is very easy. Just copy a few lines of code you downloaded and paste them in using the simplest method outlined in this guide.

Prerequisites

• You have Klevu’s BigCommerce app installed and Klevu is integrated on the storefront.
• Template JS must be integrated into your theme. (If your theme files are different, please contact support.)
• You have the downloaded ZIP file of the template(s) code from KMC.

Integrating ready-to-use templates in BigCommerce

Step 1: Navigate to the admin panel and click on Storefront.

Step 2: Select Script Manager

Step 3: Click on the Create a script button.

Step 4: Provide a name for the script. Set the Placement to Footer, Location to Storefront pages, and Script category to Essential.

Step 5: Set the Script type to Script. This will open a text area called Script contents where you'll copy the downloaded code.

Step 6: Start by adding an opening <script> tag at the beginning.

Step 7: Copy the code from the downloaded .css file. Since the Script Manager is for JavaScript code, wrap this code for CSS use. Paste it after the opening <script> tag:

var klevu_style = document.createElement("style");
klevu_style.textContent = `

Step 8: Open the downloaded .css file in a text editor, copy its code, and paste it directly after the above code.

Step 9: Copy and paste the following code after the .css code:

`;
document.head.appendChild(klevu_style);

Step 10: Open the downloaded .js file in a text editor, copy its code, and paste it directly after the CSS code.

Step 11: Finally, add a closing </script> tag at the very end.

Step 12: Once all the code is added, click the Save button.