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.

Examples​

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.
data-reflow-search-urlURL

(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.

Examples:

data-reflow-show-buttonboolean

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

Examples:

  • data-reflow-show-button="true"
data-reflow-button-textstring

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

Examples:

  • data-reflow-button-text="Go"
data-reflow-placeholderstring

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

Examples:

  • data-reflow-placeholder="Find a Product"