Getting Started
Apps/Plug-ins

Shopify

5min



There are two options for implementing the Klevu Template JS on Shopify:

  1. Automated via the Klevu Shopify App (available from the Shopify Marketplace)
  2. Manual implementation of the files into the Shopify Theme

Manual install may be required for the following conditions:

  • Your Shopify Theme has been modified or is otherwise preventing the Klevu App automation
  • You are installing Klevu on a an unpublished theme

Marketplace App (App Embeds & Blocks)

Since Jan 9th, 2024, the Klevu application is no longer able to directly make changes to your theme code, as per Shopify’s guidelines. Instead, this extension utilizes App Embeds and Blocks within the Shopify Theme Editor, giving you more control over the look and feel of Klevu solutions without having to write any code.

Please review the instructions in the Klevu Knowledgebase for Integrating Klevu Solutions in Shopify



Marketplace App

If you integrated your storefront with Klevu before Jan 9th, 2024, all solutions will continue to work as currently without any action required from you, however you will need to either continue managing theme modifications manually or contact our support team to explore if you can move to the App Embeds & Blocks approach.

You can find detailed installation steps on the Klevu Knowledgebase article Integration Steps For Shopify

Once installed, the template JS resources will be available as placed automatically by the Klevu Shopify App.

The following is a summary of automated steps as part of the Klevu Shopify App installation:

  1. Placement of liquid reference files
    • snippets/klevu-quick-search-theme  (core reference, config/options)
    • snippets/klevu-add-to-cart (button functionality)
    • snippets/klevu-catnav-theme (collection core  - if applicable)
    • snippets/klevu-recommendations (recommendations core - if applicable)
    • snippets/klevu-metadata (recommendations support - if applicable)
    • sections/klevu-collection-theme (collection landing page - if applicable)
    • templates/page.klevu-search-results (search landing page template)
  2. Adds core includes of the above files to layout/theme.liquid
  3. Adds settings object or target (Depending on Shopify version)
    • 2.0 (Dawn) : templates/collection.json
    • 1.0 (Debut) : templates/collection.liquid
  4. Authorizes Shopify API for hourly Catalog Synchronization



Manual Installation

If your Shopify Theme has been modified or is otherwise preventing the above automated installation, you can manually install Klevu Template JS using the strategies outlined below, or a variation of it that fits your architecture.

We recommend implementing these steps on an unpublished theme to avoid any unforeseen conflicts with the live site.

The Klevu Shopify App will still need to be installed to facilitate the catalog indexing. However, on Step 9 of the Klevu Knowledgebase article Integration Steps For Shopify , leave the "Klevu Solutions" marked as "disabled".

The steps as outlined in the Quickstart : Smart Search can be applied as you like into the Shopify theme files.

Alternatively, please reference the complete technical walkthrough if you would like to mirror the Klevu App's default installation procedure.

Klevu Smart Recommendations integration options are covered in the Knowledgebase guide: Smart Recommendations Integration Guide for Shopify