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?
Filtering
Enable Filtering: Allow customers to filter products based on available filter options. You can customize these filters using the Shopify Search & Discovery app.
Desktop Filter Layout: Choose how product filters are displayed on desktop devices:
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.
Note: The Drawer layout is always used on mobile devices.
Open Sidebar by Default: Keep the filter sidebar open after customers apply filters until they manually close it.
Filter Price Behavior: Choose how the price filter responds to customer interactions:
Auto: The list updates instantly as the user slides the price range.
Click: The list updates only after the user confirms their selection.
Show Filter Values Count: Display the number of products available for each filter value. This option does not apply to circular color swatches.
Show Active Filter Labels: Display the selected filter values within the active filters.
Swatches Style: Choose how color swatches are displayed. The Circle option displays color swatches in a circular shape.
Sorting
Enable Sorting: Allow you to sort products using the available sorting options.
Show Sort by Featured: Display the Featured sorting option.
Show Sort by Most Relevant: Display the Most Relevant sorting option.
Show Sort by Best Selling: Allow you to sort products by best-selling order.
Show Sort by Alphabetical: Let you sort products alphabetically.
Show Sort by Price: Allow you to sort products by price, from low to high or high to low.
Show Sort by Date: Allow customers to sort products by date, from newest to oldest or oldest to newest.
Note: The default sorting option will always be displayed, regardless of the options enabled above.
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.
