How to create a storefront with a product filter

← Back

A section with the tags module shows products with filter, sorting and pages; the set of filters is defined by a regular form where the field name equals the property name.

  1. Build the filter form: a section with the forms module, it 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" — subsections, "Search" — a search bar. "Action button" — "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. Select the "Object preview template" for the section — it renders the cards.

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

Also in the settings: "Products per page", "Default sorting", "Apply filter only by button", "Don't show sorting selection", "Don't show product count".

Filter in the 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 gives this tag. Which properties are suitable for tags — "Tag properties for /tags/… addresses". With the checkbox "No tag in address — tag cloud", a storefront page without a tag shows a cloud.

If it didn't work

  • The filter field is empty. The field name didn't match the product property name — check the letters.
  • The cards are bare. The preview template for the storefront section is not selected.
Did the article help?

See also

How to add an item to the catalog"Manage items" section in the admin menu: fill in "Item name", select "Section", and click "Create item".Item properties and price matrixProperties are the selection characteristics (material, size, print run); the price is set at the intersection of their values.How to display items on a pageSection items are automatically shown as tiles on its page if the "Module" field is empty (or static); the tile appearance is set by "Item preview template".How to set up an object pageThe object page is assembled with the mouse: elements are dragged across columns, the eye hides, the pencil configures; the layout is shared for all objects or individual for one.

Tips for working with the builder

The "Help" section is made for those who are building a website on "Pervaya Liniya" for the first time. It contains answers to common questions: how to create a website, what to write in the fields, how to edit texts and photos, how to connect your own domain, and how to set up sections. The materials will help you figure things out without contacting support.

The builder is simple: you fill in the fields on the creation page, and then edit the content directly on the finished website. If something does not work or is unclear, check the relevant help item. The instructions are written in plain language and describe every step.

In Help you will find answers to questions:

  • how to come up with a website address and what to do if the name is taken;
  • how to change the title, description, and other texts on the page;
  • how to add products, services, or request forms;
  • how to connect your own domain instead of an address on firstline.com.ua;
  • how to set up sections and modules for your business needs.

If you cannot find the answer you need, use the feedback form — we will help you figure it out. The section is updated so that you can always find current information about working with the builder.