Come creare una vetrina con filtro dei prodotti

1. Create the filter form: a section with the forms module, which can be hidden 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” becomes subsections, “Search” becomes a search box. “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 means the whole site) and “Address of the form with filter fields”.
4. Choose the section’s “Object preview template” — it is used to render the cards.

The look of the filter 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 the 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 yields this tag. Which properties qualify as tags is set in “Tag properties for /tags/… addresses”. With the checkbox “No tag in the address — tag cloud”, the storefront page without a tag shows a cloud.

If it didn’t work

• The filter field is empty. The field name does not match the name of the product property — check the spelling.
• The cards are bare. The preview template is not selected for the storefront section.