Sort and Filter Mobile Product Lists in Sparkforge Stores

Mobile shoppers need fast ways to narrow a catalog on a small screen. The Sparkforge Product List Page (PLP) now ships with mobile-first Sort and Filter controls and a live product count.

Mobile Sort (bottom sheet)

A Sort button appears in the top bar of the PLP. Tapping it opens a bottom-sheet modal.

Sort options

• Date — Old to New, New to Old
• Alphabetical — A-Z, Z-A
• Price — Low to High, High to Low

Dismiss the sheet by tapping outside or swiping down. Use Default Sorting in the widget panel to set first-load order.

Product titles on the PLP keep the existing ellipsis truncation. Full-title wrapping applies on other store pages, not here.

Mobile Filters (full-screen modal)

The Filters button opens a full-screen modal with a sticky footer.

Filter types

• Availability: In stock / Out of stock
• Price range: From and To numeric inputs

Apply updates the grid instantly. Clear Filters resets selections. The Filters button shows a badge with the active filter count.

Live product count

A running count at the top of the PLP updates as filters are applied or cleared so shoppers know how many products match.

Enable Sort and Filter

1. Open the page in the builder and select the Product List element.
2. In the widget panel, toggle on Enable sorting and Enable filtering.
3. Configure styling: bar background, button text colors, Apply and Clear button styles.
4. If the catalog is large, raise the per-page product count to reduce pagination.
5. Click Save or Publish.

Defaults to know

• Default sort order is Date, Old to New.
• Both Availability options are selected by default, so all products show until a shopper refines.
• Sort and Filter only appear on the product list page, not on detail pages.