Filtering products by using range sliders

On this page

• Add a Custom Range Slider to the app
• Create a Custom Range Slider
• Tutorial video

Add a Custom Range Slider to the app

You can easily create range sliders from values of price, weight, and variants' price when setting corresponding filter options and selecting Range in the drop-down of Option Display.

Otherwise, to offer a range slider from values of color, height, size, title, tags, and product Metafields in your filter tree, those values need to first be added to the app.

To import those values into the app:

1. From our app’s dashboard, go to Filter > Custom Range Sliders
2. Click Add custom range slider. Select the product attribute that you want to use its values to create a range slider in the drop-down of Product attributes

• You have successfully added the Metafield to the app’s admin; and

  The Metafield’s values are numerical.

  To build a range slider from the values of a tag:

  • From Custom Range Sliders, select Tag in the drop-down of Product attributes
  • If you want values from a specific tag, then you select Using prefix and fill in the prefix under the Filter the tags by a prefix heading
  • For instance, you sell robot vacuums and you want to offer a range slider that lets your customers filter products by how much ground the vacuums can cover when fully charged. You add tags with the prefix spacearea: and corresponding values to those products. Then on the Edit custom range slider page, you enter spacearea:under the Filter the tags by a prefix heading to import all values of that tag into the app.

3. Save.
4. After successfully importing those values into the app, those values will be grouped and assigned a name in the Name column of the Custom range sliders page.

For example, the name can be Custom range slider 1, or Custom range slider 2. We suggest you memorize the corresponding names for further steps.

Create a Custom Range Slider filter option

After adding values for a custom range slider to the app, you want to offer a range slider in a filter tree on your storefront:

1. Go to the Filter > Manage filter trees
2. Choose the filter tree that you want to display the range slider filter
3. Click Add filter option
4. In the drop-down of Option Type, find the name of the custom range slider that you have been assigned after successfully adding its values to the app’s admin. Select it.
5. In the Option label section, enter how you want this range slider to be named on your storefront.
6. Customize slider range, slider step, and delimiter to your liking:
   • Slider range defines the number of ranges separated in the slider.
   • Slider step specifies the size of each movement between values.
   • Delimiter is the character used as the thousands separator and the character must be "." or ",".

   • For instance, with the number 1000, when you fill in “ .” in the Delimiter section, the number will be displayed on your storefront as 1.000. You can leave this option empty to finish setting up the range slider. 

     

7. The following advanced setting will be provided:
   • Hide value text boxes setting: when you disable this feature, your customers can manually adjust the range of values.
8. Save on the Edit filter option page.
9. Save on the Filter options page.
10. Check how the new range slider appears on your storefront.

In the example of selling robot vacuums, the range slider will be displayed on your storefront as the following:

Tutorial video

If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at support@boostcommerce.net.