Setting up storefront filters and sorting

Every category page on your shop comes with filters and a sort menu. Your customer narrows the list by category, brand, tag, option, custom field or price, then puts what is left in the order they want. This guide covers what they see, where each filter comes from, and what you can change.

Considerations

• Filters and their counts only look at active products.
• A group only shows when there is something in it. If none of your products has a brand, there is no Brand group.
• The sort menu holds seven choices. There is no best-selling, popularity or rating sort, because Orbit does not yet hold sales ranking or review scores to sort on.
• Picking a filter or changing the sort returns your customer to page one.

What your customer sees

On a laptop the filters sit in a column beside the products. Each group has a heading your customer clicks to open or close it. Every row carries the number of products that match, and those numbers move as filters are picked.

• Offers: one checkbox, On sale.
• Category: an All row, then one row per category.
• One group for each product option, named after the option.
• One group for each custom field you show on the storefront.
• Brand: one row for each brand.
• Tags: one row for each tag. This group starts closed.
• Price: a slider running from the lowest to the highest price in the list.

On a phone the filters move behind a Filters button. A number on the button shows how many filters are on. It opens a drawer titled Filters with the same groups, and the filters already picked listed at the top. A Show results button at the bottom closes the drawer.

Note: An option named Color shows as round colour swatches instead of a checkbox list. Swatches only appear for that spelling, so an option named Colour shows as checkboxes.

How your customer sorts the list

The sort menu above the products is labelled Sort by:. It holds seven choices:

• Featured: the order used before anyone picks a sort.
• Price: Low to High
• Price: High to Low
• Name (A-Z)
• Name (Z-A)
• Date: Newest First
• Date: Oldest First

Filters and the sort sit in the page address, so a filtered list can be bookmarked or shared.

Where each filter comes from

Orbit builds the groups from the products in the category, so filters follow your catalogue.

• Category: your categories.
• Brand: the brand on a product.
• Tags: the tags on a product. A tag has to be active to show.
• Option groups: the options on your products and the values they hold.
• Custom field groups: custom fields of the single select or multi select type that are set to show on the storefront.
• Price: the prices of the products in the list, variant prices included.

Counts cover the category your customer is looking at, not your whole catalogue.

What you can change

• To change the rows in the Category group, add or rename a category. See Organising products with categories.
• To change a row in the Tags group, work on the tag itself. See Adding tags to a product.
• To get a Brand group, set a brand on your products. One is enough for the group to appear.
• To rename an option group, rename the option on the products. The heading is the option name.
• To add a group of your own, create a custom field of the single select or multi select type, set it to show on the storefront, then fill it in on your products.
• Search results are a separate list with their own rules. See Controlling storefront search.

Design your own filters and sorting

If you build your own category template, two page builder elements do this work: Category Filters and Category Sorting. See Designing your category pages for how to open the template.

Category Filters has these settings:

• Display Type: Block (Inline), Dropdown or Drawer (Slide-out).
• Layout: Vertical (Sidebar) or Horizontal, for the block display type.
• Button Icon: the icon on the button, for dropdown and drawer.
• Collapse filters: every group starts closed, so your customer sees the filter names and clicks one to open it. Turning it on adds Keep first filter open.
• Show all available filters automatically: on to start with. It builds the groups from the products in the category, as the built-in pages do.

Turn that last switch off to pick the groups yourself. Click + Add Filter and choose from Filters, Product Options and Custom Fields. The ready-made filters are Taxonomies, Brands, Price Range, Availability, Tags and On Sale. Drag a row to move it. Open a row to set its Label, Collapsible and Expanded by Default.

Category Sorting has three settings. Label reads Sort By unless you change it. Layout is Horizontal or Vertical. Default Sort holds Newest, Oldest, Price: Low to High, Price: High to Low, Name: A-Z and Name: Z-A. It stays in step with the Product Grid's Sort By, so changing one changes the other.

Related guides

• Designing your category pages
• Organising products with categories
• Adding tags to a product
• Controlling storefront search