# Collection product grid

This guide describes setting up the collection Product grid section.

Use the section to customize how products are displayed on Collection pages by adding features like a grid layout, or product filtering and sorting.

An example collection Product grid section on a store's Collection page.

In the previous image, a collection Product grid section is shown on a store’s Collection page (on the right). In the section’s settings menu, on the left, to show a card behind the product tiles inside the section, the checkbox option is enabled to Display product tiles on cards. To show an Add to cart button on each product tile, the checkbox option is enabled to Enable quick buy. To show the product Filter and Sort options inside the section, the Enable filtering and Enable sorting checkboxes are both set to on.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks (opens new window)

# Set up a collection product grid section

To set up a collection Product grid section:

  1. Go to Customize theme. At the top of the page, select Collections > Default collection.

    Note

    The section is available only on the Collections > Default collection page template.

  2. From the side menu, select Product grid.

    The Collection product grid section selected in Theme editor.
  3. Select a setting described in the following table.

Setting name Description
Number of products Adjust the slider Number of products to set the (maximum) number of products to display inside the section. The slider ranges from 8 to 24.
Display product tiles on cards Select the checkbox Display product tiles on cards to show/ hide a card behind the product tiles inside the section. Refer to Display product blocks on cards.
Enable quick buy Select the checkbox Enable quick buy to show/ hide an “Add to cart” button on product tiles inside the section. For a product with two variants, Shapes theme displays the variant selector as a button. If there are more than two variants, a dropdown selector is displayed. Refer to Show quick buy on product tiles.
Products per row on mobile Select the radio buttons Products per row on mobile to set the number of products to display in each row, inside the section. The options are 1 or 2. This setting applies to mobile display devices.
Products per row on desktop Adjust the slider Products per row on desktop to set the number of products to display in each row, inside the section. The slider ranges from 2 to 5. This setting applies to desktop display devices.
Filtering and sorting > Enable filtering Select the Enable filtering checkbox to show/ hide the product filtering options inside the section. If enabled, visitors can select a range of products within a collection by using filtering criteria like availability and price. Refer to Shopify help: Searching for products and filtering your product list (opens new window) and Shopify help: Add storefront filtering (opens new window)
Filtering and sorting > Customize filters Follow the Customize filters link to open the page Navigation > Collection and search filters on your store’s admin. Use the page to set up custom filters and navigation menus for your store’s collections. Refer to Shopify help: Custom filters (opens new window)
Filtering and sorting > Enable sorting Select the checkbox Enable sorting to show/ hide the product sorting options inside the section. If enabled, visitors can arrange the products in a collection by using sorting criteria like price and popularity. Refer to Shopify help: Collection layout and appearance (opens new window)
Filtering and sorting > Expand filters by default Select the checkbox Expand filters by default to show/ hide the product filtering options, by default, inside the section. With this option set to off, to access the product filtering options, visitors must select the Filter button inside the section.
Filtering and sorting > Show filter counts Select the checkbox Show filter counts to show/ hide a count of the number of products in each filter category, inside the section. A count is displayed beside the name of each filter. For example, for a collection containing two products that are in stock, In stock (2) is displayed in the Availability filter area.
Filtering and sorting > Enable color swatch filters For products in a collection that use color variants, select the checkbox Enable color swatch filters to show/ hide the option to filter products by color, inside the section. Refer to Shopify help: Variants (opens new window) and Shopify help: Searching for products and filtering your product list (opens new window)
Filtering and sorting > Learn how to set up swatches Follow the link Learn how to set up swatches to open the Colors settings guide.
Color > Color scheme Use the Color scheme dropdown to set the section’s color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors.
Color > Use gradient for background Select the checkbox Use gradient for background to turn on/ off using a gradient as the section’s background.
Theme settings Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.

# Configure a block within a collection product grid section

A default collection Product grid section contains no blocks. To configure a block inside the section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select Collections > Default collection.

  2. From the side menu, expand the Product grid section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Collection product grid's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks (opens new window)

  4. Apply a block setting described in the following table.

Block name Block description Block setting(s)
Background pattern Displays a stylistic pattern as a background inside the section. Refer to Background pattern.
Background shape Displays a stylistic shape as a background inside the section. Refer to Background shape.
Sticker Overlays the section with a stylized sticker. Refer to Stickers.
Shape divider Displays a stylized separator between the current section and the next/ previous section. Refer to Shape divider.