Shopify Hydrogen: build a fully functional price range filter component
A price range filter component is a common feature in e-commerce websites. It allows users to filter products by price range, and often be used in collection pages.
In this article, I will show you how to build a fully functional price range filter component for a Shopify Hydrogen storefront.
Querying products and parsing price filters
In your collection route loader function, you will need to query the products and parse the price filters from the query parameters.
Get all filters from query parameters
All filters are stored in the request query parameters, and should have the same filter prefix to differentiate them from other params.
Query products with parsed filters
After parsing the filters, we will pass them to the collection query to get the products.
The COLLECTION_QUERY should also include the lowest and highest price products to be used for the price range filter.
Extracting applied filters and prettifying the price filter label
Some filters are not having any values, so we need process the params to extract the applied filters and prettify the price filter label.
That's all the data needed for the price range filter component. Send them to the client by returning in the end of the loader function.
Building the price range filter component
Since Hydrogen is built on top of Remix, this component will simply be a React component.
I will use Radix UI for the slider component, and Tailwind CSS for the styling.
The utils needed for the price range filter component are:
You might include 2 inputs for the min and max price to make it more user-friendly. The 2 inputs values will be synced with the slider.
That's how we build a fully functional price range filter component for collection pages in Shopify Hydrogen.
Check out the demo video below:
References
The component is fully open-sourced and available on GitHub.
Bonus
I'm building the first-ever Shopify Hydrogen theme customizer and CMS, including multiple Hydrogen Themes (all are free and open-sourced). If you are interested in building your own Shopify Hydrogen online store, checkout these links:
Happy filtering .