Open navigation

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.

There are different ways to add the custom code you got to your Big Commerce store. In this guide, we have shown you the easiest way.

Please consult with your developer who knows JavaScript and CSS to explore other ways of integrating ready-use templates on your store.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.