Sort Dropdown

A dropdown that sets the catalog's sort order — price, newest, best-selling, and more — instantly and synced to the URL.

Last updated

August 14, 2026

How to use

Choose Mode: Connect to use your own dropdown design, or Config to style Framer's native select instead.
In Connect mode, connect your design to ⦿ Design and nest Sort Dropdown Value inside it.
In Config mode, style the native dropdown via Styles — font, transform, padding, radius, Selected/Hover states, and the chevron icon.
Build the Options list — the sort choices offered, up to 8.

Optionally set Tracking to record sort selections in Framer Analytics.

Connect vs. Config mode

`Mode`	What it gives you
`Connect`	A fully custom dropdown built from your own Framer design, connected via `⦿ Design`. Show the active sort inline with Sort Dropdown Value component for the current-selection label.
`Config`	No design to connect — the component renders a native HTML select, styled entirely through the `Styles` panel (font, transform, padding, radius, Selected/Hover, chevron icon).

Choosing which sort options to offer

Build the Options list to control which orders the customer can choose from, up to 8: each entry is Relevance, Title, Price, Newest, Best Selling, or Custom, with a matching order direction and an optional display-label override that falls back to an automatic label if left blank. Custom entries also name the synced CMS field to sort by. Best Selling pulls live Shopify best-selling order rather than a static field.

Put Relevance first in the list — it's the resting order (no sort in the URL yet), and picking it clears any customer-applied sort and hands control back to Catalog Display's own Default. The runtime default isn't a separate setting in this list or in the Butter plugin — it's whatever Default is set to on Catalog Display.