Search

Product search with automatic debouncing via useProductSearch hook. Two usage patterns: all-in-one Search component (fastest setup, fixed layout) or composable SearchProvider + SearchInput + SearchResultsList (custom layouts, shared search state). The all-in-one component handles input, loading skeletons, empty states, and infinite scroll. Use composable approach when you need custom result rendering or multiple search-dependent sections.

Anchor to propsProps

Anchor to children children React.ReactNode required
Anchor to initialQuery initialQuery string

Examples

tsx

import React from 'react'

import {Search} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

</div>

)

}

Preview

Examples

tsx

import React from 'react'
import {Search} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="w-full h-[600px]">
      <Search initialQuery="shirt" />
    </div>
  )
}

Description

A component that has all the features of a product search

tsx

import React from 'react'
import {Search} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="w-full h-[600px]">
      <Search initialQuery="shirt" />
    </div>
  )
}

Description

A composable way to build a search screen

tsx

import {
  SearchProvider,
  SearchInput,
  SearchResultsList,
} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <SearchProvider>
      <SearchInput placeholder="Search products..." />
      <SearchResultsList />
    </SearchProvider>
  )
}

Was this page helpful?