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 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 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.
Price Slider Display style
There are 5 options to choose:
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
Price Slider Configuration
Step 1: Go to the Attributes configuration field
Admin Panel > Stores > Attribute > Products
Step 2: Choose the attribute
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
Save Attribute and check the result.