This guide describes the steps to integrate ready-to-use Search templates in your store. Click here to learn about Search Templates.
Prerequisites
- You have Klevu’s app installed and Klevu is integrated on the storefront.
- Template JS must be integrated into your store.(If your theme files are different, please contact support.)
Before moving ahead, make sure that you’ve access to the host and know how to modify the code to ingest the custom template’s code.
Steps for adding Klevu Customization to your store
Template package you downloaded from KMC includes the following three files.
- JavaScript File (.js) → With required JavaScrip code
- CSS File (.css) → With all necessary styling code.
- Readme File → It contains the same steps to add the Klevu template customization code to your store.
There are two ways to add code to your store :
- Host the .css and .js files, and include them into your store.
- Copy the code within the .css file and .js files into your store’s code.
Method 1: Hosting the files
If you are hosting the files, you will need a URL for each file. Using this URL you can add the following code within the <head> tag of your store :
<link href="URL_TO_THE_CSS_FILE_GOES_HERE" rel="stylesheet">And you will add this code right before the closing </body> tag of your store:
<script src="URL_TO_THE_JS_FILE_GOES_HERE"></script>Method 2: Copying the code directly into your store’s code
If you are copying the code directly into your store’s code, you can open the code within the .css file in a text editor, select all of the code, copy it, and then paste it into the <head> tag of your store surrounded by an opening and closing <style> tag like this :
<style>
CODE_FROM_THE_CSS_FILE_GOES_HERE
</style>Likewise, open the .js file in a text editor, select all of the code, copy it, then paste it right before the closing </body> tag of your store surrounded by an opening and closing <script> tag like this:
<script>
CODE_FROM_THE_JS_FILE_GOES_HERE
</script>