Open navigation

Integrating Search Template in Shopify

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

Adding the Klevu Search template to your Shopify 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.


  • You have Klevu’s Shopify app installed and Klevu is integrated on the storefront.
  • Template JS must be integrated into the OS 2.0 Themes (e.g. Dawn or Spotlight).

    If you are not using OS 2.0 themes, please contact support.

  • You have the downloaded ZIP file of the template(s) code from KMC.

Integrating ready-to-use template in Shopify

Step 1: In your Shopify admin, from the left side panel, select Sales channels → Online Store

Step 2: On the Shopify theme where you wish to integrate the ready-to-use search template, click the ellipses (•••) button to access the dropdown menu and select Edit Code.

Step 3: Scroll down and select the Assets folder.

Step 4: Click on the Add a new asset.

Step 5: A dialog will appear; drag in the .css file you downloaded (e.g., klevu-theme-earth_essence.css) and click Done.

Step 6: Repeat the process to upload the JS file (e.g. klevu-theme-earth_essence.js), then click Done.

Step 7: Scroll back to the top of the files list and under Layout folder, click theme.liquid to open it in the editor window.

Step 8: Scroll to the bottom of the theme.liquid file, and just before the closing body tag </body>, paste the following lines:

<script src="{{ 'klevu-theme-hazel_bloom.js' | asset_url}}" defer></script>
<link href="{{ 'klevu-theme-hazel_bloom.css' | asset_url}}" rel="stylesheet">
Note: Ensure to update the file name in the provided code snippet according to the assigned file name in the asset folder.

Step 9: Click the Save button at the top-right corner of the editor window to save your changes.

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

Please consult with your developer who has knowledge of 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.