N4N1T0

Posted on May 20

Search and AI: The Dream Team for an eCommerce Revenue Boost

#webdev #elasticsearch #javascript #nextjs

🧩 The Challenge: UX That Converts for Niche eCommerce

My client runs a personalized padel t-shirt eCommerce site. They wanted:

Faster and more relevant product search
The ability to personalize empty state experiences
Future integration with an AI chatbot

This wasn’t just about search — it was about making intelligent UX part of conversion rate optimization (CRO).

🚀 The Stack: Orama.search + OpenAI + Sanity

We chose Orama.search for its:

Lightweight architecture and speed
Native support for vector-based search (with OpenAI embeddings)
Developer-friendly API (can be updated via REST, CLI, SDKs)

It let us go beyond standard search to implement answer engine logic, automations, and personalized search outputs — all while staying fully headless.

🔄 Dynamic Product Updates (Sanity + Cron + GROQ)

Instead of manually syncing product data to the vector database, we automated the process using a scheduled cron job combined with a GROQ query from Sanity CMS. As developers, one of the most effective ways we improve user experience is by streamlining repetitive tasks—automation not only saves time but also reduces the risk of errors. Fortunately, Orama provides a straightforward API for handling updates, inserts, and deletions. Since we were working within the limitations of the free tier, we opted for a single deployment at a time—a practical and efficient solution that kept the system lightweight and cost-effective.

// /api/update-orama-db.ts

const manager = new CloudManager({
  api_key: process.env.ORAMA_PRIVATE_API_KEY!
})
const indexManager = manager.index('xxxxxxxxxxxxxxxxx') // Replace with id Index

export const GET = async () => {
  try {
    const products = await sanityClientRead.fetch(
      GET_ORAMA_PRODUCTS_FOR_UPDATING // GROQ query from Sanity
    )

    await indexManager.update(products)
    await indexManager.deploy()

    return NextResponse.json('OK', { status: 200 })
  } catch (error) {
    return NextResponse.json(
      { error: 'An error occurred', details: error },
      { status: 500 }
    )
  }
}

💡 Bonus: You can optimise the GROQ query to fetch only products that have changed since a specific timestamp.

🔍 The Search Page: UX Meets Relevance

This enhancement was part of a larger migration project from WordPress to Next.js with Sanity, which also included a full product refresh. As a result, much of the existing indexed content on Google became outdated. To address this, we added a 404 search fallback that triggers when a product URL no longer exists. It uses the missing slug to perform a hybrid search and return relevant product suggestions—helping retain traffic and reduce bounce rates during the transition period.

const { search } = await searchParams // Next.js 15 searchParams for the search page
çconst { slug } = await searchParams // Next.js 15 slug for the 404 page

const oramaResponse = await oramaClient.search({
  term: search/slug as string,
  mode: 'hybrid'
})

if (!oramaResponse) {
  log.error('Products not found', { oramaResponse })
}

We also leveraged past user behaviour and wishlist data to:

Prioritise recently viewed products in search results.
Insert smart call-to-actions directly within search listings.
Suggest relevant product bundles to boost quick checkouts.
Perform similarity-based searches to update last-minute offers with products sharing key characteristics.
Apply the same logic on the checkout page and product views, dynamically recommending bundles and tailored suggestions.

🎯 CRO Techniques Enabled

By combining AI-powered search with UX intelligence, we implemented:

✅ Personalized 404/empty search pages
✅ Wishlist-based smart carousels
✅ Product slug disambiguation (typo handling)
✅ Search result re-ranking based on behavioral insights

These micro-improvements reduced bounce rate and nudged more sessions into purchase flow.

🧠 Why Orama Over Meilisearch/Typesense/Algolia?

Open-source, lightweight and cost-effective
Built-in support for vector search + OpenAI embeddings
Native REST + CLI + SDK support for automation
Developer-focused design and instant local setup

It gave us AI-enhanced flexibility without the SaaS pricing headaches.

🔮 What’s Next: AI Chatbot Integration

The next phase of this project will bridge Orama with OpenAI to create an in-site product assistant. It will:

Guide users via chat toward relevant products
Pull real-time insights from the search index
Respond to wishlist/product queries

With Orama’s answer engine and embeddings already in place, this will be a smooth evolution.

DEV Community