Search results page

The search results page lists every product that matches a search, page by page. The words come from the page address (?q= followed by the words) or from a field on the page. Unlike predictive search, it has no limit of 10 results.

How it fits together

What Smootify needs:

• a smootify-search-page element;
• inside it, one product card: a smootify-product element. Smootify repeats it once per result. Without a card, the block is removed.

What is up to you:

• the page layout and the card design;
• the optional parts: a search field, the count, the searched words, the empty state, the pagination.

1. Create the page

1. Create a static page, such as /search-page. Webflow keeps /search for its own site search, so pick another slug.
2. Add a Custom element with the tag smootify-search-page. It can wrap the whole page or only the results section.

Visitors reach the page in three ways:

• from predictive search, with a link that has search="search-page": see Predictive search;
• from any link to the page with ?q= and the words, such as /search-page?q=linen+shirt;
• by typing in the page’s own field.

The address follows the search, so a results page can be shared.

2. The search field

Add a Form Block inside smootify-search-page, with a Text field of Type Plain or a Search field (type="search", as Webflow’s Search element writes it). Its Name does not matter: Smootify renames it and fills it with the words from the address. Typing searches after a short pause, and Enter searches at once.

The field is optional: without it, the page shows the results for the words in the address.

The page can have more than one field, such as a form at the top and another above the results: each one searches the words typed in it. A field inside a result card does not start a search.

3. The results

Add a smootify-product with data-id="search" and design it as a product card. The first smootify-product is the template: each result gets a copy of it, so give each element of the card a Smootify attribute, such as product="title".

You can use a Collection list as the grid, with placeholder cards (data-id="loader") in its items. Its first Collection item becomes the template, and the other cards keep their place until the first results replace them, so the page does not jump while it loads. See placeholder cards.

Attributes on smootify-search-page:

• limit: products per page, 50 by default, 250 at most;
• animation, duration, easing and stagger, and disable-scroll, as on search & discovery: see Filters, sorting and pagination.

Products that cannot be bought. unavailable-products on smootify-search-page says where they go. Here results 3 and 5 are sold out:

The search covers products only.

4. Count, words, empty state and reset

Before a search and after it, the page shows different parts: an element with search="no-query" shows only while there is no query, such as “What are you looking for?” with a few suggested searches; one with search="with-query" shows only once there is one, such as the “Results for … · 12 pieces” line; search="empty-state" shows only when a search finds nothing. smootify-search-page also gets the class has-query while there is a query and is-empty when it finds nothing. All optional, anywhere inside smootify-search-page: search="count" and search="query" on text, search="empty-state" on a Div block. What they show for three searches:

A reset button, a Custom element with the tag button and type="reset", clears the search.

Every attribute is in search page attributes.

5. Pagination

The pagination buttons work as on search & discovery. Each is a Custom element with the tag button and one of these data-action values:

A button is hidden when there is no such page. Use previous and next, or one of the load buttons. Buttons inside a result card, such as the previous and next of a booking calendar, are not pagination buttons.

Page numbers work as on search & discovery too: one button with data-action="page" as the template of the numbers, filter="page-ellipsis" for the gaps, filter="page-current" and filter="page-total" for “Page 3 of 12”, and page-range on smootify-search-page. See Page numbers. The address always follows the page, such as ?page=3. A search counts at most 1,000 results, a Shopify limit.

A search page with filters

smootify-search-page has no filters. For search results with filters and sorting, use search & discovery on the page instead, with a filter-search field. It reads the same ?q= from the address, so the links from predictive search keep working. It needs the Search & discovery add-on, and without words it lists the whole catalog.

Before you publish

Coming from 1.x

• The page no longer adds placeholder cards before the first search: the cards of your Collection list keep their place until the results replace them.
• Nothing shimmers by default: add skeleton where you want it.