ProductGeniusSearchBar

Skip this page unless your store also uses Product Genius search, not just the feed.

On Shopify Liquid themes, search-bar placement ships as a theme app extension block, "PG Search Bar" — see the Shopify section. <ProductGeniusSearchBar> is the same thing for storefronts without a Liquid theme.

import {ProductGeniusSearchBar} from '@productgenius/react';

// full-width bar:
<ProductGeniusSearchBar placeholder="Search products…" maxWidth={400} />

// or icon-only — a compact square the live bar expands on focus:
<ProductGeniusSearchBar layout="icon" />

What you are mounting

The live bar that replaces the skeleton is Product Genius search: LLM-based query understanding that handles typos, synonyms, and ambiguous terms; abstract queries like "a gift for my mom"; results that keep refining as the shopper scrolls; and a transition into interest-based suggestions as results are exhausted. Ranking policies for shopper segments, and the live bar's own styling, are configured on the Product Genius side with your contact — your storefront's job is to give it a mount point in the right place.

Progressive enhancement, not a placeholder

What the component renders is a working native search styled as a loading shimmer: a real <form method="get"> pointed at your own search route in bar layout, or a real link to that route in icon layout. The Product Genius bundle replaces it with the live search bar once it mounts.

Until then — and if the bundle never loads at all — your visitors still have search that works. That is the intended posture, not a degraded one.

The component is purely presentational: no effects, no globals, no data fetching. It renders in your initial server HTML, so the skeleton paints with the page instead of after hydration, and it never causes layout shift.

Prerequisites

Two things have to be true before the live bar can appear.

Placement rules

If your design opens search in a drawer or modal, put the component in your persistent header anyway and let the live bar handle its own expansion — that is what layout="icon" is for: a compact square in the header that the live bar widens on focus.

Props

RSC note: functions don't cross the server-to-client boundary, so passing onSubmit requires the component that renders the search bar to be a Client Component (in the Next.js App Router, for example). Without onSubmit, you can render it straight from a Server Component.

Styling the skeleton

Styles are injected as a small inline <style> per instance — nothing to import, SSR-safe. The skeleton's colours, radius, and sizing are CSS custom properties on the container, declared at zero specificity so any rule of yours overrides them:

Override them from your own stylesheet:

.pg-search-mount {
  --pg-skeleton-radius: 8px;
  --pg-skeleton-bg: #faf9f7;
}

Or per instance via the style prop: style={{'--pg-skeleton-radius': '8px'} as CSSProperties}.

Two caveats:

• If you override sizes through style rather than the maxWidth prop, set --pg-compact-expanded-width alongside it — in icon layout the expanded width is derived from the prop, so a style={{maxWidth}} override moves the container cap but not the expanded width.
• On a hybrid page that also loads the Shopify theme app extension's pg-search.css, that stylesheet declares the same defaults at class specificity, so an equal-specificity override of yours can lose on document order. The style prop override always wins there.

This styles the skeleton only. The live search bar's appearance is part of your store's Product Genius design configuration, like the feed's. The skeleton cannot read the live bar's variables — they are scoped to the bundle's own markup and don't exist until it mounts — so set the skeleton's height, colours, and radius to match your store's configured bar and the swap is seamless.

The shimmer animation is disabled under prefers-reduced-motion: reduce, and the fallback input carries a visible :focus-visible outline, since pre-handoff it is the only focusable control.

CSP and the inline <style>

The component renders one inline <style> element per instance. Pass the nonce prop whenever your style-src doesn't allow inline styles without a nonce — remember that browsers ignore 'unsafe-inline' when the directive also carries a nonce or a hash.

This is a different nonce use from the feed's: <ProductGeniusFeed nonce> nonces an injected <script> (script-src), while <ProductGeniusSearchBar nonce> nonces an inline <style> (style-src). In a framework with a per-request nonce, it's usually the same value passed to both. See Content-Security-Policy.