Product grid

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

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.

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.

⚠️ Note: These settings don't apply when a B2B customer switches to the Quick order layout - see the last use case below.

STEP 3: Click "Save" when done.

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.

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 the 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.

The promotion block allows you to highlight special offers, flash sales, or important announcements within the Product grid. 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: Set Number of columns wide (1 or 2) and Number of rows tall (1 or 2).

⚠️ Note: The Promotion block is hidden when a B2B customer switches to the Quick order layout - see the next use case.

STEP 4: Click "Save" when done.

Goal: Give logged-in B2B customers a listing view where they can set a quantity for several variants and add them all to the cart in one action, without leaving the collection page.

⚠️ Note: This only affects logged-in, approved B2B (company account) customers. Guests and regular retail customers always see the standard Product grid, regardless of this setting.

STEP 1: Open the Product grid section

Go to Online Store > Themes > Customize. At the top of the Theme Editor, switch the page dropdown to a Collection page (e.g. Default collection) - this is where your products are listed. In the left sidebar, click on the Product grid section to open its settings panel.

⚠️ Note: Don't see a Product grid section in the sidebar? It hasn't been added to this page yet - follow 3. Location & Setup above first.

STEP 2: Turn on B2B order view

In the settings panel, scroll down to the B2B order view setting group near the bottom, and toggle on Enable B2B order view.

STEP 3: Choose the default view

Once enabled, a new setting called B2B default view appears right below it. This decides what a B2B customer sees the first time they land on a collection page:

• View products (default): B2B customers see the exact same grid as everyone else, with the usual vertical product cards.
• Quick order: B2B customers land on the quick-ordering list layout described below.

Either way, customers can still switch between the two using the grid/list view toggle above the product list - this setting only controls which one loads first.

⚠️ Note: In Quick order, the Product card settings (vendor, rating, quick view, description, labels & badges) and the Promotion block don't apply - the row only shows what's core to fast ordering.

STEP 4: Click "Save" when done.

⚠️ Note: If you've set up Request for quote, B2B customers who haven't been approved for pricing yet will see a "Request quote" button next to "Add to cart" instead of prices. Clicking it opens a form to submit the entered quantities as a quote request rather than an order.