How to create a storefront with a product filter

1. Build the filter form: a section with the forms module; you can hide it from the menu. The field name is the name of the product property: "Brand", "Size", "Color". The "Price" field becomes a from/to range, "Categories" become subsections, "Search" becomes a search bar. The "Action button" is "Show"; a button with the word "Reset" in its name resets the filter.
2. Create a storefront section: in the "Module" field click "Select" → "Storefront with filter".
3. In the storefront's "Module settings" window, specify "Sections with products" (empty — the whole site) and "Address of the form with filter fields".
4. Choose the "Object preview template" for the section — it is used to render the cards.

The filter's appearance is determined by the field type: dropdown list, checkboxes, radio buttons, or buttons. If a field has its own list of values, only those are shown; otherwise, all values of that property across the products are shown. Order, labels, and styling work as in a regular form.

Also in the settings: "Products per page", "Default sorting", "Apply filter only with the button", "Do not show sorting selection", "Do not show product count".

Filter in a menu or column. The "Filter" informer places the same form anywhere on the site. Its settings include "Address of the form with filter fields", "Storefront address", and the checkbox "Show only on storefront pages".

Tags. Addresses like /tags/nike show products whose property value produces this tag. Which properties qualify as tags is set in "Tag properties for /tags/… addresses". With the checkbox "Without a tag in the address — tag cloud", a storefront page without a tag shows the cloud.

If it didn't work

• The filter field is empty. The field name doesn't match the product property name — check the spelling.
• Cards look bare. The preview template is not selected for the storefront section.