Product List Page Filter Settings

When designing the store layout, you can add the filters for the product list page to assist product search in the online store. There are three types of filters: Subcollection/Subcategory, Tag Filter, and Menu Column. 

1. Applicable themes

Impress, Bloom, Bobo, Deck, Simcoe, Casual, Expect

Note: If the Filter & Color palette extension is enabled, the tag filter will be hidden.


2. View at the storefront



3. Setup Instructions

Go to [Online Store] > [Design], click on Design to enter the theme editing page. Select "Collections" at the top of the page, then click Side column filter > Subcollection.

i. Subcollection / Subcategory 

The subcollection component shows the categories at different levels, which is auto-generated from the Main Menu in the Menu Navigation of SHOPLINE Admin.
To show multiple levels of category, you need to configure both the second-level menu and the third-level menu as product categories in this menu.
For example
First level
Second level 
Third level
WOMEN'S (Category)
Jackets (Category)
Shirts (Category)
MEN'S (Category)
Jackets (Category)
Shirts (Category)
PACKS & GEAR (Category)
Wallets (Category)
Bags (Category)
Accessories (Category)
HOME (Category)
Furniture (Category)
Lighting (Category)
Textiles (Category)
Tableware (Category)

You can edit the head menu title in [Online Store] > [Navigation]. Click on any category menu to view the same-level category and subcategory. You can configure the number of products under the category and location to display.


Click Finish at the bottom left corner of the page, and click Save at the top right corner. 


ii. Tag filter

The tag filter is contributed by product tags. Customers can select single or multiple tags to quickly search products. To use this filter, please tag products beforehand. You can tag products according to seasons, styles, and texture.


On the theme editing page, select "Collections" at the top of the page, then click Side column filter. Select or add the Tag filter component. Select all tags or specified product tags to display to suit your needs.


After configuring the tags, you can preview the webpage on the right of the editing page.
Note: The tags on the product list page will only show the tags for the current product list. Tags that do not match the current product will not be shown.
Click Finish at the bottom left of the page, and click Save at the top right of the page.

iii. Menu column

The menu column is very useful content. You can set up a navigation menu based on the store Admin, then display various menu levels on the store webpage. 

In the "Collections" tab, click add content and select menu column. Select a navigation menu and you can view the display result on the right of the editing page. 


Click Finish at the bottom left corner of the page, and click Save at the top right. 





Have more questions? Submit a request