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.

Prerequisites

• 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">

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