Collection

Overview

The Collection section is designed to display a curated selection of products in a customizable grid, offering a smooth, visually engaging browsing journey. With powerful filtering and sorting features, along with banner support, Collection places all essential merchandising controls at your fingertips. Its flexible grid and toolbar controls make it easy to adapt to any catalog size or brand style.

⚠️ Important: Empower shoppers to discover products quickly and seamlessly by leveraging the built-in filtering, sorting, and banner options in the Collection section.

Key components and functionality

Collection grid and layout options

Collection grid and layout options dictate the visual order and density of product displays across desktop and mobile. These tools help maintain brand consistency while maximizing exposure and ease of navigation.

Grid size

Select how many columns of products are visible to desktop visitors.

1. Three columns — Default. Clean product spacing and high readability.

2. Four columns — Increases product density across each row for larger collections.

Grid size (mobile)

Control the product display format specifically for mobile devices.

1. One column — Simplified, scroll-friendly vertical layout.

2. Two columns — Default. Makes efficient use of mobile screen space for quick scanning.

Display grid size selection

Allow customers to choose between available grid layouts in the storefront interface.
This option is enabled by default to give shoppers greater control of their viewing experience.

Show out-of-stock products

Define the presentation of products that have sold out.

1. Default — Default setting. Inherits your store-wide behavior.

2. Hide — Excludes out-of-stock items from the display.

3. Show at end — Moves unavailable products to the end of the grid.

Filter and sorting controls

Filter and sorting controls provide customers with powerful tools to narrow product selections and change result organization. These options improve shopping efficiency for large or complex collections.

Enable filters

Reveal additional filtering by product properties, such as type, tag, or price.
Default is disabled. Activating this helps shoppers find relevant products faster.

Enable availability filter

Provide the option for customers to view only in-stock products.
Default is disabled. Especially useful for fast-moving or limited-stock catalogs.

Enable sorting

Allow users to reorder product grids by priorities like price or newest arrivals.
Default is enabled. Offers more flexible browsing.

Show filter panel open by default

Control whether the filtering and sorting interface is expanded when the page loads.
Default is enabled. Immediately shows navigation options for better discoverability.

Card settings

These settings let you override your theme’s global card configuration, giving you more granular control over how images, text, and spacing appear within individual sections.

1. Image aspect ratio: Controls how card images are cropped and scaled.

   1. Default,

   2. Landscape,

   3. Portrait,

   4. Square,

   5. Widescreen,

   6. Ultrawide.

2. Image aspect ratio (Mobile): Defines the aspect ratio for cards when viewed on mobile devices.

   1. Default,

   2. Landscape,

   3. Portrait,

   4. Square,

   5. Widescreen,

   6. Ultrawide.

3. Card text: Determines which text elements are displayed on the card.

   1. Title and excerpt,

   2. Excerpt only,

   3. Title only,

   4. No text.

4. Section padding: Adjusts the vertical spacing above and below the card section.

   1. Default,

   2. Custom.

📝 Note: Using custom card settings allows you to tailor image proportions and text display for specific layouts, without affecting your storewide design consistency.

Supported block types

You can add up to two Collection banner blocks to the Collection section. Banners are an ideal way to display timely messages, special promotions, or highlight featured collections directly above your grid.

💡 Tip: Use banners thoughtfully — clear, concise visuals and messages tend to perform best, supporting products without overwhelming them.

Usage notes

💡 Tip: Always preview the Collection section on various devices to verify layouts, banners, and filter options for maximum usability.

1. Regularly check and adjust grid and out-of-stock settings to keep collections efficient as inventory changes.

2. Limit filter choices to the most useful options, ensuring shoppers can refine results easily without distraction.

3. Design banners with strong contrast and alt text for clarity and accessibility.

4. Continually review and optimize the section for accessible navigation, fast load times, and readability.

The Collection section turns your catalog pages into engaging, shoppable destinations by blending usability, branding, and conversion-focused display options.