ParticleSearch 2026-07-28 30 min read

ParticleSearch Storefront Search: Modal, Results Page, Filters, and Product Handoff

The ParticleSearch widget is not one search box. It is a set of connected storefront states: discovery before typing, live results while a shopper searches, a full page for narrowing, product and variant handoff, and recovery when the request cannot be satisfied exactly.

This guide explains what each state is responsible for, what merchants can configure, and what should be tested before treating a polished demo as proof of a reliable store experience.

Visible product behavior checked July 28, 2026. Screenshots come from the live ParticleSearch demo store. Layout, enabled controls, field coverage, filters, and product-card details can differ by merchant settings and catalog data.

Chapter 1 · Choose the storefront job

Layout settings should change how shoppers decide, not just how the grid looks

A dense parts catalog and an image-led home catalog do not need the same search surface. The first benefits from more comparable products and persistent filters. The second needs larger imagery and enough descriptive context for a shopper to understand the difference between two visually similar products.

ParticleSearch groups those decisions into three storefront experiences. Applying a preset coordinates the modal, full results page, and product presentation. Merchants can then fine-tune either surface, but the preset gives the decisions a coherent starting point rather than a collection of unrelated toggles.

Signature

ParticleSearch signature

A store that needs a balanced default before it has evidence for a specialized layout.

Modal: Six results, comfortable density, suggestions beside the product results.
Full page: Contained results page, persistent sidebar filters, and automatic desktop columns.

Start here when buyers mix exact lookup with ordinary browsing. It leaves enough room for product context without hiding too much of the result set.

Catalog

High-density catalog

Technical, B2B, parts, variant-heavy, or large catalogs where comparison matters.

Modal: Eight results in a compact layout with suggestions kept in a sidebar.
Full page: A wider five-column grid with persistent filters and compact product cards.

Choose density when buyers already know the product language and need to compare more candidates, specifications, or options at once.

Discovery

Visual discovery

Fashion, home, beauty, gifts, art, and other catalogs where imagery and descriptive context lead.

Modal: Eight roomier results with suggestions above the product shelf.
Full page: A contained three-column grid, larger cards, top filters, and product descriptions.

Choose visual space when the shopper is evaluating style, material, use, or story rather than scanning a long list of near-identical parts.

The recommendation is a starting point, not an automatic design verdict. ParticleSearch can use catalog size, search profile, and variant density to recommend an experience. Your acceptance test still decides whether buyers can scan, compare, filter, and act more confidently on the deployed store.

ParticleSearch product-card settings comparing search modal and full search page cards, with quick add, descriptions, vendor, sale badges, and option values — ParticleSearch dashboard capture, July 28, 2026. The layout preview compares the two storefront surfaces with the same product data, then exposes the controls that differ by surface. Use a real query before deciding whether a field earns its space on the card.

The short answer

Start with the balanced layout, then earn complexity from buyer behaviour

The signature experience is the right default for most stores because it leaves room for both known-item lookup and ordinary product discovery. Move to the high-density layout when buyers compare technical attributes or variants. Move to visual discovery when imagery and descriptive context do more work than compact specification scanning.

Do not choose a layout from a screenshot alone. Run a known-item query, a broad category query, one filter path, and one product handoff on the deployed theme. The best layout is the one that helps the important shopper job finish with less confusion.

Chapter 2 · Before the query

Opening search should give the shopper a useful starting point

An empty modal wastes the moment when a shopper has declared intent but has not yet chosen words. ParticleSearch can show suggested searches and a product shelf before the first character. The job is orientation, not pretending to know what the shopper wants.

Useful idle suggestions usually come from recognizable category language, recent or repeated demand, or merchant-approved discovery paths. Review the list as merchandising content. Remove stale, ambiguous, or overly broad phrases that do not help shoppers move toward a product.

ParticleSearch search modal before typing with suggested searches and newest products — The idle state combines suggested searches with an image-led product shelf. It gives a browse path without forcing the shopper to abandon the search surface.

Chapter 3 · Search states

Every visible state needs its own contract

A search UI can look correct in one screenshot and still fail during loading, query changes, empty results, or continuation. Review the state transition, not only the settled result grid.

Idle

What can I browse before I know the exact wording?

Suggested searches and a configurable product shelf

The suggestions are useful, current, and not an arbitrary keyword dump.

Typing

Did the interface understand the term I entered?

Visible query, related suggestions, loading state, and bounded result update

Old-query products never appear as if they belong to the new query.

Results

Which product should I open or buy?

Product image, title, vendor, price, availability, match emphasis, and quick add

The card explains the returned product and preserves any important variant.

Continuation

How do I inspect the full set?

A full results page with filters, sorting, counts, and pagination

The query, result identity, filter state, and sort remain intact.

Recovery

What can I do when no exact result exists?

Correction, related search, filter relaxation, browse path, or a clear empty state

Broader help is labelled and never presented as an exact success.

Do not show previous-query products under a new query. If a shopper changes “sofa” to “mirror” while the next request is loading, the interface should show a loading treatment or clearly label preserved results. It should not let sofa cards appear to answer “mirror.”

