Skip to main content

Collection page

Merchant Developer

The Collection page template controls how a single collection's products, banner, and description are displayed to shoppers.

This is the template Shopify renders for any collection page (for example a "Skincare" or "New Arrivals" collection). It stacks a banner, an optional description, and the filterable product grid, followed by three optional promotional sections that are disabled by default.

storefront previewResult
Collection page
Collection page
storefront previewSettings
Collection page template in the theme editor - banner, description, products, plus optional hero/icon/image sections
Collection page template in the theme editor - banner, description, products, plus optional hero/icon/image sections

Sections on this template​

  • Collection Banner
  • Collection Description
  • Collection Products
  • Hero Banner
  • Icon Features
  • Image with Text

How to use it​

For merchants

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

  1. In the Shopify admin, go to Online Store → Themes and click Customize on the Nile theme.
  2. In the top template dropdown, choose Collections → Default collection to edit this template.
  3. Select a section in the left sidebar (for example Collection Products) to change how many products show per row, the image ratio, and whether filters and sort appear.
  4. Enable optional sections such as Hero Banner, Icon Features, or Image & Text Custom by clicking the section and ticking its enable checkbox.
  5. Click Save. Preview the change on any collection to confirm it looks right.
tip

The banner image set here (Collection Banner) is a template default; individual collections can override imagery via their own collection settings.

tip

The product grid uses infinite scroll and loads 24 products per batch automatically - there is no pagination setting to configure.

tip

Filters only appear when the collection actually has filter options or products with multiple variants, even if Show filters is enabled.

Settings reference​

SettingTypeDefaultWhat it does
Show filterscheckboxtrueDisplays the filter sidebar when the collection has available filters or variant options.
Show sortcheckboxtrueShows the sort-by dropdown above the product grid.
Products per row (desktop)number3Number of product columns on desktop.
Products per row (tablet)number3Number of product columns on tablet widths.
Products per row (mobile)number2Number of product columns on mobile widths.
Image ratioselect3/4Aspect ratio applied to product card images in the grid.

Developer notes​

Developer note

The main section sections/collection-main.liquid loads collection-main.css and renders section-color-scheme and quick-view-assets snippets.

  • Grid columns are set via inline <style> scoped to .collection-section-{{ section.id }} and #CollectionGrid, driven by the products-per-row settings; per FB15 there is no hardcoded 480px override.
  • products_per_page is hardcoded to 24 for the infinite-scroll fetch batch and is intentionally not merchant-facing.
  • The optional sections (hero-banner, icon-features, image-with-text) ship with enable_section:false so they are inert until a merchant turns them on.
{%- assign has_sidebar = false -%}
{%- if section.settings.show_filters -%}
  {%- if collection.filters.size > 0 or has_variant_options -%}
    {%- assign has_sidebar = true -%}
  {%- endif -%}
{%- endif -%}