Implementing CLS Improvements on Legacy Integrations

If your site has integrated Klevu manually, or via the application before January 2024, the template changes exist within the template code directly, as opposed to using Theme App blocks within the Theme Customiser.

In such cases, the features to improve your Cumulative Layout Shift scores in Google Web Vitals will not be available automatically and will need to be added manually by yourself or your developer.

Option 1 : Load Footer after Klevu Search Results

Apply CSS Styling to Hide Elements

Add the following CSS to your site’s stylesheet, including selectors for all elements which need to be hidden on page load. If you cannot add to the stylesheet, you can alternatively add these styles to the template we will be creating in the next step.

If you are hiding multiple elements on the same or different pages, you can include them all in the same list.

{selector}:not(.klevuFinishLoading),
{selector}:not(.klevuFinishLoading) {
    display: none !important;
}

For example, in most Shopify themes, the footer is identified by .shopify-section-group-footer-group or #shopify-section-footer (depending on the base theme and version used to develop your theme). So you would use 

.shopify-section-group-footer-group:not(.klevuFinishLoading) {
    display: none !important;
}

#shopify-section-footer:not(.klevuFinishLoading) {
    display: none !important;
}

Add JavaScript to Bring Back Elements

Next, create the template snippets/klevu-hide-footer.liquid containing the following content

<script>
    // 3000 is the number of milliseconds to wait for a response from Klevu before bringing back the footer automatically
    const klevuBringBackFooter = setTimeout(klevuBringBackFooterTimeout, 3000);
    function klevuBringBackFooterTimeout() {
        klevuBringBackFooterFunction();
        clearTimeout(klevuBringBackFooter);
    }
    
    function klevuBringBackFooterFunction() {
        // Add selectors of all elements to be reinstated below. These should match the hidden
        //  elements as targetted by CSS _without_ the :not() pseudo-selector
        let hideFooterElements = document.querySelectorAll("{selector},{selector}");
        let hideFooterElementIndex = 0;
        while (hideFooterElementIndex < hideFooterElements.length) {
            hideFooterElements[hideFooterElementIndex].classList.add("klevuFinishLoading");
            hideFooterElementIndex++;
        }
    }
    
    // Ensure elements are reinstated after a response from Klevu
    window._klvWebhook = window._klvWebhook || [];
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.success",
        action: "after",
        fire: function(data, scope) {
            clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
    window._klvWebhook.push({
        object: "search",
        scope: "full_page",
        name: "chains.response.fail",
        action: "after",
        fire: function(data,scope) {
           clearTimeout(klevuBringBackFooter);
            klevuBringBackFooterFunction();
        }
    });
</script>

In most Shopify themes, the selector (Line 12) should read as

        let hideFooterElements = document.querySelectorAll(".shopify-section-group-footer-group");

        let hideFooterElements = document.querySelectorAll("#shopify-section-footer");

Output JavaScript on your Site

Open the template snippets/klevu-quick-search-theme.liquid and render the new hide-footer template within the template check

<!-- Content omitted for brevity -->

{% if template == 'page.klevu-search-results' %}
    <!-- Include Search Results Landing Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/landing-page-theme.js"></script>
    <!-- Hide site footer while search results are loading -->
    {% render 'klevu-hide-footer' %}
{% endif %}

If you are using Smart Category Merchandising, you will also need to render this JavaScript on your collection pages.

Edit snippets/klevu-catnav-theme.liquid and render the new hide-footer template within the template check

{% if template == 'collection'%}
    <!-- Include Category Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/catnav-theme.js"></script>
    <script type="text/javascript">
      var klevu_pageCategory = "{{ collection.title | strip_newlines | replace: "\\", "\\\\" | replace: '"', '\\"' }}";
      sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
    </script>

    <!-- Hide site footer while collection results are loading -->
    {% render 'klevu-hide-footer' %}
{% endif %}

Save your theme and the site footer should now be hidden on page load and reinstated after Klevu returns and renders a product list.

Option 2 : Apply a Minimum Height to the Klevu Results Element

If you do not want to hide your site footer, you can mitigate some of the impact of CLS by setting a minimum height on the HTML element into which Klevu results are injected. 

First, determine an appropriate minimum height by performing a query on your website and inspecting the height of the .klevuLanding div after results have loaded. You should do this after performing a search that returns at least a full page of results in order to see the maximum height this element is likely to be.

Next, add a minimum height to the element in your CSS stylesheet. The code should look something like

   .klevuLanding {
    min-height: 1400px;
}