Collection Page

This page displays all products within a specific category (collection). It provides powerful tools for customers to browse, filter, and sort through your inventory.

1. How do I arrange the product grid?

You can customize the number of products shown and their layout on different devices.

• Products per Page: Use the Products per page slider to set the maximum number of items loaded at one time.

• Desktop Columns: Adjust the Number of columns on desktop slider to determine how many products appear in a single row on large screens.

• Mobile Columns: Use the Number of columns on mobile setting to switch between a 1-column or 2-column layout for smaller screens.

2. How do customers navigate through pages?

• Pagination: Use the Pagination dropdown to select how users navigate to the next set of products.

  • Note: The "Links" option typically adds standard page numbers at the bottom of the grid.

3. Can I change how the product cards look?

Yes, you can adjust the visual style of the product previews.

• Borders: Toggle Show border to add an outline around each product card.

• Images: Select an Image ratio to ensure all product images are cropped or sized uniformly.

• Vendor: Toggle Show vendor to display the brand or manufacturer name on the card.

4. How do I manage Filtering and Sorting?

These tools help customers find specific items quickly.

• Enable Features: Use the Enable filtering and Enable sorting toggles to turn these features on or off.

• Desktop Filter Layout: Choose how filters appear on desktop screens:

  • Drawer: Filters are hidden and slide out from the side when clicked.

  • Sidebar: Filters are always visible in a column to the left of the products.

• Price Filter: Use Filter price behavior to control how the price slider acts:

  • Auto: The list updates instantly as the user slides the price range.

  • Click: The list updates only after the user confirms their selection.

5. Image with text overlay

This block allows you to break up the product grid with a promotional image or banner, adding visual interest and highlighting specific campaigns directly among your products.

6. How do I configure the content?

You can add an image, title, and description.

• Image

• Heading

• Text

7. Can I customize the button and animations?

Yes, you have control over the button style and hover effects.

• Hover Effect: Select an animation style for when a user hovers over the card: Blur or Tilt.

• Button:

  • Label & Link: Enter the button text and destination URL.

  • Style: Choose Outline / Solid / Link.

  • Icon: Toggle Show icon and select an icon style to appear next to the text.

8. How do I position the banner inside the grid?

You can choose exactly where the banner appears among your products.

• Banner Position: Use the slider to "Insert banner before product #". For example, setting this to 5 places the banner before the 5th product.

  • Note: The settings advise not to use end-of-row positions to keep the layout stable.

• Color Scheme: Select a specific Color scheme for the banner's text and background.

9. Make section full width

When this option is disabled, the section will switch to a container layout instead of full width.

In this layout, there is not enough space to display the filter as a sidebar.

Therefore, the filter can only be displayed as a cart drawer.