Sort Button

A sort control where each button applies one specific order, for sort UIs built from radio buttons.

Last updated

August 14, 2026

How to use

Set Sort to the order this button applies — a built-in order, or Custom to sort by a CMS field (see below).
Set Display Text for the label, or leave it empty to use the automatic label for the selected order.
Include one button with Sort set to Relevance — it's what shows as selected before the customer picks anything, and it's their way back to Catalog Display's own default order.
Choose Mode: Config to style the built-in Radio/Button control — Default, Hover, and Selected (text color, border, background) plus the shared Style, Font, and Transform controls — or Connect to use your own design instead, via ⦿ Selected / ⦿ Unselected.

Optionally set Tracking to record sort selections in Framer Analytics.

Built-in orders and custom CMS fields

Choose Sort from the built-in orders — Relevance, Title A-Z, Title Z-A, Price Low-High, Price High-Low, Newest, or Best Selling — or set it to Custom to sort by any CMS field synced to your catalog: enter the exact field title in CMS Field (it must match a synced field title) and choose Order (Low → High or High → Low).

Radio vs. plain buttons

In Config mode, Style chooses between two chip types:

`Style`	What you get
`Radio`	A rounded control with an icon slot (fill color or custom image), plus configurable gap, padding, and horizontal/vertical layout — built for a row or list of sort options with a visible selected-state indicator.
`Button`	A plain button — just the `Default`/`Hover`/`Selected` text color, border, and background, with no icon or layout controls.

Keeping the selected state in sync

Selecting a button updates shared sort state for the whole page — the newly selected button switches to its Selected style, every other Sort Button deselects, and the choice is written to the URL so results are shareable. Because Sort Button and Sort Dropdown read the same shared state, you can technically mix both patterns on one page — but stick to one per page for a consistent UI.

Selecting Relevance is the exception — it clears the customer's sort choice entirely, returning the grid to Catalog Display's own default order.

Connect mode

In Connect mode, the built-in Style controls disappear and you connect your own design instead: ⦿ Selected for the chosen state and ⦿ Unselected for every other state. This instance still drives the same shared sort state — clicking it applies its Sort order and switches it into its ⦿ Selected design, exactly as Config mode's Selected style does.