Help shoppers narrow and order a collection with three elements in Insert → Shopify → Collection:
Option filter — filter by a product option or another Shopify filter.
Color filter — the same filter with swatch styling for color options.
Collection sort — a control for changing the sort order.
These elements are built for collection templates, alongside a Product catalog (or a custom repeater over collection products). Place them above or beside your product grid.
Set up filters in Shopify first
Filters and sort options are configured in Shopify, not in Instant. Most of the setup happens in Shopify's free Search & Discovery app: install it from the Shopify App Store, then add the filters (by product option, tag, price, and so on) you want available on your collections.
Instant reads whatever filters that collection exposes in Shopify. If a filter isn't set up there, it won't appear in the Design panel and won't show on your storefront — so configure Search & Discovery before adding these elements.
Option filter
Select the Option filter and choose which filter it controls in the Design panel. The list comes from the collection's own Shopify filters, grouped into General filters and Product options, so a filter only appears if it's set up for that collection in Shopify.
Shoppers click values to narrow the grid. Style the active and inactive states so selected values are obvious. Add one Option filter per filter you want to expose, and label each layer in Layouts & layers.
Color filter
Color filter uses the same filter mechanism as the option filter but with swatch styling, so it's the natural choice when color is the main way shoppers browse. Point it at your color filter the same way you'd set up an option filter.
If you match variant options by position rather than name, keep your color option in a consistent position across products — see Variant pickers.
Collection sort
Collection sort inserts a dropdown that shows the selected sort option and lets shoppers switch between the sort orders Shopify supports for the collection. Place it near your filters — typically at the top of the grid on desktop, stacked on mobile.
Clear filters and load more
Two collection-template actions pair well with filters, both added from the Action section:
Clear filters — resets all active filters at once. Add it to a Button or Text link.
Load more products — fetches the next set of products without leaving the page.