Order by Filter

Order by Filter allows your customers to sort out the products on the shop page based on various criteria. With ShopEngine’s built-in widget, it is easy to integrate.

How to Add Order By Filter? #

If you have a Shop page where you want to add ‘Order by Filter’, open that page.

Or, you can create a new shop page using ShopEngine’s Shop Template.

Step 1: Add a Shop Template #

Follow the way described here and create a shop template.

Step 2: Add the Order by Filter Widget #

If you have created a shop page, you will land on a page like this.

shop page template layout of shopengine

On the left bar, type ‘Order by filter’. The widget will be in the list. Drag and drop the widget on the page where you want to add it.

how to add order by filter widget

Step 3: Customize Order By Filter Widget #

Once you add the widget, it will appear like a search box. There is a dropdown list from which users can choose how they want to order the products.

set the style for order by filter

You can change the dropdown style to list style.

There are other customization options too. Check the left bar and customize the settings as you need. Customize the layout of Order by Filter and update the Shop page.

customize order by filter widget

The options are for individual changes on the page.

Order By Filter Type: Choose dropdown or list.

Height: Change the height of the search window

Typography: Change the typography from the list

Text Color: Customize the text color for the search window

Border Type: Choose the Border type for the search window

For each customizations, the layout of the widget will change.

how to customize order by filter widget

Step 4: Update the Page #

Once you set everything, check the preview and update the page.

What are your feelings
Updated on February 17, 2022