Sort and Filter Bar

Updated 21 days ago

The Sort and Filter Bar helps users refine and organize products on collection or listing pages. It makes browsing easier by allowing users to sort items and apply filters based on their preferences.

Visibility

  • Enable or Disable – Use the eye icon to show or hide the bar

  • Delete – Remove the section if it’s no longer needed

Sort and Filter Settings

Sort

Use the eye icon to enable or disable the sort option.

This allows users to organize products based on criteria like price, popularity, or newest items.

Text Style:

You can customize:

  • Text – Add the label (e.g., “Sort”)

  • Font – Choose a font that matches your brand

  • Size/Weight – Adjust how bold or subtle the text appears

  • Line Height – Control spacing

  • Letter Spacing – Fine tune spacing between characters

  • Text Color – Choose a readable color

  • Alignment – Position the text

  • Capitalization – Set how the text appears

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Icons (Left & Right):

  • Choose or Upload Icon – Add icons for better visual clarity

  • Icon Color – Customize the color

Filter

This allows users to narrow down products based on attributes like size, price range, or category.

Text Style:

You can customize:

  • Text – Add the label (e.g., “Filter”)

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Border:

  • Color

  • Width

  • Sides

Icons (Left & Right):

  • Choose or Upload Icon

  • Icon Color

Sort and Filter Style

Control the overall appearance and layout of the bar.

  • Background Color – Set the background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the bar

  • Position – Decide where the bar appears

  • Relation – Define spacing between elements

  • Format – Choose the layout style

  • Enable/Disable Toggle – Turn the style on or off

Column Selector

You can enable or disable the column selector option.

This allows users to change how products are displayed.

  • 1 Column – Choose or upload an icon

  • 2 Column – Choose or upload an icon

  • 3 Column – Choose or upload an icon

Colors:

  • Idle Color – Default icon color

  • Active Color – Highlighted icon color when selected

Content Background and Padding

Set the background color and adjust padding for the content area 

Background and Spacing

This controls the layout of the entire sort and filter section.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Reduces browsing friction and helps users find products faster

  • Improves product discovery across large catalogs

  • Increases conversion rates by matching users with relevant products

  • Supports better decision-making with sorting options

  • Makes the shopping journey feel more personalized

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read