Magento 2 Price Slider

Price always is one of the most important factors effects on the customer purchase decision. Notices that, Mageplaza is proud to release the Layered Navigation for Magento2 which integrates a wonderful feature: Price Slider/ Range filter

With various display style options, the easy-to-use frontend and effortless configuration, Price filter feature is a must-have feature on your store’s Layered Navigation that worths your money.

How it works

Look at the navigation on the category page, and open Price Attribute section, it is possible to slide the bar to any point of the price slider they want, meanwhile, you are allowed to set the maximum and minimum price for filtering from store backend. Basing on the chosen price range, the matched list of products will be shown via Ajax without reloading the whole page.

Price Slider Screencast

Why you need a price filter?

Customer respond to price

According to Retailing Today, 81% of shoppers conduct online research before making big purchases; and price is the most popular sorting options on the search engine. Every shopper has a price range in mind when shopping for an item. More choices, more sales. There are no reasons can approve that you don’t need a price filter for your layered navigation.

Better Price Filter - Better User experience

Provide the price filter is enough? Of course not, you need to make this filter to be easy-to-use but still powerful.

Generally, a customer just stays on a website in the average of 10-20 seconds, that is too short while your stores have thousands of items to show. With the Price Filter feature from Mageplaza Layered Navigation, you will have 4 display styles: Slider, Range, Slider and Range, and List. Especially with the Price Slider, the shoppers just need to drag and drop the bar on the slider to filter the price ranges as they need in a second.

The more wonderful your price filter are, the better use experience and the higher conversion rate. It’s one of the greatest ways to boost the sales significantly.

Related post:

Infinite Product Scroll Feature of Layered Navigation Multi Filter Feature of Layered Navigation

Price Slider Display style

There are 5 options to choose:

• Default

• Flat UI

• HTML5

• Modern

• Nice White

• Simple dark

Note: To make the Price Slider Display style config on Design Configuration tab works, please make sure you have set the Display type on the Attribute Configuration > Color to be Slider.

Price Slider Configuration

Step 1: Go to the Attributes configuration field

Go to Admin Panel > Stores > Attribute > Products

Step 2: Choose the attribute  

Choose Price attribute > Layered Navigation properties tab

Step 3: Modify the Price Filter as you need

In this section, you can choose 1 of 4 Display Style, enable/ disable the Search Option, modify the Expand by default and the Allow Multiple Filtersettings.

Step 4: Save the configuration

Click Save Attribute and check the result.