Applied Filters

Author: Henry Pham 785 views

1. Generals

From the left side (Elements tab) > Collection Page element, you will see the Applied Filters element in the list of elements. Drag and drop it to any position of the selected structure. This element should be used on the Collection page. And you can drag this section to Filter Sidebar when you don’t wanna show the Filter element, just show the Availability mode of the product.

2. Content

  • Layout: Choose a layout for the Applied Filters here. We have 2 choices for you: Horizontal and Vertical layout.
  • Icon: You can pick an icon for the Applied Filters here. You also can upload your custom icon.

You can view the video below to know how to configure the Applied Filters Content tab:

3. Design

3.1. General

  • Background: Configure the background color for the Applied Filters element here.
  • Box Shadow: Allow you to add a shadow for the Applied Filters element by changing the Blur, Horizontal, Vertical, etc…
  • Border: Choose border style for the Applied Filters element here. You also can choose None style to disable the border.
  • Border Radius: Allow you to configure the border-radius for the Applied Filters element, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.

3.2. Filter Value

  • Typography, Text ShadowBox Shadow, WidthHeight, Text Color, BackgroundBox Shadow, Border, Border Radius, Outline, Transition, Spacing options… You guys can configure those options above the same as the General option.

Click here to learn more about How to configure options in the Design tab.

3.3. Icon

  • Color: Choose a layout for the Filter Value here. We have 2 choices for you: Horizontal and Vertical layout.
  • Size: You can pick an icon for the Filter Value here. You also can upload your custom icon.
  • Rotate: Configure the rate for the Applied Filters icon here.
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Applied Filters icon here. This option is available for desktop, tablet, and mobile devices.

You can view the video below to know how to configure the Applied Filters Design tab:

Leave a Comment

On this page
Enjoy a free 3-day trial. Then get your first month for $1. Try Now.