Search UX 2026-07-2924 min read

Mobile Ecommerce Search: Modal, Filters, Product Cards, and Return Paths

Mobile ecommerce search is not desktop search squeezed into a smaller column. The shopper has less visible context, a software keyboard that changes the viewport, touch instead of precise pointer input, and fewer products visible before scrolling.

The right mobile design preserves the same contract as desktop: query, match state, filters, sort, product identity, availability, and return path. It changes the order and containment of those elements so the next decision stays obvious.

Mobile contract

Keep the search task stable while the viewport keeps changing

Opening the keyboard can reduce the usable height. Browser controls can expand and collapse. Rotation changes the column count. A modal or drawer should therefore use the current visual viewport, keep primary controls reachable, and avoid placing the only close or apply action below content the shopper cannot reach.

Moment	Preserve	Make visible
Open	Return focus and the page position behind search	Focused search input and a clear close action
Type	Exact input while responses update	Grouped suggestions and visible loading
Submit	Query, correction state, and history	Result count, filter access, sort, and first products
Filter	Current query and previously applied values	Pending or live selection semantics and a clear way back
Open product	Query, filters, sort, and result position	The exact product or variant represented by the card

Input and modal

Put the query, close action, and current response in one visual frame

A search takeover should focus the input when opened, retain the element that launched it, and return focus when closed. Keep the query visible while suggestions and products change below. Do not replace typed text with an active suggestion before the shopper selects it.

Group query, product, content, and destination suggestions by consequence. A shopper should be able to predict whether a tap submits a query, opens a product, or navigates elsewhere. Shopify’s predictive-search UX guidance also keeps a submitted search route available rather than making suggestions the only path.

replacement filter

Queries

replacement water filter

replacement air filter

Products

1
Open
Focus the input, identify the dialog, and keep the close action visible.
2
Type
Show loading without clearing the input or presenting stale suggestions as current.
3
Navigate
Make suggestion groups and consequences clear to touch and keyboard users.
4
Submit
Carry the exact query into a stable results route with history and reload support.

Filters and sort

A closed drawer must not hide why the result set changed

Move large facet lists into a drawer on narrow screens, but keep the applied values and count visible near the result grid. The shopper should be able to remove one filter without reopening the drawer and should know whether selections apply immediately or only after an Apply action.

When the drawer opens, move focus into it and contain keyboard focus until it closes. On close, return focus to the filter trigger. Preserve the current query, sort, and previously applied values. The deeper data, logic, count, URL, and crawl contracts are covered in the faceted navigation guide.

Query

table under 2000

Drawer

Price ≤ 2000 · Type: table

Grid

Query + 2 active filters

Cards and actions

Spend scarce card space on the next purchasing decision

Mobile cards need less decoration and more decision evidence. The useful fields depend on the catalogue: apparel may need colour, size, price, and swatches; replacement parts may need model, compatibility, identifier, and pack size. Do not remove the field that explains the match simply because the title already occupies two lines.

Card field	Job	Failure
Image and title	Recognition	The differentiating words disappear below truncation.
Matched evidence	Explain relevance	A variant or identifier match looks like an unrelated parent product.
Price and availability	Set purchase expectations	A range, market price, or sold-out state is hidden until the product page.
Variant context	Preserve intent	The shopper must repeat size, colour, model, or pack selection.
Action	Continue safely	Quick add bypasses required choices or adds the wrong sellable item.

Quick add is safe

The sellable item is fully specified and the displayed price and availability belong to it.

Choose options first

Required variants, compatibility, subscriptions, or other purchase decisions remain unresolved.

Loading and return

Preserve progress through slow requests, product visits, and back navigation

Reserve card geometry before images arrive, retain the old stable layout while a scoped update loads, and show which operation is pending. A filter update should not replace the entire page with a skeleton. A new query should not leave old products looking current.

The return path is part of conversion UX. When a shopper opens a product and comes back, restore the query, filters, sort, loaded segment, and scroll position. Requiring the shopper to rebuild the result set makes every product comparison expensive.

Pending

Name the operation and preserve stable context.

Return

Restore query, state, and position.

Settled

Announce the result and move no focus unless the action requires it.

Mobile QA

Test behaviours and catalogue extremes, not device names alone

Narrow phone

One-hand reach, keyboard resize, two-column cards, drawer fit, long filter values

Large phone

Density, card hierarchy, sticky controls, landscape rotation, browser chrome changes

Tablet

Breakpoint choice, sidebar versus drawer, touch targets, mixed pointer and keyboard use

Zoomed desktop

Reflow at 200% zoom, no horizontal page scroll, controls still reachable

Use long product titles, missing images, sale prices, price ranges, sold-out variants, many filters, long filter values, no results, request errors, and the software keyboard. The W3C target-size guidance is a useful floor for small controls, but touch comfort still needs testing in the composed interface.

ParticleSearch fit

ParticleSearch treats mobile as the same search journey with a deliberate narrow-screen composition

ParticleSearch provides the modal, full results page, responsive result grid, filter drawer, active filter state, sorting, product cards, availability states, and product actions as one storefront system. Merchants can choose the search layout, card information, filter placement, quick-add behaviour, and whether out-of-stock products are shown, pushed down, or hidden.

After installation and store-level verification, a merchant should not need separate mobile patches merely to keep the query, filter state, sold-out policy, and product handoff coherent. ParticleSearch cannot decide which product fields matter to a particular catalogue, and a theme can still create integration conflicts. Test the published theme with the real acceptance set.

See the complete interaction contract in the ecommerce search UX pillar, then use the ParticleSearch storefront feature page to review the merchant-visible surface.

Evidence checked July 29, 2026

Shopify predictive-search UX guidance
WCAG 2.2 understanding target size
ParticleSearch responsive modal, full-page search, filter drawer, product-card, and settings contracts inspected July 29, 2026.