Price Filter
The price filter block renders a pair of min and max price inputs that let visitors narrow products by price on collection pages. It integrates with Shopify’s native filter.v.price URL parameters and uses Alpine.js for debounced input handling and a clear button. The block supports configurable price bounds and can span multiple columns in the filter grid layout.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Filter group label | The heading text above the price inputs. Defaults to “Price.” |
| Minimum price | The lowest selectable value in the min input. Defaults to 0. |
| Maximum price | The highest selectable value in the max input. Defaults to 1000. |
| Price step | The increment for the number inputs. Use 1 for whole dollars or 0.01 for cent-level precision. |
| Column width | How many columns the filter occupies in the filter grid on desktop: 1, 2, or 3 columns wide. |
Used in
Section titled “Used in”- Set the minimum and maximum price to match the actual range of products in the collection. A range of 0 to 1000 works as a sensible default, but tighter bounds give visitors a better sense of the available price spread.
- The inputs are debounced at 500 milliseconds, so filters apply automatically after the visitor stops typing. There is no submit button needed.
- A “Clear Price Filter” button appears only when a price filter is active, keeping the interface clean when no price constraints are set.