Skip to main content

Collection products

Merchant Developer

Renders a collection page's product grid with sidebar filters, sort dropdown, color swatches, and infinite scroll.

This is the main body of every collection page. It shows a product grid with a toolbar (product count, filter toggle, and sort menu), an optional filter sidebar built from Shopify's storefront filters, and loads more products automatically as the shopper scrolls.

storefront previewResult
Collection products
Collection products
storefront previewSettings
Collection Products section settings - grid layout, filters, sorting and product count
Collection Products section settings - grid layout, filters, sorting and product count

How to use it​

For merchants

In the Shopify theme editor, add or open this section, then:

  1. In the theme editor, open a Collection page and select the Collection products section.
  2. Toggle Show filters and Show sort to control whether the filter sidebar and sort menu appear.
  3. Set Products per row for desktop, tablet, and mobile to control grid density.
  4. Choose a Product image ratio (square, portrait, tall, or landscape) to match your product photography.
  5. Enable Show color swatches to display color chips on product cards, and pick a Color scheme for the section.
tip

Filters only appear if you have enabled Storefront filtering in Shopify admin under Online Store > Navigation (or if products have multiple variants).

tip

Color swatches use the value's admin swatch image first, then the product's color-pattern metaobject image, then the swatch color, falling back to a CSS color chip named after the value.

tip

Single-variant products' default Title option filter is hidden automatically so it never clutters the sidebar.

Settings reference​

SettingTypeDefaultWhat it does
Color schemecolor_schemescheme-1Applies one of the theme's saved color schemes to this section.
Show filterscheckboxtrueRequires Storefront filtering to be enabled in Shopify admin under Online Store > Navigation.
Show sortcheckboxtrueShows the sort-by dropdown in the toolbar.
Products per row (desktop)range3Grid columns on desktop (2-5).
Products per row (tablet)range3Grid columns on tablet up to 989px (2-4).
Products per row (mobile)range2Grid columns on mobile up to 749px (1-3).
Show color swatchescheckboxtrueDisplays color swatches on product cards for products with a Color option.
Product image ratioselect1/1Card image aspect ratio: Square (1:1), Portrait (3:4), Tall (2:3), or Landscape (4:3).

Supports only @app blocks, letting apps inject content into the collection section.

Developer notes​

Developer note

Loads collection-main.css and defers collection-filters.js; also renders the quick-view-assets, product-card, pagination, and section-color-scheme snippets.

  • Grid columns are set inline per section.id from the three products-per-row settings; the 480px override was removed (FB15) so mobile respects products_per_row_mobile.
  • Infinite scroll is always on (paginate by a fixed 24, with an #InfiniteScrollSentinel); products_per_page is not merchant-facing.
  • Color swatch resolution reads metafields.shopify['color-pattern'] using bracket notation (dotted syntax is parsed as subtraction in Liquid); matched by handleized label into a ~~handle::url~~ map.
{%- paginate collection.products by products_per_page -%}
  {%- for product in collection.products -%}
    {% render 'product-card', product: product, context: 'collection', show_swatches: section.settings.show_color_swatches %}
  {%- endfor -%}
  {%- render 'pagination', paginate: paginate -%}
{%- endpaginate -%}