The below guide is retained for reference, though 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 which 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 with the trends of your website.
The following elements are attempted automatically during the installation process, however Shopify themes can vary a great deal so these templates are not always available. In that scenario, you can follow the below instructions 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 <head/> 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.
<!-- Start klevu-pl-collection -->
{% section 'klevu-pl-collection' %}
<!-- End klevu-pl-collection -->
<!-- Start klevu-pl-analytics -->
{% section 'klevu-pl-analytics' %}
<!-- End 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:
<!-- Start klevu-pl-product -->
{% include 'klevu-pl-product', product: product %}
<!-- End klevu-pl-product -->
<!-- Start klevu-pl-analytics -->
{% section 'klevu-pl-analytics' %}
<!-- End 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 which 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 which handle product cell rendering, you must manually add the following snippet to ensure Klevu can extract the product information required for analytics calls.
{% 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:
<!-- Start klevu-pl-collection-product -->
{% include 'klevu-pl-collection-product', product: product %}
<!-- End klevu-pl-collection-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.