Implementing CLS Improvements on Legacy Integrations

If your site integrated Klevu manually or via the application before January 2024, the template changes live directly inside your theme code (rather than using Theme App Blocks in the Theme Customiser).
In such cases, CLS improvements in Google Web Vitals aren’t automatic — you must add them manually.

You’ll need theme-code access
Go to: Sales Channels → Online Store → Themes → … → Edit Code
Always test on an unpublished theme first.

Option 1 — Hide the Footer Until Klevu Results Load (Recommended)

1️⃣ Add CSS to Hide Elements by Default

Add this CSS to your site’s stylesheet (or temporarily inside the snippet you’ll create next).
Include all selectors you want hidden on initial page load.

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

Examples (Shopify footers):

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

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

This hides the footer on page load and reveals it only once the .klevuFinishLoading class is added.
Hiding purely via JavaScript can cause a visible flash and hurt your CLS score.

2️⃣ Create a Snippet to Bring Elements Back

Create snippets/klevu-hide-footer.liquid with the following content:

<script>
// 3000 = milliseconds to wait before restoring the footer if Klevu hasn’t responded
const klevuBringBackFooter = setTimeout(klevuBringBackFooterTimeout, 3000);

function klevuBringBackFooterTimeout() {
  klevuBringBackFooterFunction();
  clearTimeout(klevuBringBackFooter);
}

function klevuBringBackFooterFunction() {
  // Add selectors of ALL elements to reinstate (same as in CSS, but WITHOUT :not())
  let hideFooterElements = document.querySelectorAll("{selector},{selector}");
  let hideFooterElementIndex = 0;

  while (hideFooterElementIndex < hideFooterElements.length) {
    hideFooterElements[hideFooterElementIndex].classList.add("klevuFinishLoading");
    hideFooterElementIndex++;
  }
}

// Re-show elements after a Klevu response
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>

Selector examples (line with querySelectorAll)

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

💡 If you can’t modify your stylesheet, include a
<style>...</style> block containing the CSS above inside this snippet.
(Escape tags as shown so Zendesk doesn’t strip them.)

3️⃣ Output the JS on Search Results Page

Open snippets/klevu-quick-search-theme.liquid and render the new snippet inside your template check:

{%- comment -%} Content omitted for brevity {%- endcomment -%}
{% if template == 'page.klevu-search-results' %}
  <!-- Include Search Results Landing Page Theme -->
  &lt;script src="https://js.klevu.com/theme/default/v2/landing-page-theme.js"&gt;&lt;/script&gt;

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

If you also use Smart Category Merchandising, edit snippets/klevu-catnav-theme.liquid likewise:

{% if template == 'collection' %}
  <!-- Include Category Page Theme -->
  &lt;script src="https://js.klevu.com/theme/default/v2/catnav-theme.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript"&gt;
    var klevu_pageCategory = "{{ collection.title | strip_newlines | replace: "\\", "\\\\" | replace: '"', '\\"' }}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
  &lt;/script&gt;

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

✅ Now the footer hides on load and reappears once Klevu has rendered results (or after timeout).

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

If you prefer not to hide the footer, you can reduce layout shift by reserving space for results.

1. Perform a full-results search and inspect the height of .klevuLanding after load.
2. Add this to your stylesheet:

.klevuLanding {
  min-height: 1400px;
}

Adjust the value for your layout and most common devices.

✅ Summary

🔍 Quick Checklist

• CSS hides elements via :not(.klevuFinishLoading)
• JS reinstates elements after Klevu response or timeout
• Snippet rendered on Search and Collection templates
• Validated with Core Web Vitals tools