The facets and filters feature in Maison helps customers narrow down products on collection pages and search results pages.
Maison controls how the available filters are displayed in the storefront. The filter conditions themselves are provided by SHOPLINE through the Smart Search Recommendation app.
The same filtering interface is used in both:
- Collection > Product list
- Search results > Results
Section overview
Maison includes the following filtering and sorting settings:
| Setting | Description |
|---|---|
| Enable filtering | Displays the available product filters. |
| Filter layout | Controls how filters are displayed on larger screens. |
| Collapse filters | Collapses individual filter groups by default. |
| Enable sorting | Displays the product sorting control. |
| Show on model | Adds the Show on model control when supported by the product card setup. |
| Enable layout switcher | Lets customers change the product-grid layout. |
Available Filter layout options are:
- Drawer
- Horizontal
- Vertical
Maison also supports active-filter labels, filter counts, Clear all, color swatches, availability filters, list filters, and price-range filters.
STEPS:
Enable filtering on collection pages
Filtering for collection pages is configured in the Product list section.
- Open the Maison theme editor.
- Open a Collection template.
- Select Product list.
- Locate Filtering and sorting.
- Enable Enable filtering.
- Choose the required Filter layout.
- Configure Collapse filters if needed.
- Click Save.
Enable filtering on the Search results page
The Search results page uses the same filtering system.
- Open the Maison theme editor.
- Open the Search results template.
- Select the Results block.
- Locate Filtering and sorting.
- Enable Enable filtering.
- Choose the required Filter layout.
- Configure Collapse filters if needed.
- Click Save.
This allows customers to refine products returned by storefront search.
Add a new filter
New filter conditions are created in SHOPLINE's Smart Search Recommendation app, not in the Maison theme editor.
To add a new filter:
- From your SHOPLINE admin, open Smart Search Recommendation.
- Go to Filters > Default filter.
- Click Add filter condition or Add a filter item.
- In Filter options, select the required Filter type.
- Enter a customer-facing name in Filter type name.
- Configure the available Filter values if the selected filter type supports value management.
- Click Add to save the new filter.
SHOPLINE supports filter conditions such as:
| Filter group | Examples |
|---|---|
| Product | Price, Availability, Tag, Product Type, Manufacturer, Category Tree |
| Variant List | Color, Size, Material, and other product variant options |
| Metafields | Supported custom product metafields |
Once the filter is active and relevant products contain matching data, Maison can display it on collection and search results pages.
Remove a filter from the filter list
Existing filter conditions can be managed from:
Smart Search Recommendation > Filters > Default filter
You have two ways to remove a filter from the storefront:
Temporarily hide a filter
Use the Activate / Deactivate control for the filter condition.
- Find the filter you want to hide.
- Turn the filter off.
- Save the configuration if required.
The filter remains configured in SHOPLINE but is no longer displayed to customers.
Use this option when you may want to enable the filter again later.
Permanently delete a filter
To remove the filter condition completely:
- Find the filter condition.
- Click the trash icon.
- Confirm the deletion if prompted.
Use this option only when you no longer need the filter configuration.
Reorder filters
You can change the order in which filters appear to customers.
- Go to Smart Search Recommendation > Filters > Default filter.
- Locate the configured filter conditions.
- Drag and drop the filters into the preferred order.
- Save the changes if required.
Maison uses the filter order supplied by SHOPLINE when rendering the storefront filter list.
For example, you could arrange the filters as:
- Availability
- Price
- Color
- Size
- Material
Hide or show individual filter values
You do not need to remove an entire filter when only certain values should be hidden.
Inside a filter condition, open the Filter value settings.
Depending on the filter type, SHOPLINE lets you:
- Search filter values
- Hide selected values
- Display hidden values again
- Turn the eye icon beside an individual value off or on
- Change value sorting
- Group related values
For example, if your Color filter contains:
- Black
- White
- Red
- Discontinued Blue
you can hide Discontinued Blue while keeping the Color filter active.
This is different from deactivating the entire filter condition.
Add a custom metafield filter
You can create filters from supported Product metafields when the standard product and variant filters are not enough.
First create the metafield:
- From your SHOPLINE admin, go to Settings > Customize data.
- Select Product under the Metafield list.
- Click Add fields.
- Enter a field name, namespace, and key.
- Choose a supported data type.
- Enable the option that allows the metafield to be used for custom product filters when required.
- Save the metafield.
- Add values to the relevant products.
Supported metafield types include:
- Single-line text
- Boolean
- Whole number
- Decimal
Then add it as a filter:
- Go to Smart Search Recommendation > Filters > Default filter.
- Click Add filter condition.
- Open the Metafields group in Filter type.
- Select the metafield you created.
- Enter the customer-facing filter name.
- Configure the filter values if needed.
- Click Add.
Choose the Filter layout
Maison supports three filter layouts.
| Filter layout | Description |
|---|---|
| Drawer | Displays filters inside a slide-out drawer opened with the Filter button. |
| Horizontal | Displays filter controls horizontally above the product grid on larger screens. |
| Vertical | Displays filters in a sidebar beside the product grid on larger desktop screens. |
Drawer
With Drawer, customers click Filter to open the filtering panel.
The Filter button displays the number of currently active filter conditions.
Inside the drawer, customers can:
- Open filter groups
- Select filter values
- Adjust the price range
- Review available results
- Close the drawer using View results
Horizontal
With Horizontal, filter groups are displayed across the top of the product list on larger screens.
Each filter opens in a dropdown-style panel.
On smaller screens, Maison automatically provides the Filter drawer instead.
Vertical
With Vertical, filters appear as a sidebar beside the product grid on large desktop screens.
On smaller screens, the sidebar is replaced by the Filter drawer.
Collapse filter groups by default
Enable Collapse filters when you want filter groups to be closed when the page first loads.
When disabled, filter groups are expanded by default where the selected layout supports expandable groups.
Customers can click each filter heading to expand or collapse it.
This setting also applies to the filter groups displayed inside the drawer.
Understand Availability filters
Maison displays an availability filter as a switch.
For the standard availability filter, the customer-facing option is:
In stock only
Customers can enable the switch to limit the results to products that meet the availability condition.
Understand List filters
List filters display a set of selectable values.
For normal list filters, Maison displays:
- A checkbox for each value
- The value label
- The number of matching products
Customers can select multiple values.
A filter value with no matching products is disabled when it is not already selected.
Examples can include:
- Size
- Material
- Product type
- Vendor
- Other product attributes configured in SHOPLINE
Display Color filters as swatches
Maison automatically uses round swatches when it identifies a list filter as a color filter.
The default English color trigger is:
Color
Maison also recognizes Colour when the configured color trigger is Color.
Instead of normal checkboxes, color values are displayed as selectable round swatches.
The tooltip includes the color label and matching product count.
Use the Price range filter
Maison supports the Price range filter.
The Price filter includes:
- A dual-handle price-range slider
- Minimum price input
- Maximum price input
- The current storefront currency symbol
- A Reset option where applicable
Customers can drag the range controls or enter minimum and maximum price values manually.
The maximum available price is based on the current result set.
Review active filters
When customers select filter values, Maison displays the active filters above the product grid.
Each active filter can be removed individually.
Examples include:
- A selected list value
- In stock only
- A selected color swatch
- A minimum/maximum price range
For active color filters, Maison also displays the related color swatch beside the filter value.
When more than one filter condition is active, Maison displays Clear all so customers can remove all active filters at once.
Configure sorting
Sorting is configured in the same Filtering and sorting area.
- Open the Product list section on a Collection template or the Results block on the Search results template.
- Enable Enable sorting.
- Click Save.
Maison displays the current sort method in a sorting control.
When customers open it, they can select from the sorting options provided by SHOPLINE for the current result set.
Changing the sort option updates the product results while keeping the filtering experience available.
Use the mobile Filter drawer
On smaller screens, Maison uses the Filter drawer when the desktop layout cannot be displayed directly.
For example:
- Vertical becomes a drawer below the large-desktop breakpoint.
- Horizontal becomes a drawer on mobile-sized screens.
- Drawer remains a drawer.
The Filter button includes the number of active filters.
Inside the drawer, customers can configure their filters and use View results to close the panel and return to the updated product list.
Use the Layout switcher with filters
Enable Enable layout switcher when you want customers to change the product-grid layout.
The layout switcher appears in the product-list toolbar and works alongside filtering and sorting.
Use Show on model
The Show on model setting is available in the same Filtering and sorting group.
When enabled, Maison displays a Show on model control in the product-list toolbar.
This feature works with the product-card media setup and is separate from the actual filter conditions.
Disable it if your products do not use the related model-media functionality.
Supported filter presentation in Maison
Maison renders the filter data it receives in several different ways:
| Filter type | Maison display |
|---|---|
| Availability / Boolean | Switch |
| Standard list | Checkbox list with result counts |
| Color list | Round swatches |
| Price range | Range slider with minimum and maximum price inputs |
The available filter groups and values depend on the filtering data configured in SHOPLINE and the products in the current collection or search results.
Managing filters: SHOPLINE vs. Maison
It is important to separate the two responsibilities:
| Area | What it controls |
|---|---|
| Smart Search Recommendation | Creates, removes, activates, deactivates, reorders, and manages filter conditions and values. |
| Maison theme settings | Controls whether filtering is shown and how the filters are visually displayed on collection and search pages. |
If you want to add or remove a filter, use Smart Search Recommendation.
If you want to change the filter layout between Drawer, Horizontal, and Vertical, use the Maison theme editor.
Collection and Search behavior
The same facet components are used for both Collection and Search results.
This means settings such as Enable filtering, Filter layout, Collapse filters, active filters, color swatches, and price ranges behave consistently between these storefront areas.
However, the theme settings are configured separately in the relevant Collection template and Search results template.
Troubleshooting
If filtering does not display or work as expected, check the following:
- Make sure Enable filtering is enabled in the relevant Product list or Results settings.
- Confirm that the filter condition is active under Smart Search Recommendation > Filters > Default filter.
- If you recently added a filter, make sure products contain the data required by that filter condition.
- If you removed a filter from Maison but it still exists in SHOPLINE, remember that filter conditions are managed in Smart Search Recommendation, not the theme editor.
- If you only want to temporarily hide a filter, deactivate it instead of deleting it.
- If only one unwanted filter value appears, hide that value instead of deleting the entire filter.
- Make sure the current collection or search results contain products that can use the configured filter conditions.
- If you expect a sidebar, make sure Filter layout is set to Vertical and preview on a sufficiently large desktop screen.
- If filters appear in a drawer on smaller screens, this is expected behavior.
- If a filter group is closed when the page loads, check Collapse filters.
- If a color filter appears as normal checkboxes instead of swatches, check the filter label and make sure it matches the theme's color trigger.
- If a filter value is disabled, there may be no matching products for that value in the current result set.
- If the Price filter is missing, confirm that a Price filter condition is active in SHOPLINE.
- If sorting is missing, enable Enable sorting.
- Configure the Collection and Search results filtering settings separately if you want filtering available in both areas.
- Save your changes and test the filters on both desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Product Icons in Maison
How to Set Up the Quick Add Modal in Maison