Custom implementations: Coveo for Shopify without the Coveo AI Search & Discovery application

This is for:

Developer

Unless you have a specific reason not to use the Coveo AI Search & Discovery application, we recommend doing so because it handles a lot of the complexity for you, notably regarding indexation and even tracking.

If you don’t want to use the app and would rather create a custom implementation, refer to the generic Coveo for Commerce setup guide. This article provides recommendations to help you carry out such an implementation in the context of Shopify.

Index content

Since Shopify exposes GraphQL endpoints, we recommend using one or more Coveo GraphQL sources to index your catalog products. Enable these GraphQL sources for commerce.

Track events

The Coveo AI Search & Discovery application uses a web pixel to log certain commerce events based on your implementation approach.

If you can’t use the application, you need to implement your own web pixel to track events.

Build commerce interfaces

You have two options for creating a commerce interface without the Coveo AI Search & Discovery application: the Coveo Atomic library and the Coveo Headless library.

Headless is faster and more flexible than Atomic, but requires more development effort.

Coveo Atomic with Shopify Liquid

Atomic is a collection of pre-built UI components meant to quickly create product discovery interfaces. These components are compatible with Shopify Liquid, allowing you to readily integrate them into your Shopify theme. Under the hood, Atomic relies on the Coveo Headless library to interface with Coveo and handle the application state.

Coveo Headless with Shopify Hydrogen

Headless is a Redux-based toolset for developing your own search UI component libraries. It’s compatible with Shopify Hydrogen, allowing you to create a high-performance and customizable search interface.

Whether or not you’re using the Coveo AI Search & Discovery application, the Headless implementation doesn’t change.