Manual Theme Modifications for Shopify Preserve Layout

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/klevu-js-v2/2.3.3/klevu.js' }}"></script>

(where 2.3.3 is latest version of the Klevu JavaScript Library)

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 -->
{% include 'klevu-pl-collection' %}
<!-- End klevu-pl-collection -->

<!-- Start klevu-pl-analytics -->
{% include '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 -->
{% include '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.

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:

<!-- 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.