This guide applies to legacy Shopify themes and the Preserve Layout theme option, neither of which has been supported natively by the Klevu App since January 9th, 2024.
The guide below is retained for reference, though it should no longer be considered definitive. If you need to make changes to Klevu in relation to either a legacy Shopify theme or the Preserve Layout option, please contact our support team, who will be able to guide you through the process.
Before making any changes to your theme, published or unpublished, you should take a full backup.
The Preserve Shopify Theme option retains the look and feel of your own theme and does not require any modifications for the most part. There are, however, certain elements that must be included to ensure that the necessary Analytics calls are sent to Klevu. This is vital for Klevu AI and Machine Learning to ensure your catalog adapts to the trends of your website.
The following elements are attempted automatically during the installation process. Shopify themes can vary a great deal, so these templates are not always available. In that scenario, you can follow the instructions below to ensure all of the templates of your theme have been updated accordingly.
theme.liquid
We will first search for existence of Klevu JS Library, and won't make any changes if we already find it. Otherwise, we will add the following to the section of this template:
<script src="{{ '//js.klevu.com/core/v2/klevu.js' }}"></script>collection.liquid
We add the following to the bottom of this template, so we can detect when a customer is browsing a category for sending necessary analytics calls to Klevu.
{% section 'klevu-pl-collection' %}
{% section 'klevu-pl-analytics' %}
product.liquid
We add the following to the bottom of this template, so we can detect when a product has been clicked on from a category page, and send the necessary analytics calls to Klevu:
{% include 'klevu-pl-product', product: product %}
{% section 'klevu-pl-analytics' %}
product-card-grid.liquid / product-card-list.liquid
Finally, we must extract some information from the list of products being rendered. We do this by modifying the templates that render an individual product cell on your collection pages. Klevu will do this automatically for most themes, but in case it fails, please see the information below. If you have additional or alternative templates that handle product cell rendering, you must manually add the following snippet to ensure Klevu can extract the product information required for analytics calls.
To find which template files your theme uses, navigate to templates/collection.liquid and check what section or snippet is included. Keep following the inclusions until you see some code that iterates the product and includes a template similar to this:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
Once you have that name, in this case product-card-grid, edit that same liquid template file and add the following snippet to the bottom of the file:
{% include 'klevu-pl-collection-product', product: product %}
Please repeat this process for every type of Collection product cell in your theme, for example, product-card-grid, product-card-list, etc.
Other files
There are certain templates that Klevu will automatically insert into your theme, but if, for any reason, they are not present, or you are following a manual approach, the following files should be added to your Shopify theme as new Snippets.