Filter
The filters feature helps your customers find products in a faster way and also increases the conversion rate. Storefront filters allow you to set up product filtering on your collection pages. When you enable filtering, customers can filter your products by availability, product type, color, or other options to find the products that interest them the most. From Elements > Collection > Filter
Note: This Element only works on the Collection page. It only shows when you have already configured a filter for your collection on Shopify. Please go to Shopify admin -> Online store -> Navigation -> Collection and search filters to set your filters.
To configure Content and Design for Collection Filter, you just need to click on the Element.
1. Content
1.1. General
- Filter title: You can freely enter the name for this Element.
- Filter type: There are three types of filters for you to choose including Block, Collapse, and Drop-down.
- 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.
- Open filter button icon: You can choose an icon here.
- There is also an Enable Ajax Filter option, which prevents the page from having to refresh every time the customer chooses a filter.
- Beside, Collection Filter allows you to choose Display as accordion, Show selected/reset, Hide checkbox, Show number count, Collapse on mobile and tablet, Hide zero count or not.
- Content alignment: This option allows you to choose between Vertical/Horizontal alignment.
1.2. Color filter
- Show options as color: Only use for “Color filter”. If you want to show color instead of text, please click on “Set your color here” > Choose an extension named “Custom swatch colors” > Settings > Set name and choose colors.
- In addition, you also can choose to hide the Check box, Label, Number count and choose Align.
1.3. Change text
- You’re free to change the text for Filter selected, Filters selected, and Reset.
2. Design
Collection Filter allows you to configure design for General, Filter box, Filter button, Filter button icon, Title, Value content, Name, Count, Color, Selected, Values, Button, Range and Menu options. In each main option, there are so many options inside to change Color, Background color, Border, Border radius, Width, Spacing, etc. Please go here to figure them out.
