Product grid - collection

This guide describes how to set up the Product grid section.

Use the section to customize collection pages by adding features like a grid layout, or product filtering and sorting options. Refer to Shopify help: Collection layout and appearance.

The previous image shows an example store's Collection page. In the upper left, part of the Theme editor's Product grid section menu is displayed. The menu's Enable sorting option is enabled. This option shows or hides the product sorting options in the section. For example, in the upper right area of the previous image, the section displays the Sort options.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Configure the Product grid section

To configure your Product grid section:

1. In the Theme editor, at the top of the page, use the dropdown to 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.

3. Select a setting described in the following table.

Setting name	Description
Number of products	Adjust the Number of products slider between 4 and 24 to set the maximum number of products to display in the section.
Display on card	Use the Display on card option to show or hide a card behind the section. Refer to Shopify help: Cards.
Enable quick buy	Use the Enable quick buy option to show or hide an "Add to cart" button on product tiles in 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	Use the Products per row on mobile options to select 1 or 2 to set the number of products to display inside each row in the section on mobile display devices.
Products per row on desktop	Adjust the Products per row on desktop slider between 2 and 5 to set the number of products to display inside each row in the section on desktop display devices.
Filtering > Enable filtering	Use the Enable filtering option to show or hide the product filtering options in the section. With this option enabled, your store 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 and Shopify help: Add storefront filtering.
Filtering > Learn how to set up filters (link)	Follow the Learn how to set up filters link to open the Shopify help: Adding filters with Shopify Search & Discovery page to learn how to set up custom filters and navigation menus for your store's collections.
Filtering > Expand filters by default	Use the Expand filters by default option to show or hide the product filtering options in an expanded area, by default, in the section. With this option off, to access the product filtering options, your store visitors must select the Filter button in the section. To use this option, turn on Enable filtering.
Filtering > Show filter counts	Use the Show filter counts option to show or hide a count of the number of products in each filter category in the section. The 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. To use this option, turn on Enable filtering.
Filtering > Enable price range control	Use the Enable price range control option to show or hide a price range control on your store's Products and Collection pages. With this option enabled, your store's visitors can use the control to specify a minimum and maximum product price. Only products that have a price within the specified price range are displayed on the page. To use this option, turn on Enable filtering.
Sorting > Enable sorting	Use the Enable sorting option to show or hide the product sorting options in the section. With this option enabled, your store visitors can arrange the products in a collection by using sorting criteria like price and popularity. Refer to Shopify help: Collection layout and appearance.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use gradient for background	Use the Use gradient for background option to turn on or off using a gradient as the section's background.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.

Configure a block within a Product grid section

To configure a block within your Product grid section:

1. In the Theme editor, 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.

   Note

   Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

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

Block name	Block description	Block setting(s)
Collection banner	Displays a banner, with optional navigation links, collection title, description, and an image tile inside the section. Use this block instead of the collection banner section if you prefer using a continuous pattern for the whole template.	Use the Display on card option to show or hide a card behind the block. Refer to Shopify help: Cards. Use the Show collection title option to show or hide the collection title in the block. With this setting enabled, the collection title is displayed on the banner. Use the Show collection description option to show or hide the collection description in the block. With this setting enabled, the collection description is displayed on the banner. Use the Show collection image option to show or hide collection images in the block. Use the Collection image style options to select Inset (narrow width) or Full (width). Use this option to set a style for displaying the collection images in the block. Use the Crop options to select No crop, Square, Portrait, Landscape, Super wide, or Letterbox to set a cropping style for images in the block. Use the Collection menu picker to select a menu to display in the block. For example, add a menu for navigating your store's collections. Note that this menu won't show dropdown items. Refer to Shopify help: Menus and links. Select Remove block to delete the block from the section.
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.