Search bar

Add the PG Search Bar block, configure its layout and size, and match its loading state to your live search bar.

PG Search Bar is the app block that puts Product Genius search on your storefront. It is the Liquid counterpart of the <ProductGeniusSearchBar> component in the React package — the same search bar, placed the way a Liquid theme expects.

The block is built so your storefront is never broken while Product Genius loads. It renders a real, working search field immediately, styled as a subtle loading shimmer, and the live Product Genius bar takes its place once the bundle mounts. If the bundle is slow, blocked, or fails outright, shoppers still get your theme's normal search — the form posts to your store's search page like any other search box.

Add it to your theme

Open the theme editor

In your Shopify admin, go to Online Store → Themes, then click Customize.

Find a section that accepts app blocks

Click Add block inside the section where the search bar should appear and look for PG Search Bar under the Apps group.

Most merchants want search in the header. Many themes' header sections do not accept app blocks, so check first — if the header does not offer it, common alternatives are an announcement bar, a section directly beneath the header, or a dedicated search section on your collection and search templates. If no section offers it anywhere, see Manual placement.

Choose a layout and size

Set Layout to a full bar or an icon, then set Max width and Height to fit the space you put it in. See Settings below.

Match the appearance settings to your live bar

The Appearance settings style the loading state only. Matching them to your configured Product Genius bar is what makes the swap invisible — see Why Appearance only affects the loading state.

Save and check the live storefront

Click Save, then load the real storefront page. The editor canvas does not run the Product Genius bundle the way a real page load does, so the handoff from skeleton to live bar is only observable on the storefront itself.

Settings

Setting	Type	Default	What it controls
Layout	Full bar / Icon only	Full bar	Full bar renders a wide search field with a visible input. Icon only renders a compact square search icon, which expands to your Max width when a shopper focuses it. Use Icon only in tight header rows.
Placeholder text	Text	`Search`	The grey prompt text inside the field. It is also used as the accessible label for the search control, so keep it descriptive — "Search" or "Search products" rather than a bare symbol. In Icon only layout there is no visible input, so this text serves only as the accessible label.
Max width	120–800 px	320 px	The widest the bar will grow. It is a maximum, not a fixed width: in Full bar layout the bar fills the space it is given up to this value. In Icon only layout it is also the width the bar expands to on focus.
Height	28–64 px	38 px	The height of the bar, and — in Icon only layout — the size of the square icon. Match it to your theme's other header controls so the row lines up.

Appearance

These six settings style the loading state only. They are grouped under an Appearance heading in the theme editor.

Setting	Type	Default	What it controls
Corner radius	0–30 px	0 px	Corner rounding of the bar.
Background	Color	`#ffffff`	Fill behind the field.
Border	Color	`#d4d0cd`	A 1 px border in this color.
Text	Color	`#1f1f1f`	Color of text a shopper types.
Placeholder	Color	`#9f9f9f`	Color of the placeholder prompt.
Icon	Color	`#8a8a8a`	Color of the magnifier icon.

Accessibility note

The default placeholder color (#9f9f9f on white) is about 2.6:1 against the background, below the WCAG AA minimum of 4.5:1 for text. It mirrors the Product Genius default so the two states match. If your store needs AA-level placeholder contrast, darken Placeholder here and ask your Product Genius contact to darken the live bar's placeholder to match — changing only one of the two reintroduces a visible shift.

Why Appearance only affects the loading state

The search bar has two lives on the page, and they are styled from two different places:

Before the bundle mounts — the skeleton

Your theme renders the block's own markup: a working native search field with a shimmer over it. This is what the Appearance settings style. It exists in the HTML your server sends, so it is visible immediately, before any JavaScript runs.

After the bundle mounts — the live bar

The Product Genius bundle replaces the skeleton with the real search bar. Its appearance comes from your store's Product Genius configuration — the theme's --pg-search-bar-* values — not from the theme editor. That is deliberate: the live bar's look is shared with the rest of your Product Genius experience and is managed on the Product Genius side.

The skeleton cannot read the live bar's values: they belong to markup that does not exist yet. So the two states are matched by hand. Set Corner radius, Background, Border, Text, Placeholder, Icon, and Height to the values your live bar uses, and the handoff is invisible. Leave them mismatched and shoppers see a flash — the bar visibly changing color, height, or shape a moment after the page paints.

Ask for your configured values

The defaults in this block match the Product Genius defaults, so an unmodified store already lines up. If your live bar has been customised for your brand, ask your Product Genius contact for the configured --pg-search-bar-* values and enter the equivalents here rather than eyeballing them from a screenshot.

What it does technically

For theme developers

Each block instance renders a container div with the class pg-search-mount (plus pg-search-mount--compact in Icon only layout) and a per-instance id of pg-search-mount-<block id>. The block's {% style %} tag writes the theme-editor settings onto that id as CSS custom properties — --pg-skeleton-size (Height), --pg-skeleton-radius, --pg-skeleton-bg, --pg-skeleton-border, --pg-skeleton-color, --pg-skeleton-placeholder-color, --pg-skeleton-icon-color — along with max-width and --pg-compact-expanded-width from Max width. Color properties are only emitted when the setting is non-blank, so the defaults in pg-search.css remain in force otherwise.

Inside the container:

Full bar renders a form with role="search", method="get", and a type="search" input named q, posting to routes.search_url (falling back to /search).
Icon only renders a link to the same search URL, with an inline magnifier SVG and no input.

Both variants carry an aria-label taken from the Placeholder text setting, falling back to the theme's own translated search.label string when it is empty.

The handoff is a single attribute: the bundle sets data-pg-search-ready on the container when the live bar mounts, and pg-search.css hides the skeleton whenever that attribute is present. In Icon only layout, the focus-expansion rules are gated on the same attribute, so the pre-mount link stays icon-sized and only the live collapsible bar widens. The shimmer animation and the width transition are both disabled under prefers-reduced-motion: reduce.

The stylesheet ships with the extension and is attached to the block through the stylesheet key in its schema, so Shopify loads it for you — there is nothing to add to your theme.

One configuration dependency

The live bar mounts into this block only if your store's Product Genius configuration targets the block's container — its search container selector must be .pg-search-mount, and its input mode must match the block's Layout (collapsed for Icon only, open for Full bar). This is set on the Product Genius side, not in the theme editor. If you add the block and the skeleton shimmers forever without ever being replaced, this pairing is the first thing to check with your Product Genius contact.

Multiple search bars on one page

Each block instance gets its own id and its own settings, so you can place more than one — for example a full bar on the search template and an icon in a sticky bar. Nothing in the markup conflicts. Whether your store's configuration mounts the live bar into every instance or only the first is a Product Genius configuration question; confirm it with your contact if you rely on more than one.

On this page