Product grid

Section

Suggest collections related to the current collection page.

Available block

Used to add a promotion (that has image and text inside) to the section.

🤔 How to display and customize the Product Grid?

Goal: Control how products appear on your Collection page - grid or list layout, number per row, and pagination style.

STEP 1: Add the section
Go to Theme Editor → Collection page → Add section → choose Product grid.

STEP 2: Set up layout and pagination

Click on the Product grid section to open its settings panel and:

• Products per page: Choose how many items are displayed per page (6–50).
• Products per row on desktop: Adjust horizontal density (2–6).
• Products per row on mobile: Choose between 1 or 2 products per row.

• Pagination style: Pick Infinite scroll, Click to load, or Number pagination depending on your store’s navigation flow.

STEP 3:

Click "Save" when done.

🤔 How to control product card details?

Goal: Decide what information appears on each product card.

STEP 1: 

In the Collection page > go to the Product grid section > Product card setting group.

STEP 2:

Toggle on the information you want to show:

• Toggle Show vendor to display the brand or supplier.
• Enable Show rating to display average product reviews (requires a rating app).
• Turn on Show quickview for instant product previews without leaving the page.
• Activate Show description on list view to display product details in list layout mode.

STEP 3:

Click "Save" when done.

🤔 How to enhance browsing with Filtering & Sorting within the Collection page?

Help customers find products faster by adjusting the filter and sorting settings for your Product grid:

STEP 1: 

In the Collection page > go to the Product grid section > Filtering and Sorting setting group.

STEP 2:

• Enable filtering: Turn on to allow customers to filter products.
• Enable sticky filters: Keep filters visible while scrolling (desktop).
• Desktop filter layout: Choose between Above, Aside or Drawer layout.(⚠️ Note: Drawer is the default mobile layout.)
• Collapse filter: Set filters to be hidden by default in Aside/Above layouts. Click “Filters” above the grid to view them.
• Expand all filters by default: Show all filters expanded (Drawer/Aside only).
• Enable collection count: Show product counts next to filter options.
• Enable sorting: Allow customers to sort products (Featured, Best selling, etc.).

STEP 3:Click "Save" when done.

🤔 How to use the Advanced Filter (Visual filters)?

STEP 1: Set up filters in Shopify

Use the Search & Discovery app to create filters from product options or metafields.
You can use metafields for visual options like colors, patterns, or materials.

⚠️ Filter app requirement: The Maximize theme does not natively support filter display; you will need a filtering app like Shopify's Search & Discovery to enable and manage filters.

STEP 2: Create the Filter Option

Depending on how you want to filter products, you can create filters using either product options or metafields.

• Using Product Options

• Using Metaobject/Metafield: If you prefer to use metafields for filtering, follow these steps:

1. Create a Metaobject: Ensure it includes a field for the filter option name and a field for color/image input in a one-value format
2. Create Entries: Input relevant data into the metaobject
3. Create a Metafield: Set the type as "Metaobject reference", choose the metaobject that was created previously. Ensure that the metafield is set to accept only one value.
4. Assign Metafield to Products: Go to each product and assign the metafield to the corresponding entries.

STEP 3: Create the Filter in the App

Once your product options or metafields are set up:

• Navigate to the Search & Discovery app in Shopify.

• Follow the Shopify Filter Setup Guide to create filters.

Also, refer to the Storefront Filters Customization Guide to fine-tune the filters.

STEP 4: Storefront set up

Click on the Product grid section to open its settings panel and:

• Enable advanced filters to show up to 3 filters in grid layout, with optional image display.
• Fill the Advanced filter labels with Filter label set up above. 
• Turn on Hide unavailable filter values if you want to automatically remove out-of-stock or unavailable options from your filter lists.
• Toggle on Enable carousel on desktop. Carousel is enabled on mobile by default.
• Choose Image Style as Round or Square.

STEP 5: Click "Save" when done.

🤔 How to add Promotion blocks to Product Grid?

The promotion block allows you to highlight special offers, flash sales, or important announcements within the related collections section. You can customize the icon, heading, text, and background to match your store’s aesthetic. Here's how:

STEP 1: 

Under the Product Grid section, add the Promotion block.

STEP 2: Add your text and visuals:

• Add Subheading, Heading, and Content.
• Upload a Background image and adjust Overlay opacity (0–100%).
• Set Button label, Button link, and Button style.
• Align content (Left / Center / Right) and position it (Top / Center / Bottom).

STEP 3: Adjust layout on both views:

• On desktop 🖥️: Set Column width in grid view, Row height in grid view(1 to 3), Column width in list view (1 or 2), and Row height in list view (1 or 2).
• On mobile 📱: Number of columns wide (1 or 2) and Number of rows tall (1 or 2).

STEP 4: Click "Save" when done.