Shopify 2.0 (Dawn Theme)

For integrating Search and Quick Search, our App utilises a custom page “Search Results” for the landing page, and for Quick Search we use the Shopify API to inject klevuScript.js into the head of the document. This approach still works even with Dawn theme, therefore you can continue using this approach for integrating search and quick search.

For Category Merchandising, some of the theme files we need to modify no longer exist in the new Dawn theme, and may also not exist in your Shopify 2.0 theme, so you will need to take some manual steps as highlighted below.

The integration steps for Recommendations remain as documented manual steps where you will be modifying the theme.liquid of your theme, which remains available even in Shopify 2.0 themes.

Collection Pages with Klevu JS Theme

When enabling Klevu JS Theme, our App will attempt to override the collection.liquid template, which no longer exists in Dawn theme, so you will see an error message. Instead, you will need to follow some manual steps.

Go to your Online Store > Themes and select Customize for your active theme. Use the dropdown at the top of the next screen to navigate to your Collections template. On the left hand side of this page you will see a “Product Grid” block, which we will be replacing, so click on the eyeball to disable it.

Next, please add a new section of type “Custom Liquid” and drag it immediately underneath this disabled product grid. Into the content of this new section you will need to add some HTML content, which will vary depending on the version of Klevu theme you are using (if you are not sure, please contact support).

• For legacy theme customers (those who have klevuScript.js included in your store).
  Please download this ZIP file, which contains the HTML content needed to render a Klevu collection page, and open up in a file editor ready to copy and paste. This will be used later on to copy into a custom section within your Dawn theme.
• For new theme customers (those who installed Klevu Shopify App after 29th September 2021).
  Please add the following content:

  <div class="klevuLanding"></div>

The result should look something like this, with product grid disabled and our new custom block below:

Save your changes, visit a collection page of your frontend and you should see Klevu Search powered collection pages in your Shopify 2.0 theme.

Collection Pages with Preserve Shopify Theme

When using Preserve Layout for collection pages, we need to make some changes to your theme to ensure Klevu analytics works as expected for our machine learning algorithm.

The files that we would normally need to modify are not available in the Dawn theme, so you will need to follow the manual integration steps highlighted in this guide . There are a number of areas of your theme you will need to modify, referenced in this guide.

The Shopify best practices dictate that you create a “Custom Liquid” block for each element, along the same lines as we mentioned in the Klevu JS Theme section above, but you may prefer to directly modify your theme’s liquid files directly.

Once you have completed the steps in that guide, it is recommended you contact Klevu Support to double check that the analytics is working as expected.