Author: Henry Pham 181 views

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 or not. If you turn it on, when your customers click on a box, it’ll be shown on the top of the filter. Besides, you can also change the name applied filter.
  • Open filter button icon: You can choose an icon here.
  • 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 hide Check box, Hide label, 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 button, Title, Value content, Name, Count, Color, Selected, Values, Button, Range. 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.

Leave a Comment

On this page