SORT & FILTER

Sort

This section helps you design how sorting options appear inside your app so users can easily reorder products by relevance, price, popularity, or anything else you offer.

Header

You can switch the header text on or off using the eye button. Once active, you can adjust the text, font, size or weight, line height, letter spacing, text color, alignment, and capitalization. 

You can also enable or disable the header icon, choose or upload an icon, adjust its color, and decide its position.

The header background lets you pick a color, radius, and padding, while the header border gives you control over border color, width, and sides.

Content

This is where you shape how the actual sort options look. You can customize the text style including font, size or weight, line height, letter spacing, idle text color, active text color, and capitalization.

For the options background, you can choose different colors for idle and active states and add padding.

Options border lets you adjust the border color, width, and sides.

Content background and spacing

You can define the overall background by choosing a color, adjusting the radius, and adding padding.

Border settings allow you to pick a color, set the width, and select which sides should have a border.

Filter

This section shapes how the filter panel appears in your app, giving you full control over text, icons, backgrounds, and the visual style of every filter element.

Under the filter panel, 

Header

You can enable or disable the header text using the eye button. When active, you can edit the text, adjust the font, size or weight, line height, letter spacing, text color, alignment, and capitalization. 

The header icon can also be switched on or off. You can choose or upload an icon, select its color, and position it on the left or right. 

The header background allows you to set a color, radius, and padding, while the header border gives you the freedom to customize the border color, width, and sides.

Filters style

This section lets you fine tune every visual part of your filters. You can customize the filter text style, choose the right side icon, adjust the drawer text style, and modify the appearance of checkboxes. 

You can also set the look of the price range, along with options background and options border for each filter type.

Background and spacing

You can define the overall panel background by choosing a color, adjusting the radius, and setting padding. 

The border section lets you choose the border color, width, and sides for clean structural control.

Under action panel, 

Reset

You can customise the Reset button’s text style, including the font, size or weight, line height, letter spacing, text color, and capitalization.

You can also style its border by adjusting the color and width, and choose or upload both the left and right icons along with their colors.

Apply

The Apply button follows the same structure. You can edit its text style, set the border color and width, and choose or upload icons for both the left and right sides with full color control.

Button settings

You can define the button layout by adjusting the radius and padding, and selecting the relation between buttons such as side by side or spaced apart.

Background and spacing

You can control the background of the action button area by selecting a color, setting the radius, and adjusting the padding.

You can also customise the border by choosing the color, width, and the sides where the border should appear.