Skip to main content

Product Search

The Product Search component renders an input field for searching in a store's products.

This component works in conjunction with Product List. Product Search presents a search field and redirects to a page on your site where a Product List is placed, while adding a ?search=xxx query parameter to the URL. Product List will see the parameter and automatically do the search.


How to Embed

To embed this component on your website and display a search field, include the reflow library, and add the following tag somewhere in the <body> of your page:

<div data-reflow-type="product-search"></div>

Supported Attributes

You can configure the product search component via additional data-reflow-xxx attributes.

AttributePossible ValuesDescription
data-reflow-typeproduct-searchMust always be set.

(optional) Specifies the URL to redirect to after a search is made. A search parameter will be added to the url indicating the search phrase. If not set, will redirect to the current page.
Add a Product List component on the target page to automatically display the search results.



(optional) Whether to show a search button next to the text field. By default it is hidden.

Example: data-reflow-show-button="true"


(optional) The text of the search button. By default it is "Search".

Example: data-reflow-button-text="Go"


(optional) The placeholder text for the input field. Defaults to "Search Products".

Example: data-reflow-placeholder="Find a Product"