Custom implementations: Get started without using the Coveo app for Shopify

This is for:

Developer

Unless you have a specific reason not to use the Coveo AI Search & Discovery app, 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

You’ll need to create one or more sources to index your catalog data.

Create the following:

  • One tracking ID and property per Shopify market.

  • One source per market and language combination. You should only index using the main market currency, so that you don’t create unnecessary sources.

  • One storefront association per market and country combination. This lets you target each country with a specific commerce experience, without creating unnecessary sources.

Indexing example

You have one market in Europe, where you sell to French, Belgian, Italian, Austrian, and German customers. In total, there are five countries and three languages, all using the Euro as currency.

  • Create one tracking ID for the European market: market_eu. Also create the Europe property to register the market_eu tracking ID.

  • Create one source for each language:

    • products_eu_fr for French-speaking customers

    • products_eu_it for Italian-speaking customers

    • products_eu_de for German-speaking customers

  • Create one storefront association for each country:

Property Tracking ID Locale Catalog source

Europe

market_eu

fr-FR-EUR

products_eu_fr

Europe

market_eu

be-FR-EUR

products_eu_fr

Europe

market_eu

it-IT-EUR

products_eu_it

Europe

market_eu

de-DE-EUR

products_eu_de

Europe

market_eu

at-DE-EUR

products_eu_de

With these five storefront associations, you can target all five countries with a specific commerce experience while only creating three sources.

Track events

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

If you can’t use the app, 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 app: 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.

See Build Atomic commerce interfaces in a Shopify store without the Coveo AI Search & Discovery app.

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 app, the Headless implementation doesn’t change.

See Build product discovery interfaces with Coveo Headless and Shopify Hydrogen.