Search results

Overview #

The Search results section is designed to display search results with various filter and layout settings. This section allows users to customize how search results are presented, including grid size, filter options, and sorting preferences. It enhances the user experience by providing a flexible and responsive layout for search results.

Key components and functionality #

Grid size

The grid size setting allows you to define how search results are displayed in terms of columns. This setting is crucial for ensuring that the search results are presented in a visually appealing and organized manner.

• Default grid size: Choose between a three-column or four-column layout for desktop views. The default is three-column.
• Default grid size - Mobile: Choose between a one-column or two-column layout for mobile views. The default is two-column.
• Enable grid size interface: A checkbox to enable or disable the grid size interface. The default is enabled.

Filters and sorting

This section provides options to display filters and sorting mechanisms for search results. Filters and sorting options help users find what they are looking for more efficiently by narrowing down the search results.

• Enable filters: Allows users to filter search results. The default is disabled.
• Enable availability filter: Adds a filter to show only in-stock items. The default is disabled.
• Enable sorting: Allows users to sort search results. The default is enabled.
• Show open by default: Determines if filters are expanded by default. The default is enabled.

Usage notes #

• Responsive design: Ensure that the grid size settings are optimized for both desktop and mobile views to provide a seamless user experience across devices.
• Performance: Consider the impact of enabling multiple filters and sorting options on page load times, especially for stores with extensive product catalogs.
• Accessibility: Ensure that all text and background colors meet accessibility guidelines to provide a user-friendly experience for all customers.

Usage examples #

1. Customizing grid layout: If you want to display search results in a more compact form on desktop, you can set the grid size to four columns. For mobile, you might prefer a single-column layout for better readability.

2. Using filters: Enable filters to allow users to narrow down search results based on availability. This is particularly useful for stores with a large inventory.

3. Sorting options: Enable sorting to let users organize search results by criteria such as price or relevance, enhancing their shopping experience.