How to Sort and Filter Products Ecommerce Site Builder

Enhancing the discoverability of products on your ecommerce site is crucial for a seamless shopping experience. With Stack, you can easily add sorting and filtering options to your product list page, making it easier for customers to find what they’re looking for.

How to Use Sorting and Filtering

To get started with sorting and filtering on your product list page, follow these steps:

Navigate to the Product List Page: Open your Stack store and go to the product list page where you want to add sorting and filtering options.
Select the Product List Element: Click on the product list element within your page.
Enable Sorting and Filtering: You’ll see two toggles for Sorting and Filtering. Switch them on to add these features to your product list page.
Configure Sort and Filter Properties: Customize the appearance of your sort and filter options by adjusting the following properties:
- Sort and Filter Text Color: Change the color of the text for better visibility.
- Sort and Filter Pill Color: Modify the background color of the sort and filter buttons.
- Reset Button Color: Choose a color for the reset button to match your site’s theme.
Save and Publish: Once you’re satisfied with the configuration, click on the Save/Publish button to apply the changes to your site.

Key Aspects of Sorting and Filtering

Availability: Sorting and filtering options are specifically available on the product list page.
Default Sort Order: Products are initially sorted by date, from oldest to newest.
Default Display: All products are shown without any filters applied by default.

Visual Guide

Adding Sort & Filter to Your Store: Visualize how to integrate these options into your product list.
Configure Properties of Sort & Filter: See examples of how to adjust text and button colors.
Filter Option Preview: Understand how filters will appear and function on your product list page.
Applying Filter to Products: Learn how customers can apply filters to find specific products.
Sort Option Preview: View how sorting options will be displayed and operated by users.

By implementing these features, you can significantly improve the shopping experience on your Stack ecommerce site, helping customers find products more efficiently.