Collection

Overview #

The Collection section is designed to display a grid of products with various display settings. It dynamically pulls results from the current or active collection, allowing for a flexible and customizable presentation of products.

Key components and functionality #

Grid size

The grid size settings allow you to define the layout of the product grid, optimizing the display for different devices.

• Default grid size: Choose between a three-column or four-column layout for desktop views. The default is three-column.
• Default grid size - Mobile: Select between a one-column or two-column layout for mobile views. The default is two-column.
• Enable grid size interface: A checkbox to allow users to toggle grid sizes on the frontend. The default is enabled.

Product display options

These settings control the visibility and arrangement of products within the Collection, ensuring that users can easily find what they are looking for.

• Show out of stock products: Decide whether to display out-of-stock items. Options include showing them by default, hiding them, or displaying them at the end of the list. The default is default.

Filter settings

Filters help users narrow down product selections based on availability and other criteria, enhancing the shopping experience.

• Enable filters: Allows the use of filters within the Collection. The default is disabled.
• Enable availability filter: Adds a filter for product availability. The default is disabled.
• Enable sorting: Allows products to be sorted by various criteria. 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 grid settings are optimized for both desktop and mobile views to provide a seamless user experience across devices.
• Performance: Consider the number of products displayed per page to maintain fast loading times.
• Accessibility: Ensure that text and background colors meet accessibility guidelines for readability.

Usage examples #

1. Displaying a collection with a four-column grid: To showcase a large number of products, set the grid size to four columns. This is ideal for desktop views where more products can be displayed simultaneously.

2. Mobile-friendly product display: For mobile users, opt for a two-column grid to ensure products are displayed clearly and are easy to navigate.

3. Highlighting in-stock products: Use the availability filter to allow customers to view only in-stock items, enhancing their shopping experience by focusing on available products.