Filter
The Filter element helps customers quickly narrow down products on your collection pages, making it easier to find exactly what they’re looking for. By allowing shoppers to filter products based on criteria such as availability, price, color, size, product type, vendor, and other available options, you can improve the shopping experience and help customers discover products more efficiently.
1. How to add the Filter element
Navigate to Elements → Collection Page, then drag and drop the Filter element into your desired location on the page.
Note: The Filter element only works on Collection pages and must be placed in the same section as the Products element. It displays the filters you’ve configured in Shopify, such as product type, vendor, color, size, price, availability, and more.
2. Configure filter in Shopify
The Filter element works with the filter options configured in Shopify’s Search & Discovery app. To use filters in EComposer, first install Shopify Search & Discovery on your store and add the filters you want to offer to your customers.
Once your filters are set up in Search & Discovery, they will be available for use with the Filter element in EComposer.
Step 1. Install Shopify Search & Discovery
Before using the Filter element, make sure you’ve installed Shopify’s Search & Discovery app.
Step 2. Configure collection filters
Click Customize Filters to manage the filters available for your store.
Here you’ll see all existing filters configured for your storefront. These filters will appear in the same order within the EComposer Filter element.
To create a new filter, click Add filter in the top-right corner.
Select the filter source you’d like to add, then save your changes. Once configured, the new filter will automatically become available in the EComposer Filter element.
3. Content
The Content tab lets you configure how the Filter element behaves and what information is displayed. You can customize the filter layout, available options, labels, menu, and other settings to match your storefront.
3.1. General
The General section contains the basic settings for the Filter element, allowing you to customize its title, layout, position, and display behavior.
- Filter title: You can freely enter the name for this Element.
- Filter type: Choose how the Filter element is displayed on your collection page.
– Block: Displays the filters in a sidebar beside the product list.
– Collapse & Filter position: Select the Collapse filter type to display filters inside a collapsible drawer. You can also choose whether the drawer opens from the left or right side of the page.
– Dropdown: Displays the filters above the product list and expands downward when opened.
You can change the icon for expand and collapse here:
Pushdown: Put the filter element on a row above of product list to display it correctly.
- Show applied filter: You can choose this or not. If you turn it on, when your customers click on a filter, the filters be shown on the top of the filter bar. Besides, you can also change the name of the applied filter.
- Show filter result count: This option lets you see how many results are found when you filter.
- Open filter button icon: You can change the icon of the Filter button when the Filter layout is set to Collapse or Pushdown only.
- Enable Ajax filter: Apply selected filters instantly without reloading the page.
- Close filter after click option: Automatically close the filter panel after a filter option is selected.
- Display as accordion: Display filter options in collapsible accordion sections.
- Accordion default open: Keep accordion sections expanded by default.
- Open only one accordion at a time: Allow only one accordion section to remain open at a time.
- Show selected/reset: Display the selected filter options and provide a reset option.
- Hide checkbox: Hide checkboxes displayed next to filter options.
- Show number count: Display the number of products available for each filter option.
- Collapse on mobile and tablet: Collapse filter sections by default on mobile and tablet devices.
- Default open collapse on mobile and tablet: Keep the filter sections expanded by default on mobile and tablet devices.
- Hide zero count: Hide filter options that have no matching products.
- Content alignment: Set the alignment of the filter content.
- Horizontal: Arrange the filter content horizontally.
- Vertical: Arrange the filter content vertically.
3.2. Price filter
The Price filter allows customers to filter products based on their price range. The available price range is automatically determined by the product prices in the current collection.
You can choose from three price filter types to control how the price range is displayed: Slider, Custom segment steps, and Custom price for segment.
- Slider: This will show the price filter as a slider with a draggable point on each end.
- Custom segment steps: This will separate the price into segments depending on the steps. For example, if the highest priced product in the collection is 350$ and you set the step to 10, then each price range would be 350/10 = 35$.
- Custom price for segment: You can choose specifically the range of the price. For example, if you choose 100, then the price range will be 0–100 and 100–200.
3.3. Color filter
The Color filter allows customers to filter products by color. The available color options are automatically taken from the color variants of products in the current collection.
You can also choose to display the color options as color swatches instead of text. To ensure the swatches display correctly, enter the exact color name used for the corresponding product variant in Shopify Admin.
This makes it easier for customers to quickly find products based on their preferred color.
- Show options as color: Only use for “Color filter”. If you want to show a color swatch layout instead of color text, you can write the correct color name that you set in your Shopify Admin to the field.
To display color options as swatches, you need to install the Custom Color Swatches extension. In the EComposer editor, click Here next to Set your color, then click Install now to install the extension.
Under the Settings tab, configure the color name and its corresponding color. Make sure the color name matches the color variant name used in your Shopify products.
- In addition, you can choose to hide the Checkbox, Label, Number count, and choose Align.
3.4. Change text
Under this tab, you’re free to change the text for Filter selected, Filters selected, and Reset.
3.5. Menu
With a navigation menu, you can show the menu items with the Collections, so your customer can navigate to other collection pages.
To show the menu here, go to Shopify Admin → Content → Menus and create a menu with the items you want to display. Then, select the created menu in EComposer.
4. Design
Use the Design tab to customize the appearance and layout of the Filter element. You can adjust the styling, spacing, colors, typography, and other visual settings for each part of the filter.
4.1. General
Customize the appearance of the filter box, including its background, border, shadow, corner radius, and spacing.
4.2. Filter Box
Customize the appearance of the filter box, including its background, border, shadow, corner radius, and spacing.
4.3. Filter Button
Customize the appearance and interaction of the Filter button, including its text, colors, size, spacing, and hover effects.
4.4. Filter Button Icon
Customize the Filter button icon, including its size, color, position, rotation, and spacing.
4.5.Title
Customize the filter title, including its alignment, text style, color, effects, and spacing.
4.6. Option count
Customize how the number of available options is displayed, including its alignment, text style, color, and spacing.
4.7. Option Color
Customize the appearance of color options, including their size, colors, borders, shadows, spacing, and different states.
4.8. Option value content
Customize the layout of the filter values, including their size, height, corner radius, and spacing.
4.9. Option name
Customize the appearance of option names, including their alignment, text style, color, border, effects, and spacing.
4.10. Option selected
Customize the appearance of selected filter options, including their text style, color, alignment, and spacing.
4.11. Option values
Customize the appearance and layout of filter values, including their text style, color, spacing, and checkbox settings.
4.12. Reset button
Customize the Reset button, including its text, colors, size, border, spacing, and hover effects.
4.13. Menu
Customize the Collection menu style, including its width, spacing, and item arrangement.
4.14. Menu title
Customize the menu title, including its text style, color, effects, and spacing.
4.15. Menu icon
Customize the menu icon, including its size, color, position, background, border, and spacing.
4.16. Price filter slider
Customize the price filter slider, including the price text, slider track, slider thumb, colors, size, and spacing.
