Product grid

The Product Grid section displays products from a collection in a responsive grid layout with built-in pagination, filtering, and sorting functionality. This section is designed to improve product browsing experiences by allowing customers to quickly explore, filter, and organize products based on their preferences.

With flexible column layouts, customizable sidebar options, and advanced filtering controls, the section can adapt to different storefront styles while maintaining a clean and user-friendly shopping experience.

Settings

  • Products per page: Controls how many products are displayed per page before pagination is applied.
  • Number of columns on large desktop: Defines how many product columns are displayed on very large desktop screens.
  • Number of columns on desktop: Controls the product grid column layout on desktop devices.
  • Number of columns on tablet: Adjusts the product grid layout for tablet devices.
  • Number of columns on mobile: Defines the number of product columns displayed on mobile devices.
  • Grid column buttons
    These settings allow customers to customize the number of visible product columns directly on the storefront.
    Show grid column buttons: Displays grid layout buttons for changing the product column view. This feature only works on desktop devices.
    List columns: Defines the list of available column layout buttons displayed to customers, such as 4, 3, or 2 columns.
  • Sidebar
    Show layout sidebar: Displays the collection sidebar layout alongside the product grid.
    Show collection image: Displays the featured image of the current collection inside the sidebar area.
    Show collection vendor: Displays a list of product vendors using image-based presentation inside the sidebar area.
  • Filtering and sorting
    Enable filtering: Enables product filtering functionality. Filters can be customized using the Shopify Search & Discovery app.
    Desktop filter layout: Controls the filter display style on desktop devices. Available options include Horizontal, Vertical, and Drawer layouts.
    Enable sorting: Allows customers to sort products based on available sorting criteria.

Block: Banner

Add promotional banners directly into the product grid to create a more engaging and editorial shopping experience. Each banner can use an image or video and can be positioned to appear between product items, allowing promotional content to flow naturally alongside the product listings.

Use banners to highlight new collections, special offers, seasonal campaigns, featured products, or brand messages without interrupting the customer’s browsing experience. The flexible placement makes it easy to create a dynamic product grid that combines shopping content with visual storytelling.

  • Position: Set the position of the banner within the product grid, determining where the banner appears among the product items.
  • Color scheme: Select the color scheme used for the banner content, including its background and text.

Media

  • Image: Select an image to display as the banner media.
  • Or a Shopify-hosted video: Select a Shopify-hosted video to use as the banner media instead of an image.
  • Link: Set the destination link for the banner. Customers can click the banner to navigate to the selected page or product.

Heading

  • Heading: Add a heading displayed on the banner.
  • Large desktop font size: Set the heading font size on large desktop screens.
  • Desktop font size: Set the heading font size on desktop screens.
  • Tablet font size: Set the heading font size on tablet devices.
  • Mobile font size: Set the heading font size on mobile devices.

Description

  • Text: Add a description or supporting text displayed below the banner heading.

Button

  • Button label: Set the text displayed on the banner button.
  • Button link: Set the destination link for the banner button, allowing customers to navigate to a specific product, collection, page, or other store destination.

Using responsive product grids, well-organized filters, and balanced sidebar content can help improve product discoverability and create a smoother shopping experience. For the best results, use column layouts that match your product imagery and enable filtering options that help customers quickly find relevant products.