2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

Search and filters

The values of `filter` inside `smootify-search-discovery`.

v2.0 beta

On this page

At a glance
Where it can go
Values

At a glance

data-action="previous"data-action="next"

Previous and next

Shows: One page at a time.
Good to know: The best choice for large catalogs.

data-action="page"

Page numbers

Shows: One page at a time, with the numbers to jump to, between previous and next.
Good to know: On a collection, it needs the Availability filter (see Page numbers).

data-action="load"

Load more

Shows: The next page, added below the products shown, on a click.
Good to know: Every page adds cards, which slows phones down on large catalogs.

data-action="load-in-view"

Load as the visitor scrolls

Shows: The next page, added below when the button scrolls into view.
Good to know: Every page adds cards, which slows phones down on large catalogs.

More in the guide.

Where it can go

Inside smootify-search-discovery.

Values

Attribute and value	What it is	Notes
`filter="count"`	Result count	on text
`filter="active"`	Active filters	Template: one per active filter, a click removes it; on container, link, button
`filter="active-label"`	Active filter label	on text
`filter="active-count"`	Active filter count	on text
`filter="empty-state"`	Empty state	on container
`data-action="load"`	Load more	on button; inside smootify-search-discovery, smootify-search-page
`data-action="previous"`	Previous page	on button; inside smootify-search-discovery, smootify-search-page; also read as prev
`data-action="next"`	Next page	on button; inside smootify-search-discovery, smootify-search-page
`data-action="load-in-view"`	Load when in view	on button; inside smootify-search-discovery, smootify-search-page
`data-action="page"`	Page number button	Template: one per page number shown; the current page gets is-active; on button; inside smootify-search-discovery, smootify-search-page
`filter="page-number"`	Page number	Inside the page number button; without it, the button’s text; on text; inside smootify-search-discovery [data-action=“page”], smootify-search-page [data-action=“page”]
`filter="page-ellipsis"`	Page gap	Template where page numbers are skipped; optional; on text, container; inside smootify-search-discovery, smootify-search-page
`filter="page-current"`	Current page	on text; inside smootify-search-discovery, smootify-search-page
`filter="page-total"`	Total pages	Empty until the total is known; on text; inside smootify-search-discovery, smootify-search-page
`type="reset"`	Reset the filters	on button; inside smootify-search-discovery, smootify-search-page