This guide walks you through the integration of ready-to-use design templates for Quick Search(QS), Search Result Landing Page(SRLP), and Category Pages using our new templates. These templates help you to easily create a discovery experience that blends seamlessly with your website's look and feel.
How to Preview and Download a Specific Search Template and Integrate into Your Store?
Step 1: Navigate to Smart Search → Templates → Choose Template
Step 2: Choose which templates you’d like to select & preview:
- Search-as-you-type (Quick Search) & Search Landing Page Both
- Only Search-as-you-type (Quick Search)
- Only Search Landing Pages
Step 3: Choose the search-as-you-type (quick search) template and click on “Continue”. Feel free to see a static preview of each template by hovering and clicking the eye icon. The chips/features can help you pick the best template as desired. Once chosen, click on continue.
Step 4: Similarly, choose a template for the search results page and click on continue.
Step 5: Use template for Category/Collection page: If you have subscribed to Smart Category Merchandising, and wish to use the results page template for category/collection pages, you can set it here. By default, this checkbox is pre-selected. If you prefer only to use the template for the search results page, please ensure that you de-select the checkbox.
Step 6: Click on Preview to continue.
Step 7: See a live preview of your selected templates with your store’s catalog.
Step 8: Based on the selection in step 2, you can preview the different templates for various sections.
Step 9: Previewing Search-As-You Type Layout (Quick Search)
Use the search box to preview the selected quick search template. Please note that the preview will consider customizations as set in Smart Search → Customizations* for the current store.
Step 10: Previewing Search Results Page
Enter a keyword in the search box and hit enter/return to see a preview of the search results page template.
Step 11: You can also preview the template for a category or see a mobile preview using the options in the header.
Step 12: Once you have reviewed the template, simply click on the DOWNLOAD CODE button, which will save a ZIP file containing the chosen templates' code (JavaScript, Template, CSS, and a ReadMe file).
Step 13: You will also see steps on how to integrate the downloaded template files into your store. Please note that the steps will differ based on your store’s e-commerce platform. See links below
Platform-wise Integration Steps:
- Integrating search templates on Shopify store
- Integrating search templates on BigCommerce store
- Integrating search templates on Magento 2 store
- Integrating search templates for other/custom stores
FAQs
Can the downloaded template be customized further?
Yes, you have the flexibility to customize the downloaded code as per your requirements. You can make modifications to both the downloaded JS and CSS files
Does changing the template affect site speed?
Please follow to our platform-specific guidelines for integrating quick search and search/category landing page templates to ensure optimal site speed. Contact our support team if you have questions about this.
I am using the Preserve Layout feature for Search Results & Category Pages. Can I use ready-to-use templates?
You can not integrate ready-to-use templates. if you are using the Preserve Layout feature. Ready-to-use template will only work if you are using a Klevu-powered Search Result and Category Landing page.
I am not using Klevu Template JS version 2 (JSv2), what are my options?
We suggest upgrading to our newest Klevu Template JS v2 (JSv2) for seamless integration of Search Templates. Contact our support team for further assistance. If you have implemented Klevu solutions through APIs, you have the freedom to customize your storefront to meet your specific needs. For guidance on utilizing our Storefront APIs/SDK, please refer to our Dev Docs.
How do I add the compare products feature in a template where it’s not available?
To add the compare products feature to a template where it's not available, you can include the necessary code by integrating it using the customization code available from our dev docs.
How do I select attributes that I wish to use in the compare products template?
In the JS file, find the section "Compare feature", and locate the KEYS_TO_COMPARE object. Here you can add the attributes (keys) that you wish to compare. For a list of attribute keys, you can refer to Smart Search → Customizations → Facets → Attributes).
Can I completely replace an already integrated template?
Yes, If you decide to use a different template, simply visit the KMC, choose the new template(s), download it, and replace the code on your store’s platform. If you have made further customizations to your templates, we recommend that you reach out to our support team before replacing templates.
Which settings from Customizations within the Klevu Merchant Center (KMC) are supported in ready-to-use templates?
All settings configured under Smart Search → Customization are applicable for ready-to-use templates except for the Search-as-you-type layout and Facet position, as these are explicitly defined within each ready-to-use template.