Collection products

The Collection products section is where you showcase products within a collection, offering options for layout, pagination, filtering and sorting. This section is designed to make it easy for users to browse and navigate your collections with various tools for organizing and displaying products.

This section is included by default in the collection template.

‍

General section settings

Within this section, you'll find common settings like section headers, containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Section Settings

• Products per Page: Define the number of products to display on each page within the collection. Choose between 8 and 40 products, with a default of 24.
• Products per Row on Desktop: Choose how many products are shown per row on desktop displays. Options are 2, 3, or 4 products per row, with a default of 3.
• Products per Row on Mobile: Set the number of products displayed per row on mobile. Options include 1 or 2, with a default of 1.
• Spacing Between Products on Desktop: Adjust the spacing between product cards on desktop in pixels, ranging from 10 to 50 px. The default is 30 px.
• Spacing Between Products on Mobile: Define spacing between products on mobile, from 10 to 30 px, with a default of 15 px.
• Pagination: Select the pagination style for your collection. Options include:
  ‍
  • Default: Standard pagination with numbered pages.
  • Load More Button: Adds a “Show more” button to load additional products.
  • Infinite Scrolling: Automatically loads products as the user scrolls.‍
• ‍"Load More" Button Text: Customize the text for the “Load More” button. The default text is "Show more."

Filtering Options

• Enable Filtering: Toggle product filtering within the collection. When enabled, this feature provides users with filter options based on available tags or criteria.
• Filter Layout on Desktop: Choose how filters appear on desktop:
  ‍
  • Vertical: Displays filters in a side column.
  • Drawer: Filters appear in a slide-out drawer.
• Expand Tabs by Default: Decide if filter tabs should open by default, making it easier for users to see filter options immediately.
• Show Filter Counts: Show the number of products available within each filter option (e.g., "Red (5)" for five items tagged red).

Sorting Options

• Enable Sorting: Allow users to sort products by various criteria, such as price or popularity.
• Show Featured Option: Enable this to add a “Featured” sorting option, which typically highlights top products within a collection.

Sub-Collections

• Show Sub-Collections: Display links to sub-collections within this main collection, helping users navigate related product groups.
• Sub-Collections Menu: Select the menu that will be used to display sub-collections if the option is enabled.

Layout Options

• Show Grid Layout Switcher: Provide users with the option to toggle between different grid layouts for product display, enhancing the browsing experience. With this option enabled, users can easily switch between 2, 3, or 4 product cards per row.

Color Customization

• Color Scheme: Select the main color scheme for the section to align with your store’s branding.
• Drawer Color Scheme: Customize the color scheme for the filter drawer, ensuring it complements the overall section appearance.

Block Settings: Promotion Block

The Promotion Block allows you to highlight a specific promotion within your collection grid, such as a seasonal offer or special product.

• Position in Results: Set the position of the promotion block within the collection grid. Options range from 1 to 50, with a default of 1.
• Hide When Results Are Filtered: Check this box to hide the promotion block if product filters are applied.
• Card URL: Add a URL to link the promotion block to a specific page or product.

Media Options

• Image: Upload an image for the promotion block.
• Video: Add a video to the promotion block, creating a dynamic visual experience.
• Make Media Clickable: Enable this option to allow users to click the media (image or video) to follow the provided link.
• Media Aspect Ratio: Select the aspect ratio for the media. Options include adapt, square, portrait, landscape, and fill.

Content Options

• Custom Icon: Upload a custom icon to display with the promotion block.
• Icon Height: Set the icon height for both desktop and mobile in pixels, ranging from 16 to 32 px.
• Heading: Add a headline to attract attention to the promotion block.
• Heading Size: Choose the heading size (small, medium, large, extra-large) for prominence.
• Text: Add descriptive text to provide more details about the promotion.
• Button Label: Customize the button label text. By default, this is set to “Optional button.”
• Button Style: Choose a style for the button, with options for primary and outline styles.

Layout Options

• Content Position on Desktop: Select where the content (text and button) should appear on desktop displays. Options range from top left to bottom right.
• Content Position on Mobile: Choose the position of the content on mobile, with options for top, middle, and bottom.
• Content Alignment on Desktop: Align content on desktop to the left, center, or right.
• Content Alignment on Mobile: Choose the alignment for mobile, similar to desktop options.

Overlay and Colors

• Overlay Opacity: Adjust the opacity of the overlay (0–100%) to control the prominence of the background media.
• Color Scheme: Select a color scheme specifically for the promotion block to match or contrast with the collection section.