Since Jan 9th, 2024, the Klevu application is no longer able to directly make changes to your theme code, as per Shopify’s guidelines. Instead, this extension utilizes App Embeds and Blocks within the Shopify Theme Editor, giving you more control over the look and feel of Klevu solutions without having to write any code.
If you prefer to make theme modifications at a code level, you are still able to do so manually by following the legacy integration instructions here.
Contacting support is recommended if you have made any customisations to the Klevu theme.
Theme List Screen
Selecting Integrate from the application’s home page will take you to a list of all themes currently installed in your store - published or unpublished - showing whether Klevu is, or is able to be, integrated using App Embeds at time of page load.
Integration
After selecting a theme, the Klevu extension will scan your site’s templates and present actions based upon its findings. These actions are split into two sections - Configure Klevu Solutions and Embed Klevu Solution Blocks.
Please contact our support team to assist with this process.
Updates made to your theme within the Shopify Theme Editor are not communicated back to the Klevu application. To see the effect of changes, you will need to refresh this screen after saving files in your theme.
Configure Klevu Solutions
The first section, containing only the Embed Klevu JS option, manages required global configuration. This includes
- Embedding the core Klevu JavaScript library.
- Embedding any additional Klevu JavaScript files based upon selected solutions, including Quick Search; Smart Search; Smart Category Merchandising; and Smart Recommendations.
- Initializing embedded Klevu solutions, using the API Key you entered when installing the application.
This step is required to enable any Klevu feature and, as such, Embed Klevu Solutions Blocks options will not be available until core Klevu JS is embedded.
Click Embed to open the Shopify Theme Editor in a new tab. This will enable the Klevu Javascript block for the selected theme and present you with the following options to configure.
Note: you must save your theme before your changes will be available to view on the storefront.
- Javascript for Quick Search
Selecting this option will enable Klevu’s quick search suggestions in your native search box. Your theme may already have search suggestions which will need to be disabled independently. These can often be managed in the Theme Editor under Sections > Header > Header > Theme Settings > Enable search suggestions - Javascript for Smart Category Merchandising
Selecting this option will embed the required JavaScript for Smart Category Merchandising on all collection pages.
Selecting this option will not replace your category content - you will still need to embed the Collection Results block under Embed Klevu Solution Blocks > Smart Category Merchandising - Javascript for Smart Recommendations
Selecting this option will embed the required JavaScript for Smart Recommendations on all pages
Selecting this option will not add any banner blocks - you will still need to embed banners in your theme and/or content independently - Search Results Landing Page
Enter the URL (without the domain) on which you have embedded the Klevu Search Results block.This URL will be used by Quick Search (if enabled) to redirect search queries. - Wait for Interactive
When selected, the Klevu initialisation call will be wrapped in klevu.interactive to delay processing until the page has completed loading.
As the Klevu core libraries have deferred loading, this settings should not be required in most cases
If you have already enabled the Klevu Javascript App Embed, you will find a summary of pertinent settings, as well as a link to modify the configuration in your Theme Editor.
Embed Klevu Solution Blocks
Smart Search
This section will check the native Search template in your theme for the presence of the Klevu Search Results block required to display Klevu-powered search results.
Options are available once Klevu Javascript has been embedded.
Click Embed to open the Shopify Theme Editor in a new tab. This will add the Klevu Search Results block to a new Apps section in the main body of your Search template. Clicking the block name will allow you to add an optional page title before the search results listing.
You will also need to disable the native Search results section by toggling its visibility.
Optionally, you can add other content blocks before and/or after the Klevu Search Results output.
Note: you must save your theme before your changes will be available to view on the storefront
Once you have embedded search results in your theme, refresh the integration screen to update the solution status.
Commonly, this will be because you have migrated from the legacy integration method and are using a CMS page to serve search results. In this instance, you will need to manually embed the Klevu Search Results block on the applicable page template.
If you are integrating on a route which uses neither the search nor a page template, the app block will not be available to embed. In this scenario, please reach out for advice via our Community Forum.
Smart Category Merchandising
If you have subscribed to our Smart Category Merchandising solution, you will be able to replace your collection page content with Klevu-powered listings.
Options are available once Klevu Javascript has been embedded.
The Category Merchandising JS status relates to the Embed Klevu JS > Javascript for Smart Category Merchandising setting.
This must be enabled in order to use Smart Category Merchandising - embedding the results block without it will cause your collections to render empty page content.
Click Embed next to Klevu Collection Results Block to open the Shopify Theme Editor in a new tab. This will add the Klevu Collection Results block to a new Apps section in the main body of your Default Collection template.
You will also need to disable the native Product grid section by toggling its visibility.
Optionally, you can add other content blocks before and/or after the Klevu Collection Results output.
Note: you must save your theme before your changes will be available to view on the storefront.
If you create a new collection template from a template which is integrated, the Klevu Collection Results will also be present in the new template.
Note: the application will currently show only the status of the Default Collection template in the Integration screen.
Once you have embedded collection results in your theme, refresh the integration screen to update the solution status.
Smart Recommendations
If you have subscribed to our Smart Recommendations solution, you will be able to embed Recommendations Banners directly into templates in addition to dropping HTML code into content areas.
Options are available once Klevu Javascript has been embedded.
The Recommendations JS status relates to the Embed Klevu JS > Javascript for Smart Recommendations setting
This must be enabled in order to render Smart Recommendations banners anywhere on your storefront.
Click Add Block next to the relevant template to open the Shopify Theme Editor in a new tab. This will add a Klevu Recommendations block within the Template section.
Where a page type has multiple templates available (eg Product and Collection pages), the Theme Editor will be opened on the default template for that page; you will need to change the template and manually add blocks to these alternatives.
Click the block name to enter the desired Banner ID, as found in Klevu Merchant Center under Smart Recommendations > Recommendations.
Note: this is just the banner ID, not the complete HTML snippet.
You can manually add Klevu Recommendations blocks to any other template not listed in the Integration section, however only Home Page type blocks are guaranteed to function as expected on these page types.
Embedding banners within the Header or Footer sections of a template will cause the banner to render on every page of your website, as these sections are global in Shopify themes.
Note: you must save your theme before your changes will be available to view on the storefront.
Due to the nature of Recommendations Banners, the integration screen will not show the embedded status for these blocks and will allow you to continue adding to pages which already have blocks embedded.