Grid With Sort Pills
Working sort pills reorder the grid live, bestselling, price, and newest.
Working sort pills reorder the grid live, bestselling, price, and newest.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Grid With Sort Pills is the category grid with sorting that actually works in the block, four pills, bestselling, both price directions, and newest, reordering the grid through real state. The pills replace the dropdown sort control, visible options get used, hidden ones get defaulted.
A client block, the sort logic is a simple comparator over one product array, swap in your live data and the interaction holds.
Reach for this block on category pages where sorting is the main control and filters would be overkill, single aisle stores especially. For filter heavy catalogs use the filters sidebar grid.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the four sort category page. Other pills:
Tip: price low first and high first as separate pills beats a toggling pill, each tap should do one legible thing.