Integrations

Shopify

Give your storefront search that understands intent. A query like 'warm jacket for hiking' should find your insulated shells even when no product title says 'warm'. Hopfield crawls your store like any other site and serves results through a lightweight theme snippet.

1. Index your store

Shopify publishes a sitemap for every store at https://your-store.myshopify.com/sitemap.xml (and on your custom domain). Create a collection from it in the dashboard:

Use include patterns like /products/**, /collections/**, and /pages/**to control what’s searchable.
Set a refresh schedule so new products appear automatically.
Push time-sensitive records (promotions, announcements, shortcuts to policy pages) with the indexing API.

2. Create a public key

In Search → Settings, create a public API key and allow your storefront domain as an origin.

3. Add a search snippet to your theme

In the theme editor (Online Store → Themes → Edit code), create snippets/hopfield-search.liquid and include it from theme.liquid with {% render 'hopfield-search' %}:

snippets/hopfield-search.liquid

<div id="hopfield-search">
  <input
    id="hopfield-input"
    type="search"
    placeholder="Search products, pages, and FAQs…"
    autocomplete="off"
  />
  <div id="hopfield-results" hidden></div>
</div>

<script type="module">
  import { HopfieldClient } from "https://esm.sh/@hopfield/core";

  const client = new HopfieldClient({
    publicApiKey: "hp_public_...",
  });

  const input = document.getElementById("hopfield-input");
  const panel = document.getElementById("hopfield-results");
  let timer;

  input.addEventListener("input", () => {
    clearTimeout(timer);
    timer = setTimeout(run, 150);
  });

  async function run() {
    const q = input.value.trim();
    if (!q) return void (panel.hidden = true);
    const { groups } = await client.typeahead({ q });
    panel.innerHTML = groups
      .flatMap((group) => group.hits)
      .map(
        (hit) =>
          `<a href="${hit.url}"><strong>${hit.title ?? hit.url}</strong>` +
          `<span>${hit.snippet}</span></a>`,
      )
      .join("");
    panel.hidden = false;
  }
</script>

Style #hopfield-search however your theme dictates. The snippet is intentionally unstyled so it inherits your storefront look.

Keep products fresh on publish

For instant updates (rather than waiting for the next crawl), call the indexing API from a Shopify webhook handler, for example a products/update webhook pointed at a small Node service using indexPage. See Node & Express.