Chapter 4 · Active results

A result card must explain enough to support a choice

The modal is compact, but it still carries a commercial promise. The card should tell the buyer what the product is, what it costs, whether it can be bought, and what will happen after the action.

ParticleSearch search results for Dining Table showing three matching products, suggested searches, product images, prices, and response time — A settled query state shows the exact query, result count, related wording, product imagery, vendor, price, response time, and the path to all results. The demo query is “Dining Table”; it illustrates the state contract rather than a required category.

Identity

Title, vendor, image, and the product or matched variant that justified the result

Commercial state

Price, compare-at price, availability, sale state, and an honest sold-out label

Action

Open product, quick add when one safe variant exists, or choose options when it does not

Evidence

Highlighted matching terms and active query state without overstating why the item ranked

Destination

A product URL that preserves the intended variant when variant identity matters

Quick add is conditional. It is appropriate when the widget can add one unambiguous, eligible variant. When size, color, bundle, selling plan, or another required choice remains unresolved, the safer action is “Choose options” or a product page handoff.

Product-card settings trade scanning speed for decision context

The correct setting depends on what a shopper must know before opening a product. More information is useful only when it separates close choices. If every card carries vendor, rating, description, swatches, badges, and two actions, the result grid can become slower to read even though each individual feature is working.

Control	Use it when	Leave it out when	Merchant outcome
Quick add	The result resolves to one purchasable variant or the store has a safe option-selection flow.	A size, color, bundle, selling plan, compatibility choice, or other required decision remains.	A faster purchase path without adding the wrong merchandise record.
Vendor	Brand or manufacturer helps the buyer distinguish otherwise similar products.	The vendor is internal, repetitive, or adds no useful product distinction.	More decision context without turning every card into a specification sheet.
Sale badge and compare-at price	The store uses reliable price states and promotion context is part of the decision.	Compare-at data is incomplete or the visual treatment would overstate a routine price.	Commercial context that agrees with the product page and cart.
Swatches	Color or another visual option is important and the available swatches map cleanly to variants.	Option values are not visual, swatch data is unreliable, or space is better used for another signal.	Variant breadth becomes visible before the shopper opens the product.
Descriptions or ratings	The extra context genuinely separates close choices, especially in an editorial layout.	The cards become harder to scan or the source data is thin, duplicated, or untrustworthy.	More confidence per card when the catalog earns the extra space.

Chapter 5 · Full results

The full page should preserve intent while adding control

The modal should not become a miniature catalog page. Once a shopper wants the complete set, ParticleSearch can continue to a full-page experience with configured filters, sorting, result counts, related searches, and denser product comparison.

The handoff passes only when the query, result set, product identity, and any active scope remain coherent. A full page that silently restarts the search is a second search experience, not a continuation.

The demo results page keeps “table under 2000” visible while adding category, type, brand, and product-card context. The exact facets and range behavior are generated from merchant configuration and available catalog data.

Value

The filter value exists on a currently eligible product or variant.

Count

The displayed count reflects the active result set, not the entire catalog.

Selection

Choosing the value creates visible, removable state.

Result

Every returned item satisfies the applied constraint at the declared product or variant level.

URL

The state survives refresh, continuation, and browser navigation when the store expects it to.

Use the faceted navigation guide to test multi-select logic, counts, empty intersections, price ranges, URL policy, and analytics beyond the visible layout.

Chapter 6 · Product handoff

Follow the same merchandise identity from query to cart

A parent product can be correct while the shopper outcome is wrong. This matters when the query points to one SKU, option, compatibility value, price, or stock state. Test the full handoff instead of stopping when the expected parent title appears.

Query

The buyer enters a title, category, attribute, or identifier.

Result

ParticleSearch returns a product and, when relevant, matched variant context.

Card

The widget chooses the image, price, stock state, and action.

Destination

The product page opens the same intended merchandise record.

Cart

The line item agrees with the promise made in search.

The ParticleSearch validation plan includes an identifier, field, filter, variant, and cart acceptance set for this trace.

Chapter 7 · Responsive behavior

Responsive search is a behavior contract, not a smaller desktop grid

The current widget has modal and full-page layouts for desktop and mobile, but the store’s theme, header, viewport, product content, and enabled controls still shape the result. Test the deployed combination.

Area	Desktop job	Mobile job
Modal geometry	More columns and optional suggestion sidebar	Stacked or sheet-like presentation with reliable close and focus behavior
Filters	Persistent sidebar or top controls	Drawer or sheet with applied count, clear actions, and a reachable apply path
Product cards	Image-led grid with hover affordances	Tap-first controls, readable prices, and actions that do not depend on hover
Keyboard	Open, type, move, select, close, and restore focus	No focus trap, covered action, or layout jump when the virtual keyboard opens

Keyboard path

Open, type, move, select, close, and restore focus without a pointer.

Pointer and touch

Controls remain large enough, do not overlap, and never depend on hover alone.

Commerce path

Product state, variant, price, and cart behavior agree on every target device.

For a wider state-by-state audit, read the ecommerce search modal guide and the search results page design guide.