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

Attribute Possible Values Description
data-reflow-type product-search Must always be set.
data-reflow-search-url URL (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.

  • data-reflow-redirect-url="https://example.com/search-results"
  • data-reflow-redirect-url="/search-results.html"
data-reflow-show-button boolean (optional) Whether to show a search button next to the text field. By default it is hidden.

  • data-reflow-show-button="true"
data-reflow-button-text string (optional) The text of the search button. By default it is "Search".

  • data-reflow-button-text="Go"
data-reflow-placeholder string (optional) The placeholder text for the input field. Defaults to "Search Products".

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