Product Filters

Instantly integrate a smart product filters on any pages including collections and search result pages. Let your customer navigate your store collections in instant.

Sledge provides several widgets you can use to integrate it with your store.

Available widgets :

If you're using Hydrogen or Next.js,
make sure to install the @sledge-app/react-instant-search package first.

npm i @sledge-app/react-instant-search

Product Filter

Product Filter is an Instant Search's widget you can use to search your products on a single page. This widget is also known as a "Product Listing Page."

Product Filter

Here is a step-by-step guide to adding this widget with block.

  • in the Sledge Dashboard, Scroll to the Add product filter section, click Add Block to Theme.
sledge-image-docs
  • You will be directed to the Editor, and the Product Filter will have been added automatically.
sledge-image-docs
  • You can rearrange Product Filter by Click and drag the ⋮⋮ icon
  • You can customize the Product Filter by click the Product Filter Section.
sledge-image-docs
  • When ready, Save your changes.

Learn more

Congratulations! Now that you've learned usage of Product Filters widgets, you can start implementing Product Filters into your store.

If your store requires custom layout or custom callback for the widget, you can learn more on how to modify them based on your needs :