Filter

Author: Jade Abit 2570 views

The filters feature helps your customers find products in a faster way and also increases the conversion rate. When you enable filtering, customers can filter your products by availability, product type, color, size,…. or other options to quickly find the products that interest them the most.

From Element list > Collection page > Filter

Note: This Element only works on the Collection page. The Filter content only shows when you have already configured a filter for your collection on Shopify.

Surely you can manage which content like color variants, size, variants , brand options, price ranges,…. showing or not on this Filter
Please go to Online store -> Navigation -> Collection and search filters to set your filters.

Click Customize filters button

Press Add Filter

Now you can see the Option list, choose which options you would like to have on the Filter

You can even choose which variant values of option to show up

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.

Block: the filter is showing in a collumn beside of the product list

Collapse: filter bar is showing up as a drawer popup overlaying product list

Drop-down: put the filter element on a row above of product list to display it correctly

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.

Open filter button icon: You can change the icon of Filter button when the Filter layout is set to Collapse or Pushdown only

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 swatch layout instead of color text, you can write the correct color name that you set in your Shopify Admin to the field

Note: As you can see, all the color circle are in white by default because you haven’t defined colors yet.

To set up customize color swatch layout, you must install the Custom Color Swatches extension first

Under the Settings tab, choose which color associated with which color name

Result:

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.

1.4 Menu

With a navigation menu, customer can easily make their way around your website from Collection page and get to where they want to go, whether it’s your homepage or your about us page, contact us page

This Menu is also built from your Shopify Admin -> Navigation

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.